CSS: How To and Understanding Font Size (em, px, rem)

Confused with which unit of measurement to use for font-size for your CSS? In fact, there are 2 widely accepted ones to use:

1. px
2. em

px, e.g. 16px, is used if you wish to give a fixed size mandate on the font.

em is more like in ratio (1.0em is equivalent to 16px) with respect to its parent. One advantage of em is it will scale up or down when the browser zoom in or out is used. Since the ratio is with respect to its parent, 2 occurences of 0.8em can mean different equivalent pixels if their respective parents have different pixels specifications. Here comes the new rem.

CSS3 introduces the new rem unit, which stands for "root em". What the rem unit does is it is now relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

The Jonathan Snook's blog has an article on font sizing with REM in more details.