Developer

The trouble with using ems and percents for font sizing

There are several ways to specify font sizes on a Web page--keywords such as small or large; fixed measurements such as pixels or points; or the relative measurements of em or percent. We'll show you some of the pitfalls with using the em or percent for sizing fonts.

This article is from Builder.com's Design and Usability Tactics e-newsletter. Sign up instantly to begin receiving the Design and Usability e-newsletter in your inbox.

There are several ways to specify font sizes on a Web page. You can use keywords such as small or large; you can use fixed measurements such as pixels or points; or you can use the relative measurements of em or percent. However, there are certain advantages and disadvantages for each font size specification method. Keywords are simple and easy to use, but they lack flexibility and precision. Fixed measurements can be precise, but they can create accessibility problems for visitors who want to adjust text sizes to suit their own needs and preferences. Relative measurements address the accessibility problem, but they have their own problems.

The way it's supposed to work

Relative measurements work by specifying the font size as a relative enlargement or reduction of some standard reference size. Percent sizes express the font size value as a percent of the height of the character box (the top of the capital letters to the bottom of the descenders) for the reference font.

Ems are based on the typesetting convention that defines 1em as the height of the capital letters in the reference font. For consistency with other measurements, CSS redefines an em as the height of the character box. Sizes in ems are decimal fractions or multiples of the size of the reference font. Therefore, 2em and 200 percent are the same, and so are .75em and 75 percent.

In theory, using relative measurements to specify font size should have distinct advantages for both the Web builder and visitor. By specifying font size as a relative change from a standard reference size, you focus on the size relationships rather than on a specific numerical size for each text style.

If you change the size of the reference font, all the fonts that are sized with a relative measurement change proportionately to maintain the same size relationship with the reference font. This means that the Web builder can tweak all the font sizes on a page by making a single change to the font size in the body tag. Similarly, it allows visitors to adjust their browser's font size preference settings to resize the text in their browser windows without losing any meaning that relative font sizes might convey.

Trouble in paradise

Unfortunately, what sounds great in theory doesn't always work so well in practice. One major problem with using relative measurements for sizing fonts is the lack of a consistent standard for the base font size on which the relative measurements are based. The traditional default font size for Windows-based browsers is 16 pixels and assumes a screen resolution of 96 pixels per inch. On Macs, the traditional default is 12 pixels at a screen resolution of 72 pixels per inch.

Although the Windows default font size is the official standard recommendation, many diehard Mac users (including a lot of Web builders) continue to use the traditional Mac default settings. These settings tend to skew Mac users' perceptions of "normal" text sizes. This can be a problem no matter which method a Web builder uses for specifying font sizes, but it's particularly troublesome with relative sizes because any difference in the base font size is exaggerated as you move further from the normal size.

Another major problem for relative font sizes is that all the size calculations aren't necessarily based on the browser's default text size or even the font size as specified in the body tag. Instead, the relative size calculations are based on the font size of the parent element. That complicates things considerably because elements can, and often are, nested several levels deep. For example, you might have a paragraph of text within a table cell, within a table, within a named div, within another div. If there are font size rules using relative measurements at each level, the relative measurements can compound each other, leading to exaggerated font sizes that are dramatically larger or smaller than what you intend.

The compounding effect that results if you apply relative sizes to nested elements can make using relative font sizes confusing and difficult. To make matters worse, there are disturbing inconsistencies in the way the various browsers identify the parent element for a given element and, therefore, it can be difficult to choose what font size to use as the basis for any relative size calculations. As usual, Netscape 4.x is the worst offender, but there are still enough inconsistencies among the current browsers to cause frequent problems with relative text sizing.

When good intentions fail

Relative font sizing is a great idea that fails to live up to its promises of user accessibility or design flexibility for the Web builder. In order to use relative font sizing successfully, you need to plan your page design and CSS styles very carefully to avoid the potential problems of nesting elements. You can do it, but it's not easy and it imposes significant restrictions on your design options. Otherwise, you need to rely on keywords or absolute measurements for font sizing.

Michael Meadhra has been working in the field since the earliest days of the Web. His book credits span some three dozen titles.

Editor's Picks