Font Sizing with rem

Font Sizing with rem:

Jonathan Snook:

CSS3 introduces a few new units, including the rem unit, which stands for "root em". If this hasn't put you to sleep yet, then let's look at how rem works.

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is 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.

This is golden. Sizing with em can be a nightmare because of how it's sized in relation to the parent element. With rem being based on the root element, it's the best of both worlds — the relativeness of em with the reliability of px.

Browser support includes Safari 5, Chrome, Firefox 3.6+, and even IE9. At the end of his article, Jonathan provides a fallback at the end for older versions of browsers.