Why use rems over ems units in CSS?

What is em measurement unit?

I assume you already know the basics of CSS and what ems measurement unit means because this post will cover just the differences between ems and rems.

Let’s get started…

When it comes to using font-size property in CSS some of the most common used are pixels and ems but recently a new unit of measurements come up, it’s called rems.

The basic difference between em’s and rems is how they behave in relationship with it’s parent font-size property.

When you open the sandbox project the title and description are very small because

.card .card-container {
  padding: 5px;
  font-size: 0.2em;
}

What this does is changing the children’s font-size property by whatever the size was set in the browser or in the upper container *0.2. Meaning that below code will

.card-container .card-title {
  padding-bottom: 2px;
  font-size: 2em; /*to fix try change 2em to 2rem*/
}

result in: font-size: 2em; => font-size: 0.4em; because the upper container font-size property is set to 0.2em then 0.2*2em is 0.4em.

To fix this issue you just need to change from em to rem:

.card .card-container {
  padding: 5px;
  font-size: 0.2em;
}
.card-container .card-title {
  padding-bottom: 2px;
  font-size: 2rem; 
}
.card-container .card-description {
  padding-bottom: 2px;
  font-size: 1rem; 
}

Now everything should work as expected.