Solve Common Sizing Problems with CSS3's New rem Unit

CSS promised to keep layouts well-proportioned, ensuring consistent measurement by including its own units.

Besides pixels, the most commonly used CSS unit is probably the em, which is simply the computed font-size of the current element. Using this font-relative unit, designers can keep the relation between text and non-text constant -- crucial for pleasing and intelligible design.

The em proved a bit unexpectedly annoying in more complex layouts, because the em is calculated relative to font-size of the current element -- whose font-size may already have been calculate relative to another element. As Jonathan Snook explains, in a popular post:

The problem with em-based font sizing is that the font size compounds. A list within a list isn't 14px, it's 20px. Go another level deeper and it's 27px! These issues can be worked around by declaring any child elements to use 1em, avoiding the compounding effect.

The only way around this before CSS3 was to reset every child element's font-size to 1em, cutting off all compounding effects.

But that's obviously a bit of a hack, and consequently easy to forget about.

The solution? CSS3's rem (root element) unit -- measured relative to the root element, as the name suggests, not the current element.

How to do it? You can probably guess already, but if not, here's Jonathan's full explanation. (Works in all major browsers, too, now that Opera is in 11.60.)

If you've wrestled with ems before, chances are you'll find rem extremely useful at some point.