Typography

Most of web design is the designing of text – picking the fonts to use and shaping them with style sheets. The primary goal in designing text is to make it transparent, so it is there to support the information it presents without intruding on it.

How paragraphs are presented is a central part of the design of useful and unobtrusive text. Following these few directions can make them easier to read.

For paragraphs (<p> tag) use:
• Line height between 1.3 and 1.6em.
• Font-size between 16px and 18px, depending on x-height of the font.
• Text width between 30 and 35em.
• A small reduction in word spacing can make the text flow more evenly: word-spacing:-0.05em
• And don’t justify the text.
In all the text, including paragraphs, use:
• Smart quotes ‘ ’ “ ” – not generic quotes ' "
• A smart apostrophe ʼ – not a generic one '
• An – (en dash) with a space on either side, instead of—(em dash) with no spaces.
• Use Unicode for special characters – é not é for é, and “ not ” for “.

Any Unicode character can be inserted into a web page using either decimal or hexadecimal format in two different ways: decimal can be in the short form (A A) or the long form (A A), as can the hexadecimal – short form (A A) or long form (A A)

If anyone says san-serif is better than serif, or the reverse, always ask which fonts they mean, since Georgia 123 ≠ Times New Roman 123 and Verdana 123 ≠ Arial 123.

Also ask what font-size, line-height and line-length will be used – those often matter more for readability than the font chosen.

The fonts used in Simple & Useful are Droid Serif, Droid Sans and Droid Sans Mono. All were designed by Steve Matteson to be used on Android mobile phones. These and hundreds of other fonts can be found at Google Fonts.

A tutorial about embedding fonts.