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.