Text Overflow

The Caiman Web Design Blog

Em and Rem: The CSS Units You’re Not Using But Should Be

NOTE: This blog post is aimed at web developers and designers. As such, it’s full of super nerdy stuff that may not make a whole lot of sense to non-developers. But I strongly encourage everyone who’s even slightly interested in design, development or typography to read on, as you just might learn something.

Px units in CSS make a lot of sense. Our brains prefer things that are static and straight forward. But in our modern world of responsive web design, static and straight forward have gone the way of the Baiji River Dolphin (think Dodo). Ems are the tried and true alternative, and the shiny new rems are even better.

What’s wrong with px?

There’s nothing wrong with px per se. It’s still a vital part of web development and shouldn’t be discarded. Elements on your site that need a fixed width or height should use px. Rather, think of px and em/rem as serving two different purposes. Px is an absolute unit, and em/rem are relative units. “Relative” sounds a lot like “responsive”, which might clue you in to their benefits: em/rem have great advantages when making a responsive site.

So what the heck are ems and rems?

For the sake of explanation I’ll start with em. It originates from printing press methods back in the olden days, when the sizes of letters were based on the width of a capital “M”. Today this origin is pretty immaterial. All you need to understand is this: an em is based on the font size of its parent element (or, if no font-size is set on the parent, its closest grandparent element on which font-size is set. For brevity I’ll just use “parent” henceforth). 1em is exactly equal to the font size of the parent. 2em is twice the size, .25em is a quarter the size, etc. Take this example:

HTML
<div class="parent">
    <p class="child">
        Hello world.
    </p>
</div>
CSS
.parent{
    font-size: 10px;
}
.child{
    font-size: 1em; // equal to 10px
}

The result here is that .child‘s font size will be equal to the font size of .parent, in this case 10px.

Another example:

HTML
<div class="parent">
    <p class="child">
        Hello world.
    </p>
</div>
CSS
.parent{
    font-size: 10px;
}
.child{
    font-size: 1.5em; // equal to 15px
}

Here, .child‘s font size will be equal to 15px, since 15 is 1.5 x 10.

The beauty here is that we can change the font size on .parent and be confident that .child‘s font size will adjust accordingly. This is where the responsive web design capabilities of the em unit shine through. Imagine this scenerio:

CSS
.parent{
    font-size: 10px;
}
.child{
    font-size: 1.5em;
}

@media (max-width: 1024px){
    .parent{
        font-size: 8px;
    }
}

When the screen size is 1024px or smaller, .parent will be at 8px and .child will automatically become 12px. Nifty, huh?

Browser support for em is pretty much universal. It’s been around forever, so you’re good to go.

Ems are awesome, end of article

Not quite. Yes ems are awesome, but they have one major drawback: they compound on nested elements. Here’s what I mean – Consider this:

HTML
<div class="parent">
    <div class="child">
        <p class="grandchild">
            Hello World.
        </p>
    </div>
</div>
CSS
.parent{
    font-size: 12px;
}

.child{
    font-size: 1.5em; // equal to 18px
}

.grandchild{
    font-size: 0.5em; // equal to 9px
}

.child will have a font size equal to 18px (12 x 1.5). But what about .grandchild? You may think it’ll be 6px (12 x .5), but remember that ems are relative to the parent; the font size of .grandchild is equal to half the font size of .child, not of .parent, which puts .grandchild at 9px (18 x .5). If you nest more elements below .grandchild, this would continue to compound ad infinitum. This may be your desired result, but it’s likely not.

Rem – losing your em religion

Rems are the new hotness. They play a slightly different role than ems, but in my opinion they replace them in the majority of cases. They work just like ems but with one significant difference: while ems are relative to the parent, rems are relative to the html element (rem stands for root em, and the root is the html element). This completely eliminates the problem of compounding, since the font size is always relative to one single element. If you change the font-size on html, every other element on your site set with rems will change accordingly. For instance:

CSS
html{
    font-size: 16px;
}

.parent{
    font-size: 1rem; // equal to 16px (16 x 1)
}

.child{
    font-size: 0.75rem; // equal to 12px (16 x .75)
}

.parent .child section div ul li{
    font-size: 2rem; // equal to 32px (16 x 2)
}

By the way, .parent .child section div ul li is an exaggeration used to make a point; if you ever actually use a ridiculously specific selector like that on a site, I’ll never speak to you.

Browser support for rem isn’t as good as em. IE8 is a no-go. But fortunately there’s a wonderful polyfill (to which yours truly was a minor contributor!). Load the polyfill on your site and use rems everywhere guilt free.

Should I use em or rem?

Most of the time, use rems. For most purposes they do exactly what you’re probably wanting. However, there may be situations where you want the font size to be based on the parent rather than the root, or where compounding is precisely what you want. Use ems in those cases.

But I use pixels in Photoshop, what am I to do?

Ah yes, Photoshop and your beloved pixels. Fear not! There’s a neat trick to easily calculate rem values from pixels: Set the font-size of the html element to 10px. Then all you have to do to convert px to rem is move the decimal point one place to the left: 12px become 1.2rem, 21px becomes 2.1rem, 36px becomes 3.6rem, etc. This trick is obviously better-suited for rems, but the same principle applies to ems too.

Not just for font-size

Keep in mind that ems and rems aren’t just for font size. They can be used for anything that can be set with px. Margins, padding, you name it. And they can be used for both width and height. I like to use rems for padding on elements that contain text. That way, when the text size scales up or down per my responsive design, so does the padding. Since padding is very often directly related to font size, this works swimmingly.

Conclusion

The way we think about web design is becoming increasingly fluid, so it’s only natural that our units should follow suit. Use em and rem (with the polyfill if you need IE8 support) ’till your heart’s content, and leave the static world behind.

Share On
facebooktwittergoogle_plusredditpinterestlinkedin