Distantly Yours: Web Design and Photos in Bloomington, IN, by Dan Hiester

Why font sizes shouldn't always be declared in EMs in web design

Web developers and designers have debated with each other for years about how to declare font sizes: Should they use the PX unit of measurement, or should they use EM? The truth is, it depends — and recent trends are bringing new rules with them.

Why use EM in the first place

There seems to be a lot of confusion over why we should use EM to specify our font sizes in the first place. Many incorrectly presume we did this to enable font size zooming in IE6. While this was true, it was not, in my opinion, the most important reason to use EMs.

Windows users are given a preference to increase the standard font size of their screen if they have a hard time reading text. If you specify a font size in a web page in terms of EMs, your font will be sized relative to this user’s setting. In other words, people with reduced vision will be able to read your site more clearly.

Many designers are unaware of this because they use Macs, and OS X, to my knowledge, has no similar feature.

I believe it is important that the web remain open and welcoming to all people, not just those who have keen eyesight, so I believe it is also important to specify font sizes for body type as EMs. “Body type” is an important qualification, however, and newer trends in design and technology only mean more exceptions to the rule.

When PX isn’t just okay, it’s just better

As stated above, “body type” is an important qualification. That’s the type your users will spend long amounts of time reading. The same rules to not apply to things like labels, display type, or other pieces of typography mostly there for decoration.

Another important exception to the rule is type whose size must be relative to a bitmap. The bitmap won’t scale when users increase their OS font size, so the font shouldn’t scale, either. This used to be extremely common, since we used to use bitmaps to create rounded corners for buttons, but this practice will fade as more designers drop support for non-CSS3-supporting browsers over the next year or two.

The newest exemption I’ve been thinking about is body type that already pushes the envelope. I’ve seen a handful of sites use 16px for body type, especially if they use CSS3 Media Queries to specialize the layout for various monitor sizes. If you’ve already got a font size that should be clearly legible to all users, you don’t want users with poor eyesight to make that font size even bigger, decreasing the amount of words displayed per line, and hampering readability.

If you’re building a “normal” website, it’s perfectly fine to set your body type in 13px, as long as you do so using EM for your unit of measurement. But if you’re designing something a little splashier, a font size closer to 16px is elegant, legible, and on large monitors, comfortable. That size used to be common for headers, but it’s funny how time and technology change things. I’d definitely increase the font size for this site, if I wasn’t busy with endeavours that don’t involve completely redesigning it.


HTML is not allowed, but Textile is. Lost? Check out some Textile Help.
Your email address can be used to place your personal Gravatar next to your comment.