Using relative font sizes

Translate Request has too much data
Parameter name: request
Translate Request has too much data
Parameter name: request
skip to navigation Technical level: Advanced || Date: 27th January 2003 || Author: Mark Pilgrim

This article is copyright 2002 by Mark Pilgrim, and is republished here under the terms of the GNU Free Documentation License. It is part of a larger free book, which you can read at http://diveintoaccessibility.org/.

Web sites, with few exceptions, center around words. News, opinions, thoughts, ideas, stories, original writing, e-commerce: all words. Visual design and images are important, to be sure, but if people can’t read your words, what’s the point?

In the fall of 2000, Jeffrey Zeldman famously said that relative font sizing was impossible (“pixels, baby… or nothing”) because of an overwhelming variety of browser bugs, starting with Netscape 4 and ending in the most modern browsers. Since then, Netscape 4 still hasn’t gotten any better, and it still hasn’t gone away, but at least we’ve all learned a thing or two about taming the browsers and making relative font sizing a reality. (Zeldman too; his recently reincarnated Web Standards Project uses the technique described below.)

Use relative font sizes in browsers that can handle them, and absolute font sizes in Netscape 4, which does not reliably support relative font sizes. You can do this even if you don’t use multiple stylesheets. In a minute, I’ll give copy-and-paste solutions for the default Movable Type template and all default Radio themes. And a lengthy explanation of the technique itself to help you implement it in other templates.

Lillian benefits. Lillian has difficulty seeing web pages clearly, due to nothing more than old age. Like 80% of the Internet population, she uses Internet Explorer for Windows, which does not support resizing text unless the web designer exclusively specifies relative font sizes. Lillian has changed the default text size in her browser (under the “View” menu, “Text Size”), but it doesn’t do any good on sites that use absolute font sizes. This includes virtually every weblog template in existence. For example, this is what the default Movable Type template looks like to Lillian:

Text that is not readable because it is small and fuzzy as seen by someone with bad vision.

If the template used relative font sizes, it would look exactly the same to the majority of readers who don’t need (or care) to change their text size. But this is what it would look like to Lillian:

Text that is fuzzy but readable as seen by someone with bad vision.

Again: if people can’t read your words, what’s the point?

In your Home Page Template, look in your