AtoZ CSS Quick Tip: Benefits of rem and em Values

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
You can view the full transcript and screencast for its corresponding video about the :required pseudo class here.

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added quick tips about using the rem and em values.

R is for rem and em

In the original screencast video we learned all about the :required pseudo class which is useful for styling forms with fields that must be filled in.

As much as forms, validation, and styling state are big topics, there isn’t too much we didn’t cover on the topic of :required the first time around. So instead, let’s look at a couple of quick tips for using the rem unit of measurement. But first, let’s look at another type of relative unit: the em.

The Pros and Cons of using em

When working on a responsive project it’s more flexible to use relative units like em for sizing text and spacing in and around elements rather than pixels. This is because this unit is relative to the font size of its parent element, allowing an element’s size, spacing and text content to grow proportionally as the font-size of parent elements change.

Using these relative units enables you to build a system of proportions where changing values of font-size on one element has a cascading effect on the child elements within. A system of proportions is a good thing, but this behavior of em does come with a downside.

Take the following snippet of HTML:

<ul> 
  <li>lorem ipsum</li> 
  <li>dolor sit 
   <ol> 
    <li>lorem ipsum</li> 
    <li>lorem ipsum</li> 
    <li>lorem ipsum</li> 
    <li>lorem ipsum</li> 
   </ol> 
 </li> 
</ul>

This nested list isn’t the most common thing in the world but could likely appear in a page of terms and conditions or some other kind of formal document.

If we wanted to make the list items stand out, we could set their font-size to be 1.5 times the size of the base size of 16px.

li {
  font-size: 1.5em; /* 24px/16px */
}

But this will cause an issue with the nested li as they will be 1.5 times the size of their parent too. The nested items will be 1.5 times 24px rather than 1.5 times 16px. The result is that any nested list items will grow exponentially with each level of nesting. This is likely not what the designer intended!

A similar problem occurs with nested elements and em values of less than 1. In this case, any nested items would keep getting incrementally smaller with each level of nesting.

So what can we do instead?

Use rem for setting text size

Instead of running the risk of ever-increasing or decreasing font-size we can use an alternative unit.

We could use pixels but relative units are more flexible in responsive projects as mentioned earlier. Instead, we can use the rem unit as this is always calculated based on the font-size of the root element which is normally the html element in the case of a website or web application. In a .svg or .xml document the root element might be different but those types of documents aren’t our concern here.

If we use rem for setting font-size it doesn’t mean the humble em should never get a look in. I tend to use em for setting padding within elements so that the spacing is always relative to the size of the text.

Use Sass to help with rem browser support

The rem unit is only supported from IE9 and above. If you need to support IE8 (or below) then you can use a JS polyfill or provide a px fallback in the following way:

li {
  font-size: 24px;
  font-size: 1.5rem;
}

If you’re using Sass you could create a mixin and a function for calculating the desired size in rem and providing the fallback automatically.

@function rem-calc($font-size, $base-font-size: 16) {
  @return ($size/$base-font-size) *1rem;
}
@mixin rem-with-px-fallback($size, $property:font-size) {
  #{$property}: $size * 1px;
  #{$property}: rem-calc($size);
}
li {
  @include rem-with-px-fallback(24);
}

There you have it. A couple of quick tips for using rem. If you’re not using them in your current projects, I’d definitely recommend giving them a try.