Converting px into percentage and em for relative CSS font sizes
Wednesday, March 12th, 2008Recently 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. So if a user prefers to play online games such as partypoker using Firefox, but writes and sends emails via Google Chrome (with it’s useful ability to automatically spellcheck), then this won’t matter at all. Whatever they choose to access my site will still allow them to increase the font size to meet their own personal preferences. 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.
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.
