Learning by Hacking

<blockquote class='posterous_long_quote'><p>These are supporting examples for the blog entry, The Paragraph in Web Typography & Design.</p> <p>Only standard <code>&lt;p&gt;</code> tags have been used. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent. Paragraph font size is set at 1em (equivalent to 16px if browser font size is unchanged) and line height set at 1.25em. Georgia was used exclusively. No browser specific CSS has been used—any inconsistency in the rendering of line-height, baseline and element positioning has been left for cross browser comparison before implementing.</p> <ol> <li>Browser default style</li> <li>Block flush left, ragged right</li> <li>Block justified</li> <li>One em indent with boundary, flush left, ragged right</li> <li>Two lead indent without boundary, flush left, ragged right</li> <li>Indent without boundary, justified</li> <li>Outdent flush left, ragged right</li> <li>Continuous text, CSS generated pilcrow divided</li> <li>Elevated cap (versal) with bold opening</li> <li>Drop cap (versal) with bold opening</li> <li>Outdent cap (versal) with bold small caps opening</li> <li>Initial outdented block with CSS generated section and mid point dividers</li></ol></blockquote>

Some websites now contain 'responsive images'. These scale (or crop) depending upon your screen's viewing area, so the image sizes remain appropriate whether you're looking at the website on a mobile phone, or on a huge flat screen monitor.

This is an example of responsive text.

The amount of textual detail scales relative to your screen size.

The big problem with many tools used for writing (ok, mostly word processors) is that there are too many things you could be doing instead of writing. You could be playing with fonts or styles, futzing for ages trying to make the document look right, work the number styles, headers and footers and resizing the margining.

Or you could be writing.

With Markdown, the font, style, margin and other stuff all comes later. All you have is the text, the basic structure and the options for bold, italic, lists and tables. That’s it! There’s nothing else, so the writer is encouraged to write.