REM: Not the Band

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, 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>

It would yield the following result:

Lorem ipsum…

• Dolor sit…

• Callum est…

As you can see, em’s multiply the font size when one element is used inside the other. In this case, the paragraph inherits the em setting of its list-item container. The only real way to get around the issue is to add a descendant rule that covers that eventuality:

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

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 better solution to the problem: using 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. Typically I combine it 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.

Browser support for rem units

IE 9+

Chrome 6+

Safari 6+

Safari / iOS 5+

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

So which units should I use where in my CSS?

My current recommendation and personal practice is to use a combination of CSS units, depending on context:

• Size typography in rem

• Use unitless measurements for line-height

• Use percentage values to size containers and images. Remember to turn on box-sizing: border-box to make layout easier.

• Use rem, em or % for margin or padding, depending on context

• Pixels should only be used to size very small images (no more than 250px square) or to define hairline values (very thin borders that do not need to scale, tiny border-radiuses to ease corners).

Remember: don’t size elements if you don’t have to. If you think the default size of elements is appropriate, leave them be!