This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Use the em and the rem for the right use cases

The em unit is a very useful unit. You should use it to set the font-size of the typography in your web project. It’s a wonderfully flexible unit. If you set up a typographic scale — with a tool like Type Scale or Gridlover for instance — and later on in the project you find out that the ratio is beautiful but the font-sizes are too small, it’s very easy to fix. Simply increase the font-size on your HTML element and you’re done.

html {
    font-size: 1.2em;
}

All font-sizes will now increase, but the scale remains the same. This might seem like a marginal use case but I use this a lot for break-points: smaller screens often need smaller font-sizes.

The beautiful thing is that this doesn’t just work when we, as designers, decide that the font-size should be bigger. It also works when our users decide the sizes we chose are too small: it respects the user settings in the browser.

Layout

The em is also perfect for defining max-width and mediaqueries. There are a few theories about the perfect length of a line. One of them says 10 words is nice — which results in different measures for different languages. The other says that anything between 45 and 75 characters is good — which gives different results for different fonts. You can use a simple tool like the international measure slider to come up with the perfect measure for your project. What I like about defining max-widths like that is that headers might be wider than paragraphs, since their measure depends on their own font-size. Like with this simple code example:

p, h1, h2, h3 {
    max-width: 30em;
}

This would never work with a unit like px or rem.

Flexibility

We can use this same principle in another use case. Imagine that for some weird reason we need an aside with a few widgets in it. A simple way to show to the user that this is an aside, and not the main content is by decreasing the font-size of the aside. If we used ems for our typography, the font-size in our widgets would shrink, while the scale between the body copy and the headers would remain the same. Our desired effect just needs this piece of code:

aside {
    font-size: 80%;
}

As you see, the em gives us the flexibility to keep our ratio in tact while increasing or decreasing the font-size on a part of our design. Again, this would never work with px or rem. They are designed not to be flexible.

Inflexibility

And that’s a good thing. We need units that are not flexible. Imagine that the aside has a border around it. It needs a margin, a padding and a border radius. If we defined these margins, paddings and radii with ems, they would shrink as well if we decreased the font-size. So instead of using an em, we should be using the rem. The rem is perfect for properties of the design that should be consistent anywhere, regardless of the font-size. It’s not really suitable for other use cases