Typography for the web is very similar to typography for print in that use of a grid structure, appropriate spacing for readability, and typeface selection are all relevant and important. There are key differences, such as the ability to kern, some limitations on font selection, and standard sizes and spacing.
Anatomy of Type by Ian Yates
In his tutorial video, Yates explains some basics of typography and shows how they relate to web typography. His general guidelines are as follows:
- Good rule of thumb for line height is 1 ½ times size of text (about 150%)
- Good rule of thumb for line width is 2 to 3 alphabets long, or 52-78 characters (target 66)
He explains that kerning isn’t easy to deal with on the web. CSS3 will allow you to turn ligatures on or off to help with kerning issues, which if used, is usually most practical for a heading.
A Closer Look:
Technical Web Typography: Guidelines and Techniques by Harry Roberts
Using research and proven methods, Roberts’ lengthy and informative article describes how to achieve clean and aligned typography through the rigid use of the 960 grid. His step-by-step demonstration gives a clear picture of how to adjust each type element to align both vertically down the page as well as aligning to a baseline grid by manipulating line height, margin, padding, and indent. I didn’t realize this type of precision was possible on the web, but I can see how it would make a visual impact. With his technical approach, you can calculate the appropriate line height based on a desired number (the “magic number”) and the size of the type.
Some of his key tips for web typography:
- Ideal size for type on the web is 16 pixels
- For a longer line width, use slightly greater leading
- For a shorter line width, use slightly smaller leading
- Left-align, ragged right is usually best
On the Horizon:
10 Web Typography Trends to Watch in 2012 by Jason Cranford Teague
Teague highlights some web typography trends that he views as gaining popularity, such as:
- Use of larger fonts for body copy
- Keeping contrast in mind by considering audience
- More negative space for balance
- Styling fonts with shadows or letterpress effects
- Adjusting the weight of type for emphasis
- Slab serif and handwriting typefaces
- @font-face CSS3 rule allows for more diverse font selection