AtoZ CSS Quick Tip: Benefits of rem and em Values

Guy Routledge
Guy Routledge
Share

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.

Frequently Asked Questions (FAQs) about REM and EM Values in CSS

What is the main difference between REM and EM in CSS?

The main difference between REM and EM in CSS lies in their reference points for calculating size. EM is relative to the font-size of its closest parent, or the current element. This means if you nest elements, each with a font-size defined in EM, the sizes compound and can quickly become unwieldy. On the other hand, REM is relative to the root—or the html—element. This means that no matter how deeply nested an element is, if you define its font-size in REM, it will refer to the font-size of the html element, providing a consistent sizing across your website.

When should I use REM over EM in CSS?

REM is generally used when you want to create a consistent and predictable sizing across your website. Since REM is relative to the root element, it doesn’t matter how deeply nested your elements are, the sizing will remain consistent. This is particularly useful for building responsive designs, where consistency and predictability are key. However, EM can be useful when you want to create a more dynamic and scalable design, where elements are sized relative to their parent elements.

How do I convert pixels to REM or EM in CSS?

To convert pixels to REM or EM, you first need to know the base font-size of your document. This is typically set on the html element and is often 16px, but it can be any value. Once you know the base font-size, you can calculate REM or EM values by dividing the desired pixel value by the base font-size. For example, if your base font-size is 16px and you want a font-size of 24px, you would calculate 24 / 16 = 1.5rem or 1.5em.

Can I use REM and EM units interchangeably?

While REM and EM units can both be used to define sizes in CSS, they are not interchangeable due to their different reference points. REM is always relative to the root element, while EM is relative to the nearest parent element or the current element. This means that the same REM or EM value can result in different sizes depending on the context in which it’s used.

How does browser compatibility affect the use of REM and EM units?

Both REM and EM units are well supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, if you need to support older versions of Internet Explorer (IE 8 or earlier), you should be aware that these browsers do not support REM units. In this case, you might want to use a pixel fallback or consider using EM units, which have wider browser support.

How do REM and EM units affect accessibility?

REM and EM units can greatly enhance the accessibility of your website by making it more scalable and responsive to user settings. Since these units are relative, they allow users to adjust the base font-size to their preference without breaking the layout. This is particularly beneficial for users with visual impairments who may need to increase the font-size for readability.

What are the best practices for using REM and EM units in CSS?

One best practice is to use REM units for defining font-sizes, margins, and paddings to ensure consistency across your website. You can use EM units for elements that need to scale with their parent element, such as dropdown menus or tooltips. It’s also a good idea to define a base font-size on the html element in percentage, which allows users to adjust the base font-size to their preference.

How do REM and EM units work with media queries?

REM and EM units can be used in media queries just like any other units. However, since these units are relative, they can make your media queries more flexible and responsive. For example, if you define your breakpoints in EM units, they will scale with the base font-size, allowing your layout to adapt to user settings.

Can I use REM and EM units for elements other than text?

Yes, REM and EM units can be used for any size definition in CSS, not just for text. This includes width, height, padding, margin, border-width, and even positioning. Using REM and EM units for these properties can make your layout more flexible and responsive.

How do I handle nested elements when using EM units?

When using EM units, nested elements can become a challenge as the sizes compound. One way to handle this is to reset the font-size on the nested element to 1em, which will make it equal to the font-size of its parent. Alternatively, you can use REM units for nested elements to ensure consistent sizing.