Recently I have started to get a lot of requests to make certain fonts on my websites this pixel (px) size or that pixel size.

For accessibility reasons I do not use pixels as a measurement of font size. Pixels are what is known in the trades as a fixed font size so they do not resize on some browsers when the user manually changes their browsers font size. The main problem is IE6 which despite all logical sense is an insanely widely used web browser.

So if a visitor to a poorly coded website had difficulty reading small text and they tried to increase the font size in IE6 and a lesser web developer had set the font sizes in pixels, then that user would not be able to read the web page. You could say that page would be inaccessible to them.

Thankfully there are some font size declarations that do resize in all the different web browsers. These are percentage (%) and em (em). I prefer percentages because that is what I started using way back in the day and they still haven’t let me down. But both effectively do the same thing.

To make my life easy I made the following table to convert fixed pixel sizes into % and em. The maths is quite simple. The basic font size on most browsers is 16px which is 100% or 1em. To work out the percentage of 17px I divided 17 by 16 and multiplied by 100. The result is 106%. For em I just divided 17 by 16.

The other thing to note is that web browsers do not display non integer font sizes. So a percent of 105 might display at 17px or 16px depending on the browser.

One final point I should add is that every time you decrease the font size by 1px a certain number of users will no longer read the text. For that reason I do not like to use font sizes under 12px/75%/.75em.

Px Size % Size Em Size
36px 225% 2.25em
35px 219% 2.19em
34px 213% 2.13em
33px 206% 2.06em
32px 200% 2em
31px 194% 1.94em
30px 188% 1.88em
29px 1.81% 1.81em
28px 175% 1.75em
27px 169% 1.69em
26px 163% 1.63em
25px 156% 1.5em
24px 150% 1.5em
23px 144% 1.44em
22px 138% 1.38em
21px 131% 1.31em
20px 125% 1.25em
19px 119% 1.19em
18px 113% 1.13em
17px 106% 1.06em
16px 100% 1em
15px 94% .94em
14px 88% .88em
13px 81% .81em
12px 75% .75em
11px 69% .69em
10px 63% .63em
9px 56% .56em
8px 50% .50em

Note: there might be some subtle differences on less popular browsers.