Cross-Browser Scaleable Font Sizing

June 6, 2008

Pixels are great, consistent and easy to understand. Explorer can’t scale them though. This means if older people or those with large displays want to increase the font size they’re stuck. This is somewhat less relevant for Explorer 7 with its zoom feature. Maybe when IE6 has dwindled away I’ll switch.

In the meantime…

I love to make layouts that scale with the font size. To do this I set a base font size as a percentage and then all other measurements are expressed in ems (with the exception of anything that is a fixed size like images). I read about this approach in this article that demonstrates the percentages resulting in consistent sizing across the major browsers and platforms. These percentages are applied to the body element in CSS:
body {
font-size: 69%; /* 11px */
}

The percentages and their equivalent pixel sizes are:

• 60% = 10px
• 69% = 11px
• 76% = 12px
• 83% = 13px
• 89% = 14px

Lately most of the sites I work on use a base font size of 11px. This can make for some strange looking em measurements. Let’s say I need paragraphs to have a 6px bottom margin. The CSS would look like this:
p {
margin-bottom: 0.5454em;
}

See what I mean? Going to four digits ensures that you get the same measurement cross browser (due to differences in rounding). Actually there’s a simple formula you can use for smaller measurements without pulling out the calculator. Take the number of pixels, subtract one, then place the number next to it that would make nine if added that number. If that didn’t make life easier (hehe) here’s what some common values look like:

• 1px = 0.0909em
• 2px = 0.1818em
• 3px = 0.2727em
• 4px = 0.3636em
• 5px = 0.4545em
• 6px = 0.5454em
• 7px = 0.6363em
• 8px = 0.7272em
• 9px = 0.8181em
• 10px = 0.9090em
• 11px = 1em
• 12px = 1.0909em
• 13px = 1.1818em
• 14px = 1.2727em
• 15px = 1.3636em
• 16px = 1.4545em
• 17px = 1.5454em
• 18px = 1.6363em
• 19px = 1.7272em
• 20px = 1.8181em
• 21px = 1.9090em
• 22px = 2em
• 23px = 2.0909em

It’s geeky but easier to remember than the YUI percentages approach because there is a detectable pattern.

Filed under: Uncategorized | Comments (1)