When to use 'em' and 'rem' in CSS

Styling elements on the web can be a tricky thing, particularly these days with hundreds of display sizes, various pixel densities and various browsers to choose from. So knowing which units to use when styling your websites is important in order to give as many of your site visitors a more pleasant experience.

Let's start off by discussing relative lengths in CSS. Relative lengths are sized based upon the relative font-size to which they belong to. These differ from absolute units, such as the pt, px and in in that 1em or 1rem can range from 16px to 160px, depending upon the font and font-size that is being used. So let's start off with talking about the em.

The 'em'

Let's start off by looking at the em unit and seeing it in action. Despite what some believe, the em is not actually relative to its parent, but relative to its own font-size, which just so happens to be the parent many a time. The following may not look like it, but line 'b' is actually inside of line 'a'. Line 'a' has a font-size set to 50px. If you left the child alone, it would also have a font-size of 50px. But set it's em to 2.5 and it is exactly 2.5 times the size of it's parent. So in essence, line b has a relative font-size of 125px.

a: font-size:50px
b: I'm 2.5em

Several factors could effect the way that line b is rendered above, such as the font-size of the element group (a, p, div, etc), the font-family that it is using and the font-size of its parent, if it is indeed set and allowing the element to inherit it.

When to use the 'em'

This one is tricky, because it takes a little more work to get a relative design accomplished than a non-relative design. The em unit is best suited for designing scalable sections on a webpage that render both well on desktop and on mobile regardless of font-size in place. Let's take a look at the following as an example.

• Link1
• Link2
• Link3
• Link4

This simple menu has a font-size of 16px and a padding set to 1.2em units. Not very impressive. But now let's do the same and increase it's font-size to something more noticeable.

• Link1
• Link2
• Link3
• Link4

Notice that the padding has also grown with the increase in the font-size. It scales with the text. Compare this to using the more static and absolute approach of using pixels and you can see how in the end it will be less work to make this nav more readable across the board.

For comparison, here is a copy of the second nav with the padding set to a more static 15px.

• Link1
• Link2
• Link3
• Link4

The content is a bit more cramped in this case, which is why the em tag is so helpful, particularly for more dynamic web content that changes frequently.

The 'rem'

Now onto the rem unit. Similar to the em unit, the rem unit is relative in size to the root element of the page (hence the 'r', for root). Let's take the same example from above, but this time, we'll set the child to have a font-size of 2.5rem, and we'll see what it does.

a: font-size:50px
b: I'm 2.5rem

As you can see, it ignores the parent's font-size and goes directly to the root of the page, which in this blog's case is set to around 12pt.

Why is this important

We don't often think about it, but every single person sees differently based on various factors. Some people have 20/15 vision and can fly fighter jets. Other's are on the opposite end of the spectrum and require 3.5 zoom glasses to function. And as such, everyone has the potential of having a different default font-size set on their browser. If you never looked into your browser settings, then you are probably at a 16px font-size, so using rem measurements will ensure that your websites content will scale with the users default font size.

You don't have to panic and abandon using the px however. It has a time and a place and still very much important to web development. In a future post, I will discuss the best time and place to use absolute units.

Happy web designing!