Web Typography

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.

The Basics:

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

Shadow Play

  • 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s