REM&EM: why and how

REM has been considered a web best practice for reasons of accessibility and abstraction. But recent conversation arose whether the abstraction REM or EM is still worth maintaining.


Lately there has been a discussion about Proportional unit sizes again. The web moved on since we all sort of settled for EM/REM as a "best-practice". Recent articles and prominent websites such as medium.com which uses px as the unit for typography facilitate the idea of REM being not worth the "hassle" anymore. But what actual trouble is there with REM and why was it considered a best practice in the first place?

Before we get into the real advantages of proportional units we take a look on how they work and how to set things up. If you're already familiar with REM and EM, skip the explanatory part.

REM and EM

REM and EM are proportional size values, REM being proportional to the „root-element“, this being the element, and EM, simply put, to it’s parent element. There is a little bit more to EM though. With every EM Value being proportional to it’s parent an inheritance structure can occur.

Consider following:

html {
    font-size: 15px;
}

div {
    font-size: 2em;
}

p {
    font-size: 2em;
}  
<div>
    <p>
</div>

If the div would be the parent of the paragraph, what actual font-size would p have? The answer is: 15 * 2 * 2 = 60px. First the div’s 2em are multiplied with the html’s 15px, then p’s 2em are multiplied with the result, the actual font size of the div.

With that understanding, we already discovered REMs clear advantage over EM. If you’re not being careful—and the general advice would be putting EM only directly on text elements—the abstraction of EM can get quickly hard and unintuitive to maintain.

That's why most web developers settled on REM as a de facto best practice.

How to Setup REM

As all calculations of REM are based on the HTML element we want to set up some sort of root font-size to make calculations easier.

html {
    font-size: 62.5%
}

Why? 62.5%? The default font size of all major browsers is 16px. So we set our root font size to 62.5% of 16px = 10px. This makes it easier to calculate and maintain. 1.0rem = 10px. If you wish an element to have a font-size of 18px you would just divide your desired size by 10.

For example: 18px / 10 = 1.8rem

This eliminates pretty much the only drawback of proportionals units: their unintuitiveness.

h1 {
    font-size: 31px;
    font-size: 3.1rem;
}
h2 {
    font-size: 24px;
    font-size: 2.4rem;
}

REM and EM is not only limited to font-sizes, also margins and widths can be sized this way. A general advice would be to size text margins or—taking it even further—paragraph widths. Everything related to type could benefit from proportional sizing.

h2 {
    font-size: 24px;
    font-size: 2.4rem;
    margin-bottom: 2.0rem;
}

Browser Support

REM is widely supported. As a fallback strategy for older browsers just declare your font-size in PX followed by REM—so browsers which can’t interpret REM will just use plain old PX.

What still speaks for Proportional Units

Accessibility is a big argument, consider a user who works with increased font size. The Browser default is 16px but a user with eyesight issues might want to adjust this setting. PX values dont't scale with this change. However, the option to increase font-size is considered to be, at least partially, replaced by the „zoom“ function which all modern browsers provide.

Zoom function in Google Chrome

There might be still a use-case where a user would want to only increase font without zooming the entire layout.

We simply can’t assume that everyone is not touching the font-size option. And it’s not even just about the user—A OS or Browser might not use 16px as a default value (Ebook Reader). Let the OS and user handle these preferences.

Consider Abstraction an even stronger argument for EM or REM, through its very nature of being proportional to other elements it provides high modularity. Consider a button: we could employ em to make the padding proportional to the buttons font-size.

.button {
    font-size: 1.8rem; /* initial font size */
    padding: .5em 3em;
}

We could also change the root font size—depending on the viewport—to a different percentage value, this would scale our entire type. For simple layouts this could mean saving a lot of media-queries.

With a combination of both, a high level of abstraction and modularity can be achieved. But be carefull, due to EMs inheritance it might get out of hand quickly. I would almost always recommend using EM only in combination with REM.

An article on CSS Tricks recommends a combined PX, REM and EM approach. But be carefull when looking into this, since it recommends setting the root font size with px, which would override the users settings, making the entire accesibility argument pointless.

When to use EM vs REM at tutsplus also provides a good take on this.

Conclusion

I don’t really see any drawbacks of proportional font-sizes. Doing it merely for the reason of accessibly might be a ever shrinking use-case, but why would you not support it—there is almost no additional work involved. With preprocessors like sass one could even fully automate the font-size conversion from PX to REM.

Where to go from here

In combination with unit-less line-heights, REM is a powerful method to improve your sites typography. If you want to go even further I would suggest stop eyeballing your typography and start using something like the golden ratio.