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
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
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.