The Font Report

A long, long time ago, I posted a lengthy response to an email on webdesign-l summarizing the state of CSS type sizing on the web, and the obstacles facing authors that wish to make their text accessible to a wide variety of audiences. A couple people asked me afterwards if I could post it for posterity, and I said, "sure." Then I forgot. More than 2 months later, here it is:

As pointed out several times on this list, and articles on various blogs and resource sites, there is no "perfect" unit for the web. This is by no means a thorough description of the problems you'll run into, or a recommendation of which ones to use, but here are some of the things I've learned in my time spent with CSS font styling...

Pixels are great for absolute sizes on the "screen" medium, but are a poor choice with respect to accessibility because of IE/win's inability to scale them.

Ems are great in theory, but fail in implementation as IE/win tends to handle anything less than 1em with an "undefined behavior". This may not be an issue if you don't have much small text. However, if you've got to set a base size for all the fonts in your document (10px, for example), you'll run into the pixel problem above. The alterative is percentages, which have the added benefit of increased stylesheet readability ("1.4em" vs. "140%"). However, this doesn't solve the issue of using relative units for margins, padding, etc. (percentages for these properties refer not to the inherited values, but to parent dimensions).

The other alternative is the use of font-size keywords (small, medium, large, etc.), which are limited by design, but more generic and scalable (and they map directly to most browsers' menu items for controlling font-size on a per-window basis). Like em's and percentages, however, they receive different treatment in most UA's. Different versions of IE for Windows, for instance, either come with varying default font size preferences, or scale slightly differently based on these keywords (confirmed by comparing fresh installations of IE5.5 and IE6, at least). Another big problem is that most users never change their preferences, so the assumed value "medium" renders too large on their systems. So, pixels it is?

IE/win seems to be the stumbling block here, but some have argued that px are an absolute unit, making the browser's behavior correct in that absolute units should not be scalable. The sheer necessity to design pages that render well in the popular browser leaves us with a difficult choice:

  • design a liquid layout that can handle a wide variety of font sizes, with a "base" font size of 1em/100% (the user's default, or preference)
  • tailor your font sizes to the preferences of users by using the keywords, and accept the fact that most users will be served up huge text that they can scale down
  • design a layout with a particular font size in mind, but limit the ability of IE/win users to scale the text
  • provide users with some method of changing the text size/face via links or buttons

I haven't figured out which one is best yet. So far, using a combination of px and em's has worked for most sites I've done: It seems that most Windows users don't even know how to change the font size anyway, and most of them are used the poorly-styled text on large news sites, etc. But with all this hubbub about accessibility, I'm finding it harder and harder to purposefully lock people into an absolute font size. I've given the keywords (combined with percentages) a shot on this site purely as an experiment, which has so far proven pretty successful.

The stylesheet-switching stuff is definitely a hack, and most designs that I've worked with lately don't provide much room for an interface element that would provide that kind of functionality without detracting from the overall look of the site. For single-page newsletters and such, it's most certainly overkill.

Ultimately, the problem seems to be an implementation issue (as is usually the case with anything standards compliance-related). It doesn't seem as though the IE team would want to purposefully cripple the ability to scale text, considering their tendency to violate standards in the name of usability. Yet most people claim this behavior correctly follows the standard, while other UA's like IE/mac, Mozilla, and Opera (with a unique scaling solution of its own) allow users to scale text sized with any unit. Regardless, we're obligated as web designers to cater to the majority, so we'll likely be faced with this issue for a while (IE6 is still a relatively new browser, so we've got a long time until the next revision gains enough share to justify dumping support for its predecessors).

Until then, be smart about your font size choices, and remember that an increasing number of elderly and vision-impaired users are coming to the web in search of information. Recently, I've even found myself squinting at the default text sizes in many popular sites, having to position my iBook so far in on my desk at work. And while browsers such as Mozilla and Chimera allow me to easily scale all the text up (although I wish I could be more precise about it), if I were on a PC, I'd be screwed. That's not a situation anyone should with upon their audience. I needn't remind most of you of the client that continuously states, "the text is too small!", or insists that the majority of body text be bold for the sake of readability...

Everybody's doing it: XML (NetNewsWire recommended).

100% Valid or your money back.

Thanks, Movable Type!