Font Size Reference

I usually designate a font size in my CSS on either the html or body tag using a percentage then size the rest of my document using ems. The reason I use a percentage value instead of just specifying the base font size in pixels is so that users can change their font size in their browsers if they choose.

Since most, if not all, web browsers use 16px as their base font size I can set my base font size using this formula:

percentage = 100(base font size/16)

Just insert your desired base font size in pixels into the formula and you will have the correct percentage to use in your CSS.

And now a handy cheat sheet if you don’t want to do the math:

Pixels to Percentage
Pixels Percentage
8 50
9 56.25
10 62.5
11 68.75
12 75
13 81.25
14 87.5
15 93.75
16 100
17 106.25
18 112.5

A quick disclaimer: there may be a browser out there that doesn’t use 16px as its base font size that I don’t know about. Also, this works only if you haven’t already changed your font size somewhere else.

What do you think?

Your name and E-mail address, and of course a comment, are required. I won't do anything evil with your E-mail address.

If you so desire, you may use these tags in your comment: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Made by John