CSS Font Size Strategies Explored and Explained
Out of Date
The following content is likely out-of-date. It concerns a legacy technology and/or is no longer maintained-- likely a decade old. Please see you favorite search engine for the latest information.
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.
This page analyzes the experiment found here. It was originally written circa 2009. It was updated April 2013.
Background 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 five 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. Nor did I explore the "browser-hack" techniques, as my goal here is to find a low-maintenance and predictable approach.
Questions
The questions that are most interesting:
- 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 Firefox (1.0, 1.5; Mac, XP, W2k) absolute combined Safari absolute combined
If you get different results, please let me know and I'll post corrections.
Findings When Using 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
These are what they seem: good general size specifications. If you can give up pixel-level control of your web site, (or parts 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 from all my tests.
Findings When Using Pixels
What you might think
These represent pixels on the screen.
The reality
Pixels are not actually pixels, but they are consistent and predictable. There are all sorts of complications if you really need to know exactly what a pixel is (based on screen resolution and browser settings), but if you can live with the lie, pixels are predictable.
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.
Findings When Using 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.
I also learned that 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.
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.
Findings When Using 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.
Update as of 2012: rems is a new unit designed to remove the nesting behavior.
Findings When Using Hybrid Techniques
What you might think
You find a recommendation to use a combination of pixels and ems and %s on your page. It seems reasonable.
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.
Recommendations 1: Analyze Your Site
There are really two important questions to ask before selecting a strategy:
How critical is it that fonts are consistent size across browsers?
Don't assume that looking identical across all browser is critical. Think and ask. There are many resources addressing this, but it is expensive to achieve. For most sites, looking good across browsers is a sufficient. 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.
How complex and modular is the site design?
If you have a site with nested modules that can appear in different contexts, that's a nice design to implement. But if you using a font-sizing strategy that uses nesting, you may end up fighting with your stylesheets.
Recommendations 2: Select the Simplest Solution
Once you have a clear understanding of your needs, you can pick the simplest technique to satisfy them.
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.
- 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.
I do not recommend px measurements, since they behave so differently between the two
most popular user agents.
Testing Font-Sizing Strategies
What you might think
Building the page with
Firefox
(update: Chrome) 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.