When designing your website, font sizes are an often overlooked area. Your website’s text needs to be accessible & scalable, as there are many people who find it harder to see than others and may increase the default browser font size.

There are many different techniques to setting your design’s font size. Here we’re going to explain advantages and disadvantages of each technique. No technique is guaranteed to work for every user, and it is up to you as a designer to chose which technique you use.

1) Pixels

The technique of setting font size using pixels came after the mess that was the “x-small” and size=“4” techniques. Pixel font sizes are the only way to ensure your font sizing will retain in browsers regardless to individual user settings, as it will override the default font size.

We like to work with a body text of 12 pixels.

body {font-size: 12px;}
p {font-size: 12px;}
h1 {font-size: 20px;}

• Font size will be that of your liking.
• We are setting the body font size in pixels explicitly, changing the users default text size initially.
• Text set in pixels is not re-sizable with Internet Explorer for Windows, causing accessibility issues. Some people find it hard to see, and need the ability to enlarge text.

2) Relative font sizing

A more accessible & usable technique we have on offer is relative font sizing. Relative font sizing works, as it suggests, relatively to the browsers default text size (typically 16pt). This technique allows you to set the font sizes as you wish them to appear, but as it works relative to the browsers default size it is also accessible to users who want to increase font sizes.

Modern browsers default font size is 16pt, so we use this to scale our text accordingly.

Body Text: 16pt x 75.% = 12pt
Headings: 16pt x 125% = 20pt

body {font-size: 1em;}
p, li {font-size: 0.75em;}
h1 {font-size: 1.25em;}

• Allows for font scaling in browsers.
• Because we are scaling body text to less than 100% (0.75em), users who changed the default font size will find our body text smaller than their usual adjusted size.

3) Pixel font size reset followed by relative font sizing

The third technique combines pixel & relative font sizing to allow text to scale in Internet Explorer, combating one of the first techniques disadvantages. Part of this method is taken from Paul O’B’s technique over at the SitePoint forums.

To accomplish this method we first set our body font size to 10 pixels, and then scale up the elements relatively as before, giving us a body text size of 12 pixels and a heading of 20 pixels.

body {font-size: 10px}
p, li {font-size: 1.2em}
h1 {font-size: 2em;}

We then include additional CSS only for Internet Explorer browsers, which will set the body font-size to x-small, the equivalent of 10px, allowing the browser to scale text. You may notice strange characters in this, to learn more read A List Apart’s article Power To The People: Relative Font Sizes

<!–[if IE ]>
<style type=”text/css”>
body {font-size:xx-small;f\ont-size:x-small}/*ie5 and 5.5. that are one size out*/
</style>
<![endif]–>

Now Internet Explorer will read the body font size as x-small instead of our explicit 10 pixels, and thus allow the text to scale. We just had to trick it first ;)

• Allows for font scaling in browsers.
• Again, we are setting the body font size in pixels explicitly, so although scaling can happen, we will still be changing the users default text size initially.

4) Relative font size reset followed by relative font sizing

Here we are assuming that the user has their browser at it’s default font size of 16pt. By resetting the body font size to 62.5%, we change this default font size to 10pt, like in the other techniques. We can then use this to build upon, just like in the previous example.

As font sizes will all be relative to the body font size, we must be careful with child elements, as they can inherit font sizes and be larger than wanted (1.2em multiplied by 1.2em).

Although assuming the browser font size can be seen as wrong, our text is all relatively sized and so the user’s font size will not be ignored, however scaled to 62.5% of what it would normally be.

body {font-size: 62.5%;}
body, p, li {font-size: 1.2em;}
h1 {font-size: 2em;}

• Font works relatively, so users can adjust font size if required.
• CSS font sizes are clearer & easier to understand than other methods.
• Body font size is less than 100% (62.5%), so any user set font size will be scaled down like in the 2nd example.

Conclusion

In general, we use the fourth technique of relative sizing. There is no complete solution to achieving font sizes across all situations, but relative tries to fit them the best. Ideally, designs should be created with relative sizing also, so they could expand and contract alongside the content. However, graphical elements do not always work in this environment.

Ultimately, no technique is 100% user-proof, as it is up to the end user as to whether they override your CSS or change the default font size. It is best to use the most accessible option to cover the greatest amount of users.