The Font Controversy: Ems, Percentages, Pixels & Points

Error message

  • Deprecated function: The each() function is deprecated. This message will be suppressed on further calls in menu_set_active_trail() (line 2405 of /home1/markspap/public_html/kathy/includes/menu.inc).
  • Deprecated function: implode(): Passing glue string after array is deprecated. Swap the parameters in drupal_get_feeds() (line 394 of /home1/markspap/public_html/kathy/includes/common.inc).
November 18, 2006

To conclude these notes about fonts, I turn to the Great Size Debate. In summary, the controversy concerns what unit of measurement designers should use to size text. The topic is, of course, much more complex than that statement conveys. In fact, reams (or screens) have been written on the issue. The primary points are these... To conclude these notes about fonts, I turn to the Great Size Debate. In summary, the controversy concerns what unit of measurement designers should use to size text. The topic is, of course, much more complex than that statement conveys. In fact, reams (or screens) have been written on the issue. The primary points are these:

Points Suck

Sizing fonts in points is almost universally eschewed by designers. When fonts are set with an absolute size, users are unable to resize text to suit their preferences or needs. Despite giving designers greater control over their designs, few seriously support such a draconian method.

Pixels Aren't Much Better

And why not, you ask? Because fonts sized with pixels can't be resized in Internet Explorer 6 and below (see above). However, IE7 supports resizing. Good news for Zeldman and Snook. Good news, too, for anyone who wants to see the debate heat up.

Ems & Percentages Have Family Problems

Both ems and percentages are relative size units. They're relative to the user's preferred text size setting (the default is medium, or 16px, in most browsers). So, for instance, if the browser text size is set to the default, both 100% and 1em would equal 16px. The key here is that the user controls the font size by adjusting their browser text size. In addition, all browsers support resizing ems and percentages. This sounds great, until you start designing with ems or percentages and run into a sticky inheritance problem where fonts suddenly appear much smaller than you want them to. Because ems and percentages are also relative to their parent elements. For instance, if lists are ul {font-size: 90%;}, a nested list item (ul ul li) would be 81%. Despite the limitations, most designers seem to favor ems as the politically correct unit of measurement for fonts.

Resources

To learn about the different view points in greater detail, see Laura Carlson's UMD Web Design Reference on Typography, which lists most of the major articles and players. Jim Byrne's Accessible web text - sizing up the issues is a good overview of the debate.