HTML & CSS
Article
By Guy Routledge

AtoZ CSS Quick Tip: Benefits of rem and em Values

By Guy Routledge

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.

R2-01

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.

More:
  • Kenneth Davila

    I think this is still not clear, great intro to the rem and em, but what is a recommended pattern of using this unit? You mention spacing and that you use em for padding? It would’ve been good to see an example of a pattern and not just an overview of the units. I just changed a component that was built at my new job by 3 different UI devs, using rems, and the design team was pissed off with the lack of inconsistency in the font sizes and spacing across the component in different screen sizes. I think this approach is a lazy approach to be honest if not implemented correctly. I reverted everything to pixels leveraging the same break points, and the design team is very happy with the results. We have a more polished component now that is consistent across view ports and sizes. But I would like to see an example or pattern of how to implement this unit. I may have to come up with a code pen myself and will share if I do. I’m still not sold on rems…

    • Alexander Fleischer

      I think you used it the wrong way. rem is exact the same size like px if you calculate IT correct

      • Kenneth Davila

        Whoever used it, used it the wrong way, because the design was calling for certain font sizes to be 12px, or 13px at certain breakpoints and I was seeing things like 12.7px… ?? or 14.3px ?? so the math was obviously wrong. I’m going to keep looking at this and perhaps just fiddle with it myself to get a better understanding. It does look like something that can save time, but maybe not a good approach for components that need to have a lot of detailed information and have hierarchical placement on top of needing to be responsive. It could be that the use case that I am describing fits better for a fixed/absolute value. So I guess something to mention is that rem/em may have better uses cases for simpler layouts and components perhaps. In any case like I mentioned I will keep investigating this so I can definitely have this pattern under my belt and really under stand it’s value proposition in responsive CSS grid.

  • Kenneth Davila

    Thanks Guy appreciate the link.. You have definitely sparked my interest in this approach and I’ll continue to look at this.

  • I agree with Kenneth in that it would be great to see a few patterns of how to use em and rem together — and the patterns should also address the pros and cons about using rem, em and px when specifying the breakpoints in media queries.
    I recommend using em when styling a web component that is to be reused in various contexts if and only if the lengths inside each web component instance are expected to harmonize with its surrounding context.

Recommended
Sponsors
Get the latest in Front-end, once a week, for free.