A photograph of Michael Stipe under a green concert light
Part of the CSS Box Model Reading List

Most up-to-date web developers have turned from using traditional absolute systems in web page design, abandoning pixels and points for em units and percentages. Using relative units relates HTML elements to the root of a well-designed web page: strong, well-defined typography. At the same time, relative units support better scalability, making for more adaptive content.

ems Bring Problems

The em unit is completely self-referential: it is literally the size of the currently selected text. The major, unavoidable issue with the measurement system is that the unit compounds. For example, applying the following CSS: 

p, ul, li { font-size: 1.4em; }

… you might think that paragraphs would be the same size as list items no matter what context they were in, but if the CSS were applied to the following markup: 

<p>Lorem ipsum…
<ul>
	<li>Dolor sit…
	<li><p>Callum est…
</ul>

… list item text content would be larger than paragraphs. em’s multiply the font size when one element is used inside the other. In this case, the list items inherit the em setting of their container.

As you can imagine, covering every exception and combination of elements in your CSS to deal with this problem quickly becomes frustrating.

REM to the Rescue

There’s a solution to the problem: use rem. The rem unit always relates to the root element (i.e. the <html> tag) and does not compound, making it easy to create strong, predictable typographic structures. It is sometimes combines with an old trick to make things even easier: 

html { font-size: 62.5%; }
p, li { font-size: 1.6rem; }

The html declaration makes 1rem close to 10px in size, enabling a designer to quickly move between familiar terms of reference.

You can polyfill IE 8 and earlier to support rem by using a small script by Chuck Carpenter that converts rem units in your CSS to pixel measurements in browsers that lack support.

Photograph by Lívia Stumpf, used under a Creative Commons Attribution-NonCommercial 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.