CSS Font Size Strategies Explored and Explained

Maintaining all the different font-sizes for your web site driving you bonkers? This article looks at how they behave in the laboratory and makes recommendations about how to harness them back in the wild.

The Experiment

I designed this experiment to understand and document the behaviors of the various "font-size" settings available in CSS. I created a test page, and then viewed it on various user agents, recording the behavior. I used the View > Text Size and captured the behavior.

View the Experiment Page

I limited my experiment to the 4 most popular font-sizing techniques. Yes, I know there are others, but these are the most common and recommended. I didn't explore the Javascript-enhanced techniques, which help eliminate some of these differences, simply because this wouldn't be usable by me. Nor did I explore the "browser-hack" techniques, as my goal here is to find a low-maintenance and predictable approach.

Results By Browser

If you get different results, please let me know and I'll post corrections.

Scaling: Do fonts scale if the user picks a new setting from the View > Text Size menu?
words px % em
IE 6 (XP, W2k) Yes No Yes Yes
Firefox (1.0, 1.5; Mac, XP, W2k) Yes
Safari Yes

Minimum: Does the browser enforce a minimum "readable" font size?
(or just draw microscopic text?)
words px % em
IE 6 (XP, W2k) No limit n/a No limit
Firefox (1.0, 1.5; Mac, XP, W2k) No limit - users can shrink to extremes
Safari Yes No limit Yes

Nesting: If font-size rules get applied recursively, are they applied cumulatively?
words px % em
IE 6 (XP, W2k) absolute combined combined *
Firefox (1.0, 1.5; Mac, XP, W2k) absolute combined combined *
Safari absolute combined
Notes

* font-size: 1em at regular View > Text Size is the same as font-size: 100%. In other words, 100% appears to be the equivalent of 1em, for what it's worth.

Small, Medium, Large keywords

What you might think

The words like "small" and "medium" don't specify a specific size, but are basically good, reasonable choices if you don't care about pixel accuracy.

The reality

If you can let go to pixel-by-pixel control of your web site, or pieces of it, this is an excellent technique. Some browser (note Firefox) don't enforce a minimum size to these values, but the defaults are fine. Netscape 4 reportedly implements these poorly, but that's generally not important.

Pixels

What you might think

These represent pixels on the screen.

The reality

For box measurements and element placement, pixels are pixels. (Actually, I think there are all sorts of settings in Windows to change this, but let's not get into that.) As you can see on many sites, pixel font sizes vary quite a bit between user agents (see References). In addition, your site will react differently to user's changing their font size.

Percent

What you might think

These adjust relative to the "default" size of the text.

The reality

The cascade of CSS dictates what the percent figure means, and it appears that user agents tend to follow this. This difficulty with this is that the size is relative to another element. The size of an element's font depends on its context. If you have deep nesting of elements, it is quite common to run into text styled identically ending up different sizes because of the nesting. This then results in more styles to undo the extra shrinkage.

There are all sorts of posts around about "rounding errors" in different browsers. I haven't dug into the details of these to understand them. There is one particularly annoying bug where fonts go "microscopic" in IE. Watch for it. It's a bad one.

When using this technique, you must be very careful of the nesting of the elements. If you set a font size for an div, it will affect all elements inside it by multiplying.

Determining what a workable strategy here is difficult, because of the dependencies. I can imagine with a rather fixed and consistent hierarchy of elements this technique could be used successfully. Or some strategy to only specify font-sizes for "leaf" elements.

Ems

What you might think

Represent a measurement relative to a default font in the browser.

The reality

This seems to be detached from the typographical definition of an em (in my opinion). What I found was that this seems to be implemented identically to the percent measurement, with 1em equivalent to 100%. It comes with all those behaviors and problems.

Like percent, when using this technique, you must be very careful of the nesting of the elements. If you set a font size for an div, it will affect all elements inside it by multiplying.

Hybrid Techniques

What you might think

If I think really hard, I'll figure out a combination of techniques that has none of the nasty behaviors.

The reality

Around the web you'll find various recommendations to neutralize these behaviors. A popular and highly recommended one I tried (prompting this article) involved setting an enclosing font-size on the whole page, like 76%, and then using ems throughout (magical ems). (This seems to me it's the same as wrapping the page in .76em or using percentages universally, but I didn't verify this.) I found that this technique ultimately confusing, and didn't solve the problems for me. It's just our site was changing too much, elements were nested deeply, and we needed to support a wide array of browsers.

Testing

What you might think

Building the page with Firefox and previewing it with IE is a good approach.

The reality

Yes, this is great. But you must do more. The other important factors are:

  • the browser version: IE 6 differs quite a bit form IE 5 and 5.5 in how it renders fonts. Firefox 1.5 differs from earlier versions.
  • operating system: not only Mac and Windows, but make sure you test XP and Windows 2000 separately (I am told).
  • the "Text Size" option available in the View menu for most browsers. Some people will browse the web in "small" so they can maximize the usage of their pixels, while others must browse at "large" size for visual comfort. No matter what your site is, you probably should support these people, since they make up a large segment. You may be able to ignore the extremes.

Recommendations

Analysis

First, analyze what your requirements are:

  • How critical is it that fonts are the same size across browsers? I made the mistake of assuming that looking the same across browsers was important, and we've all seen lots of articles on the web speaking to this. For most sites, however, as long as it looks good across browsers, it works. Very few people switch between computers and browsers and expect consistency. Do your viewers?
  • How precise control do you need over fonts? Many designers will start out by fitting elements together in photoshop so they are precisely positioned. This is costly to replicate on the web in HTML. You should ask how critical it is to fill every pixel with content. People are usually viewing quickly and culling small pieces of information. Trying to pack lots of stuff on a page ignores this reality of user behavior. Consider a simple, spacious layout and limit your content to the essential.

Once you have a clear understanding of your needs, you can pick the simplest technique to satisfy them.

Flexible Design If you use a design that is fairly flexible, the small, medium, large, xx-large keywords are ideal. They won't be exactly the same across browsers, but large will be large, small will be large, and xx-small will be nearly unreadable. They scale similarly across browsers and aren't affected by their surrounding elements. The downside is that you only have a certain set of sizes at your disposal (without reverting to some other technique). I have adopted this for all my work.

Precise Layout Here's a general approach when the flexible design is not appropriate.

  • Make sure you have lots of money.
  • If you have a fairly fixed element hierarchy, ems or percents may work well for you. Spend some time up-front coming up with a strategy and writing down the rules.
  • If you have a fairly flexible element hierarchy, you may need to design more of the styles up-front.
  • After you've developed most of the pages for Firefox, assess where you are in IE. If you are pretty close, judiciously use browser hacks.
  • If your site looks awful in IE, consider developing separate style sheets for each browsers.

If Javascript is required for your users, you could investigate some of those solutions (I haven't).

I do not recommend px measurements, since they behave so differently between the two most popular user agents.

References

To compare sizes between browsers, this site is much better: the noodle incident . This also has pointers to the various Javascript techniques.