A quick and dirty guide to font sizing for the web

Please note: This information could be out-of-date, innacurate, wrong or mis-understood

Why can't we just use pixels?

Fonts measured in pixels won't scale if you are using IE prior to version 9 using the browser's increase and decrease text ( only ) tool won't work. People naturally argue this is bad for accessibility. I'd argue that anyone who can't see the screen too well on a regular basis 'should' know about page zooming which has been part of browsers since IE 7. If not, what the hell are these people who can't see the screen too well doing using and old browser like IE 6/7/8. Some people still say, 'but what if the user just wants to zoom the text and not the images?' What? the minor drawback with the otherwise fantastic ability to page zoom, is having to scroll a little bit sideways to see the end of an article. This hardly ever happens as most main articles are 'flanked' by a sidebar of some sort which simply disappears off the side of the page. Anyway that miniscule disadvantage is far outweighed by the ease of pressing Ctrl + in any modern browser to zoom the page.

Anyway the idea that we should cater for text only zooming seems still to have traction so with that in mind we need a way to side-step this IE issue. We can do this by using a relative unit the em instead of pixels which will scale in older versions of IE.

Why Web Designers prefer 14 pixels to 16 pixels, and why they have a point

Many Web Designers prefer a smaller base font size of 14 pixels over the browser's default which is 16px. Although 16px has been settled on as the optimum base reading font size by most browser manufactures. Many Web Designers think this is too large, to create an aesthetically pleasing type hierarchy. Starting off smaller also allows a greater range of the typographic scale, allowing more contrast in font size. They have a point, a base of 14 px does look better.

So we need to tell our browser that 14px is our base font size and that 14px should represent the relative unit of 1em. We can then create our type hierarchy and scale up our headers.

There are two main techniques for achieving this.

In the first technique we divide 14 pixels ( base ) by 16 pixels ( target ) and apply the result, 0.875 to the body element so that 14px now represents 1em, the starting point of the scale.

body { font-size: 0.875em; }

We could just leave it there and let the browser scale up the headers according to the browser manufacturers internal scale. For example, in most browsers a heading level 1 is 2em. Unfortunately that would mean we would not know exactly what size in pixels our headers were, and we may not like their scale.

With that in mind we now need to create our own hierarchy in pixels and calculate the sizes in ems. Lets base our website on the classic typographic scale: 12, 14, 16, 18, 21, 24, 36, 48, 60, 72. So if we want our header level 1 to be 24px, we need to divide 24px by 14px this will give us 1.71428571em. Whoa! I know what your thinking, your thinking 8 decimal places! I have to work with numbers of 8 decimal places?

h1 { font-size: 1.71428571em; } /* 24px divided by 14px */
h2 { font-size: 1.5em; } /* 21px divided by 14px */
h3 { font-size: 1.28571429em; } /* 18px divided by 14px */
h4 { font-size: 1.14285714em; } /* 16px divided by 14px */
p  { font-size: 1em; line-height: 1.5em; } /* 14px divided by 14px OBVIOUSLY THIS IS NOT NEEDED */
p.sixteen_pixels  { font-size: 1.14285714em; } /* 16px divided by 14px */
p.twelve_pixels  { font-size: 0.85714286em; } /* 12px divided by 14px */
p.ten_pixels  { font-size: 0.71428571em; } /* 10px divided by 14px */

This is what the above scale would look like

This is a Header Level 1, 24 pixels

This is a Header Level 2, 21 pixels

This is a Header Level 3, 18 pixels

This is a Header Level 4, 16 pixels

This is a standard paragraph at 14px. Look's nicer than that big ugly 16 pixels doesn't it. There is a price to pay though, see the end of this article.

Hello world. and just for comparison purposes this is 12 pixels.

Hello world. and just for comparison purposes this is 10 pixels.

8 decimal places? Can't be right? I'm a Wed Designer not an Accountant

Well there is another 'easier' way, technique 2, the 62.5% technique. By by setting the font size to 62.5% ( don't ask me to explain, just trust me ) on the body element, 1em, the stating point of our scale, now equals 10 pixels thus making our em-based maths multiples of ten and therefore much easier. For example:

body { font-size:62.5%; } /* 1em now equals 10px */
h1 { font-size: 2.4em; } /* 24px divided by 10px */
p  { font-size: 1.4em; } /* 14px divided 10px */

Even thicko Graphic Designers like me can do them maths. The problem with this technique is the cascade / inheritance / compounding issues hence nested elements need to have their size either calculated requiring tricky maths, or declared like so:

li li, li p /* etc */ { font-size: 1em; }

Leave the base alone

This is what 16 pixels looks like by the way. Too large, to clunky, not elegant enough for you? I don't think so, but then I need glasses to read and the screen is usually twice as far away as the books and magazines I read. 14 pixels looks 'nicer' in terms of the page typography hierarchy I admit but your sacrificing legibility / usability for some of your users / customers. Like most things in web design it's a trade-off between aesthetics and functionality, selling shit or looking cool? To me selling shit is way cooler than looking cool.

So what's best practice?

Oddly I dont' know. As with most things web design there are no right or wrong ways to tackle the issue. My own preference is a base of 14 pixels. This choice is purely driven by the fact that trying to explain to a client why you have used the more usable and customer friendly, but odd looking 16 pixels is simply too difficult. As I've also mentioned I assume that people like me who regularly need to increase the font size know about page zooming these days.

Resources, inspiration and further reading