CSS Font Size Conversion Chart

• “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
  
  
• Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
  
  
• Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
  
  
• Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

Here is a chart that will help you find the conversion of pt,px,ems and %. The chart is good for an approximation, font size can change based on font, and operating system.

Points	Pixels	Ems	Percent
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

For those of you who are still using pixels, it’s about time you made the switch to ems or points. Why should you use em for font sizing?

The simple answer is scalability. If you have a have a site that you want accessible to multiple audiences then use em’s. By multiple audiences, I mean those using mobile devices, like a Blackberry or iPhone. Also, this means that those users of the later generation….alright, older people, with bad vision…can see your website in the exact proportions you intend. What I mean by this is, if you hold CTRL and use your mouse wheel, or go to “view > text size” in Internet Explorer, your font size will be fully controlled by the user and not by you, ruining your design! Using ems will make all your sizes become proportional to the original settings! This will help retain your font-sizes despite what a browse or user decides to do to it!

Here is a little trick that will help you so you don’t have to remember the chart above.

body { font-size: 62.5% }

This will make 1.0 em the same as 10px.  So if you wanted 12 px. would be 1.2em, nice and easy.  Hopefully this will help you out.