Articles & Tutorials

The articles and tutorials here are provided free of charge, and are fueled by caffeine.

Using relative font sizes

Relative font sizes are something that I’ve avoided for far too long due to bad experiences in the past, and being a picky designer who likes things pixel perfect. The new subcide design has seen me change to using em’s for all my text sizing, so that I can be sure that I’m setting a good example for everyone reading these articles.

Relative font sizes are pretty easy, so this tutorial will be short and sweet.

62.5 Percent

The best way I have found to get relative font sizes to behaive correctly is by using a percentage font-size on the body, and em’s for everything else.

So first things first, set the font-size on your body to be 62.5% right at the top of your CSS.


body { font-size:  62.5%; }

This magic number makes the units that you specify in em’s, corrospond better to the same measurements in pixels. I think that was a confusing sentence. Here’s an example:

  • 1.0em now equals 10px in size
  • 1.2em now equals 12px in size
  • 1.8em now equals (you get the idea…)

Simple right? Not quite. There’s one other important thing to remember.

It’s All Relative

The main thing that you are going to have to remember is that when you specify a font size using a “relative” unit like em, that means that you will increase or decrease the size of that font “relative” to its parent container.

Say you have a #content div, and you want the text inside it to be the equivilent of 12px font size. You would do exactly as you imagine you’d do:

#content { font-size:  1.2em; }

Now, if you had an <h2> tag inside that #content div that you wanted to be the equivilent of 18px, setting it to be 1.8em would make it much bigger than you would expect. Instead of being (roughly) 1.8x larger than your original 62.5% size, it is now 1.8x larger than your #content font size, which is already 1.2x larger than your body size.

So for example, anything inside the #content div that you specify as font-size: 1.0em; would stay exactly the same size. Anything you specify as 2.0em would be (roughly) twice the size of your #content font. If you can be bothered to work out what your font sizes need to be using maths, be my guest, but I suck at maths so I just do it by eye.

Benefits

Now users in most browsers, including IE, will be able to resize the text on your website, and it will all stay in context, with headings being relatively larger than body text, copyright text being smaller etc… Accessability hounds will annoy you less, and the opposite sex will find you more attractive.

And remember, I’m new to this whole thing myself, so drop me an email if you think I’m steering people in the wrong direction or anything.

  1. No comments yet. Feel free to add something constructive to the conversation.
Commenting is not available in this weblog entry.