Understanding em vs rem and px Values

Introduction

Lately, I have been seeing more and more developers shift from using the traditional px unit to em’s and rem’s. So what is the difference? Why should we use these and when are these better to use. Let’s dig in.

Our Foundation the px (pixel)

We use these all the time in our css files to determine the size of an element or its position. Whatever we define the px value to be is rendered on the screen. The px value stays consistent throughout devices - in its simplest form (not accounting for media queries, etc).

em’s - scalable units

The main attraction of using ems is because they are a scalable unit. They provide greater flexibility to our px values.

How these work

• An em is equal to the current font size of the document.

Example 1: Document Definition for Font Size: 12pt Converting 12pt to px = 16px Using the definition, 16px = 1em*

• Since ems are scalable we can increase/decrease by modifying its value.

Example 2: So if we have an element with font-size: 1em and we want to make another 2x larger we can do the following:

font-size: 2em;

This will cause the font-size to convert to 32px.

*this can be modified to a base, presented here.

Problems with ems

So these are great due to their scabalibility, unfortunately they have a compounding effect. The compounding effect is created because em’s are relative to the font-size fo the parent.

Here is an example:

<div class="parent">
	<p class="child">Hello World</p>
</div>

.parent{
	font-size: 2em;
}
.child{
	font-size: 1.5em;
}

Using traditional px you would expect the child element to be smaller than the parent. However, since we are using ems this is what occurs:

2 (em) x 16px (default doc font size) = 32px = parent

2 (em) x 1.5 (em) x 16px (default doc font size) = 48px = child

Well that is definitely not what you intended! Now, imagine the parent div was a child of another parent div with ems specified there as well? The result would be much much larger than you expected.

rem’s - a better alternative to ems

Thanks to CSS3 the rem was introduced. It simply means the “root” em and solves this compounding effect problem.

rems can be defined as follows:

html{
	font-size: 62.5% /* we are using the baseline (see note above) to convert 16px to 10px */
}
h1{
	font-size: 1.4rem /* 14px */
}
p{
	font-size: 1rem /* 10px */
}

Notice how the behavior is now what we want. We want the <p> element to be smaller than the <h1>.

In today’s modern browsers rems are supported. Full Browser Support Here.