Create a beautiful sub-header, like this one.
Sub-headers are a great way to lead into your article, or to separate a long article with many sections. A simple <h2> does the trick.
<h2>Create a beautiful sub-header.</h2>A simple styleguide for writing on Signal v. Noise
Spaced Paragraphs
Paragraph indentations are beautiful for longform articles. If you’d like to break out into spaced paragraphs, one <br> inbetween two paragraphs will let you escape.
…the end of one paragraph.<br>The start of your next…
Call out a special note.
Grab your reader‘s attention with a special note.
<span class="note">Important information goes here.</span>
Pullquotes
You can embed nice, big pullquotes. These work best for shorter lines.
<blockquote>An inspiring line someone said.</blockquote>
Longform Quotes
For lengthy quotes, share the whole paragraph.
<blockquote class="longform">A world-changing passage.</blockquote>
Big Images
Now, images smaller than 660px will have text wrap around it. Images larger than 660px will be as wide as the text column. If you wrap your image in <figure>, readers can click-to-enlarge your image to 960px.
<figure><img src="noah_is_a_troll.jpg" /></figure>Bonus: you can add captions to your images as well with <figcaption>.
<figure><img src="noah_is_a_troll.jpg" /><figcaption>Noah is the troll.</figcaption></figure>
Small Images on the Sides
If you have a tiny (smaller than 660px) image, you can float it right.
<img src="rework.jpg" align="right" />…or left!
<img src="rework.jpg" align="left" />