Pixels, EMs, and PXtoEM.com…oh crazy!

What is an EM?
Wikipedia puts it well: “An em is a unit of measurement in the field of typography, equal to the size of the current font.” If your font-size is at 16 pixels, then 1em = 16px
For more information visit Wikipedia and W3Schools.

What is the text sizing difference between PX, EM, %, PT?
Pixels and points are static measurements. 1 pixel is always 1 pixel. 1 point is always 1 point. Points are a little different because they change size based on DPI. On paper, with its higher DPI, 12 point text is actually more pixels that 12 point text on a computer monitor, which has a lower DPI than paper.
Percent and EMs on the other hand are relative measurements. The size of EM or percent-based text depends on its parent. If body text is sized at 12 pixels, then text set at 120% or 1.2 EM inside the body will be 1.2 * 12, or 14.4 pixels.

How do I convert between PX, EM, %, and PT?
Assuming you aren’t using PXtoEM.com to keep it simple, here’s the formulas PXtoEM.com uses.
Note:16px is used as the body text size in all conversions because that is the browser default on today’s browser. You will change 16px to your base text size.
PX to EM: text size in pixels / body text size in pixels = size in EMs
Example: 12px / 16px = .75em
PX to %: text size in pixels / body text size in pixels * 100 = size in %
Example: 12px / 16px * 100 = 75%
PX to PT: text size in pixels * points per inch / pixels per inch = size in pt
Example: 16px * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows, 72 in Mac) = 12pt
EM to PX: text size in EMs * body text size in pixels = size in pixels
Example: .75em * 16px = 12px
EM to %: text size in EMs * 100 = size in %
Example: .75em * 100 = 75%
% to PX: text size in % * body text size in pixels / 100 = size in pixels
Example: 75 * 16px / 100 = 12px
% to EM: text size in % / 100 = size in EMs
Example: 75 / 100 = .75em
PT to PX: text size in pt * pixels per inch / points per inch = text size in pixels
Example: 12pt * 96ppi / 72ppi = 16px

Why size your text with EMs in CSS?
Style sheets that use EMs are easier to maintain for the designer (especially with PXtoEM.com at your side) and more accessible to end-users.
Style sheets become easier to maintain because all text set in EMs scale to the body font-size. Only one element’s font-size needs to change instead of individually changing the font-size of each element.
Accessibility is increased for end-users because text is scaled based on their preferences rather than set statically in pixels. Additionally, end-users can use hot keys to scale the text in all browsers. Many people have difficulty reading small text on a computer screen.
For more information visit A List Apart, informIT, Jon Tan’s Blog, and this SharePoint Blog.