Setting your font size

Browsers have a great built-in usability feature: they allow users to set their own font size according to each individual’s needs and preferences. Unfortunately, lots of websites make this feature useless by setting the font in absolute values.

When setting absolute values for font sizes across your website you ensure that everyone will see the website at that font size. While this might make sense for designers coming from the print world, we must keep in mind the important aspect here: websites are not printed materials. The web is an entirely different medium and the power to adjust to the needs of the user is one of its strong points. For a lot of different reasons, users will want to increase or decrease the font size on their screens at some point or another so why deny them this right?

The trick is to set all font sizes relatively. Relatively to what, you might ask? Every browser on every operating system has a default value for font size. Since this size isn’t regulated anywhere, browser manufacturers have taken matters into their own hands and while these defaults can be somewhat similar, the differences between them can make a website’s developer life a living hell.

A lot of testing has produced a magic number for everyone to use: 62.5%. Remember it! Setting a font size to 62.5% on the whole page equals to setting it to 10px and what’s important, this works on practically every platform available.

So the first step is to forget about your pixels, points, picas or whatever font size measure unit you’re using. A smart fellow with a weird looking hairdo said it some time ago–everything is relative–and it’s time to apply that to your web coding. After setting the font size on your page’s body element to 62.5%, any other change in font size must be relative too, so use either percentages or ems. These two ways of specifying font sizes are very similar, thus 110% equals 1.1em, 200% equals 2em and so on. You basically change the “%” for “em” and divide by 100. Starting with a value that’s the same in rendering size as ‘10px’, 1.1em or 110% would be the equivalent of a ‘11px’ font size.

You can even take this one step further and specify your widths and heights in relative units thus creating “liquid” layouts, but that’s a whole different subject.

Allowing your users to change the font size might seem like a small issue but, after all, it’s just a sum of small issues like this one that can turn a bad internet experience into a good one.