Keywords and Resizable Fonts

If you want to make sure that your site is accessible to people who are visually impaired - particularly to the elderly - you need to move away from absolute sized fonts. Ems or percentages are the most commonly used relative sized fonts. Switching to ems or percentage sizes have their own problems. If your page designs use nested divs or other CSS inheritance, your em and percentage definitions are also subject to inheritance.

This means that a font defined as .85em nested in a div with a font defined as .85em will display as .72em. This can make your stylesheets complex and buggy. A large stylesheet is a performance hit.

There are absolute font sizes that maintains their size despite inheritance and will resize properly in IE. They are the keyword font sizes: xx-large, x-large, large, medium, small, x-small and xx-small. A List Apart ran an article by Todd Fahrner that gives details and sample code.

There are no easy answers, however. The Keywords approach covers 7 sizes, but most of them are too large to use. Practically, there are 3 sizes to use commonly, that work out to be roughly 10, 12 and 14 pixels in size. My current client wants 11px Verdana -- Verdana is optimized for 11 pixels, says she, and it is the ideal size. So we are currently doing a mixture of techniques -- keywords for the even sized fonts and percentages for the the 11 pixel size.

For more information: http://www.alistapart.com/articles/sizematters/