1st November 2008

Accessible, pixel perfect font sizing using both percentages and em's (cross browser, cross platform)

Whenever building a website you need to set font sizes using a dynamic metric - typically this is achieved using percentages. The reason for this is that the user can adjust the font-size within their browser and the website can accomodate their wishes. This is crucial for meeting AA accessibility and therefore crucial for all web-build projects.

Recently I was leading a large build project and found myself mercy to a self-created madness; percentage font sizes are difficult to get pixel perfect cross-browser unless you put serious thought into the CSS structure before commencing the build.

The Problem with Percentages

There isn't a problem with percentage font sizes as such, but when you apply a font size to the body / overall container for the site, you need to ensure that you're consistent with the nested font sizes across the site. This of course becomes increasingly problematic with numerous devs working on a single project - using percentages on their own can become a headache if you're not clearly communicating what sizes should be applied to each container/component. Here's an example of the problem:

body { font-size:75%; } #container-1 { font-size:90%; } #container-1 p { font-size:95%; } #container-2 { font-size:100%; } #container-2 p { /*oh, what percentage do I need here to make it the same as container-1*/ }

While it is possible to get the percentages correct mathematically (so that the sizes are *technically* the same), browsers won't necessarily honour your sizing. Different browsers render fonts differently, use different font-scales and generally mess with your head. That's why the percentage-em approach should always be used.

What is the Percentage-Em approach?

Obviously you want to have a percentage set somewhere to accomodate for any text-size set by the user, but (as explained above) this can become a logistic nightmare in larger builds. Therefore we can use the "em" metric to specify most of the font-sizes as such:

1. Set font-size on the body to be 62.5%
2. All sizes here-after should be set using "em", because now 1em = 10px
3. This allows you to be pixel-perfect at default font-sizes, but scale up should the user require it
4. Just divide the px figure you need by 10 and you've got your em value (15px = 1.5em, 29px = 2.9em etc)

View the online demo to see this in operation

Code

body { font-family:Arial, Helvetica, sans-serif; font-size:62.5%; padding:20px; } span.em1 { font-size:1em; } span.px1 { font-size:10px; }

In the above code sample, the span with class of em1 will render at the exact same height as the absolutely specified px1 span. This allows you to meet accessiblity standards while remaining pixel perfect - which is ideal for keeping both the designers and the client happy. This works perfectly cross browser, cross platform and therefore there's no reason not to be using it for everything you do. View the online demo if you don't believe me.

Tagged with xhtml, css, accessibility