You’re reading Signal v. Noise, a publication about the web by Basecamp since 1999. Happy !

A simple styleguide for writing on Signal v. Noise


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>

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" />

The power is yours. Go write something good.