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|
Note: there might be some subtle differences on less popular browsers.