Similarities and differences between rem and em CSS units explained with examples

Similarities and differences between rem and em CSS units explained with examples

15th January 2019 0 By Azadeh

One of the most important take over in CSS is units. Understanding how units and specifically rem and em work make a huge difference on how we write CSS. We will explain similarities and differences of rem and em with examples in this article.

The all mighty pixel

Once and for all we better learn that all units are based on pixels at the end even if we don’t implicitly mention it. We define at least the HTML font based on pixels and then everything else will be based in that. So it is best to embrace this.

Similarities

Although both em and rem are called relative units but they have a different behaviour in that regard.

em vs rem

Em as a container relative unit

Em is relative to its container. It means that it scales up and down calculating relative to its container. Take a look at this example:

html { font-size: 16px } 
h1 { font-size: 2em } /* 16px * 2 = 32px */

We set up our font in HTML tag by 16 pixels. Therefore h1 gets twice of that size by 2em because in this case HTMl is its closest parent container that has set a font on it. In the below code:

h1 {   font-size: 2em; /* 1em = 16px */   margin-bottom: 1em; /* 1em = 32px */ } 
p { font-size: 1em; /* 1em = 16px */ margin-bottom: 1em; /* 1em = 16px */ }

Although we gave h1 tag a 1em as margin-bottom but that is equal to 32px as it is twice of HTML font-size. But it is equal to 16px for p tag as it is only 1em and HTML tag is the p tag parent as well.

em example

The great use case for ems is if user soom in and out in the browser user’s font overrides ems units. This is not the case if we use rems though.

Rem is the root em

In terms of relativeness the story is the same for rem. But the big difference is rem is relative to the root as its name also suggests. It is the root em. Meaning whatever has been defined for HTML tag ( by default it is 16px), the rem unit is relative to that.

Therefore the above example has a different effect this time:

h1 {   font-size: 2rem;   margin-bottom: 1rem; /* 1rem = 16px */ } 
p { font-size: 1rem; margin-bottom: 1rem; /* 1rem = 16px */ }

As the HTML is the root all calculations are based on that. So 1rem is always 16px no matter in which tag.

root em

Pixel and Em and Rem

Pixels are always the same.In browsers they always stay intact. See the below pen:

See the Pen bdxWbB by Envato Tuts+ (@tutsplus) on CodePen.

Based on the slider font-size the boxes with em and rem units reflect and become relatively big and small. But the box with the pixel unit stays the same size at all times.

Rem and scalability

Basically rem seems the practical option to use for a website. If units are based on rem then the site will be easily scalable and maintainable. We just need to change the HTML tag font-size and everything else will scale relatively.

Em in common

Em and relativeness

Besides if we need units to be based on a specific container and scale a section of the site based on that em is the go option. With em we have local control of our units if that is what we need.

No matter what units are used throughout the site or application, we shall understand that they are all based on pixels. Pixels work perfectly in browsers and screens are based on them. We need to decide how do we want to scale the site and how to manipulate elements units.

Thank you for reading.