Relative font sizing made easy

If you’ve not already done so, it’s time to ditch pixels as a unit for sizing fonts. Sizing fonts for the web using ems and relative dimensions is easy and accurate. No really, it is.


But before we get stuck into it, you may be wondering “what’s so bad about pixel sizing?”

When it comes to modern web browsers like Firefox – nothing. Firefox will happily bump up the size of your 10px text when a visitor to your site increases their browser’s default text size. But Internet Explorer is another story – even IE7 will not allow resizing of text that has been sized using pixel measurements. And sooner or later one of your visitors will complain to you about it. With the rollout of high resolution LCD monitors, it is increasingly important to give your visitors the ability to increase the size of text size on a web page to suit their viewing preferences.

There is a simple method that gives you the best of both worlds – pixel level precision, coupled with user control of font size.

To start with you need to add the following to your CSS stylesheet:

html {
font-size: 100%;
}

This rule is a sort of “be nice to IE” rule that stops older versions of Internet Explorer from going wacko on us.

Next, add the following to your CSS stylesheet:

body {
font-size: 75%;
}

What we’ve done is specify that the font size for all elements on our page should be 75%, but “75% of what?”, I hear you ask. The default font size for all modern web browsers is 16px, when text is set to ‘medium’ size. That’s a bit chunky for my tastes, and I personally find 12px a little more pleasant to read. To calculate 12px as a percentage of 16px we can use the equation:

(16/12)*100 = 75%

Now whenever you specify your font-size in ems, 1em will be equivalent to 12px. Of course you can make 1em equivalent to whatever pixel equivalent you like:

font-size: 100%; /* equivalent to 16px */
font-size: 87.5%; /* equivalent to 14px */
font-size: 75%; /* equivalent to 12px */
font-size: 69%; /* equivalent to 11px */
font-size: 62.5%; /* equivalent to 10px */

Assuming that we’ve set font size for our document to 76% (12px), it’s now a simple task to use ems to calculate desired text sizes, using the calculation:

target px size / 12px = target ems

  • 0.8em = 10px;
  • 0.92em = 11px;
  • 1em = 12px;
  • 1.2em = 14px;
  • 1.5em = 18px;
  • 2em = 24px;

For instance, to specify all text in a #footer element to be 10px, just add the following rule to your CSS stylesheet:

#footer {
font-size: 0.8em;
}

With this technique under your belt it’s fairly painless to let go of pixel measurements and embrace ems as a unit of type measurement. The only thing to keep in mind is that you always need to test how your layout is going to look if the user resizes the text. While most people leave their browsers font size at it’s default setting, users with poor eyesight may opt for a larger setting.

External resources

Clagnut has a detailed article about this method of font sizing.