Tuesday, November 11, 2008

EM Conversions for Base Font of 12px

In order to make things really easy, I made this little table to help with conversions from pixels to EMs.  I'm used to using pixels and I'm sure most everyone is, so here is something simple.

The following table applies to a browser that is set to 'medium' font-size (the standard).  Since most websites use a standard 12px font for text, I set the body font to this value so that the EMs are pegged at 12px (i.e. 1em = 12px).

Base (from browser): 16px;
Body (CSS): 75% (12px);

Befor getting to the conversions, take a look at the above values.  You'll need to set your BODY tag to font-size: 75%.  75% of 16px is 12px, this is what we want to work with or else the table below will not work.

Conversions
Column 1: Desired in px | Column 2: Outcome in em
 0px =  .000 em
 1px =  .083 em
 2px =  .166 em
 3px =  .250 em
 4px =  .333 em
 5px =  .416 em
 6px =  .500 em
 7px =  .583 em
 8px =  .666 em
 9px =  .750 em
10px =  .833 em
11px =  .916 em
12px = 1.000 em
13px = 1.083 em
14px = 1.166 em
15px = 1.250 em
16px = 1.333 em
17px = 1.416 em
18px = 1.500 em
19px = 1.583 em
20px = 1.666 em
21px = 1.750 em
22px = 1.833 em
23px = 1.916 em
24px = 2.000 em

Again, the formula is: desired-font/parent-font = font-in-em (i.e. 10/12 = .833em)

Hope this helps!

No comments: