During my venture into typography, I collected a hodgepodge of information and tips on using type on the web. In the hope of making sense of it all, I've tried to organize these jottings. Most are basics that I've included as helpful reminders, but I also found a few surprises.

1. Shorthand

Condense your code and cut down on bytes by writing font rules in shorthand. For example: {font: italic small-caps bold 14px/16px 'Palatino Linotype',Palatino,'Book Antigua',serif;} Notice that you can combine the font-style (italic), font-variant (small-caps), font-weight (bold), font-size (14px), line height (16px) and font-family properties into one rule, cutting out a great deal of superfluous code. Eliminating the space between font names further shortens the rule.

2. Specify Fonts

Specify fonts in your order of preference. For instance: {font: 1em/150% geneva,tahoma,verdana,"lucida sans",sans-serif;} The user's browser will go down the line until it finds one that's installed. Finish the font alternative list with either the generic "sans-serif" or "serif." In the event the user has none of the fonts you specify, your text will be rendered in the default serif or sans serif font (always hyphenate sans-serif in style rules). Note that font names do not have to be capitalized. Also note the punctuation used for font names of two or more words. Single- or double-quotation marks are used to delimit the font, and the comma (if any) follows the quotation. For English punctuation purists, this may rankle. We must stiff upper lip it.

3. Serif vs. Sans Serif

Although it's generally agreed that serif fonts are best for printed text, the issue is fraught with disagreement when it comes to the web. Some people insist that what's true for print is true for the screen--that those little feet on serif type aid reading (Morrison & Noyes; Lynch & Horton). Others argue that the reverse is true--that sans serif fonts are cleaner, sharper and easier to read online (Bernard; Wilson; Hume). The arguments are good from both camps. However, I tend to agree with a third camp (Scharff & Hill; Poole), which says neither is particularly more legible and that readability depends more on a number of other factors (see #4 below). You'll have to make up your own mind.

4. Space: Creating Readable Text

Which font face you choose is not the only determining factor in whether text will be legible or not. Just as important is the size of the text and the space around it. Most typographical "rules" come from the world of print, yet many apply equally well to the screen.

• Adequate margins make text more readable.
• A comfortable line height (leading, or the spacing between lines) aids reading. On the web a good line height is 1.5 times the font height (e.g., 1em/1.5em).
• Line lengths of 52 to 78 characters (including spaces) are optimal.
• Left-aligned text is the easiest to read.
• Black text on white is the most legible.
• Characters that touch are even harder to read on the web than in print. Add letter spacing in this case, but do so minimally, consistently and in relative units.

Finally, a lot has been written about the best size for text on the web. Frankly, if you use relative units and users can resize text themselves, this seems a moot point. However, the overall consensus seems to be around 10% smaller than the default text size, or approximately 14px. Stay tuned for a final posting on fonts about one of the biggest controversies facing web designers: how to size text.

Further Reading

Good resources on type for the web include Andy Hume's Usable Type and Richard Rutter's The Elements of Typographic Style Applied to the Web.