DEV Community

Baba Umar
Baba Umar

Posted on

1

Sizing with ems and rems

The default size of an M in pixels

What is an em?

The word "em" originated from the letter M and an em is a measurement equal to the size of a capital M in pixels on a screen. This is by default 16x if a font-size isn't set. So 1em = 16px.

The em unit also defaults to the font-size of a parent element for children elements if the font-size isn't set.


Where do I use ems?

ems are a relative CSS measuring unit. Examples of other some other measuring units are :

  1. "px" - pixels
  2. "vw" - viewport width
  3. "in" - inches

So you use it in places where you'll use length units such as for paddings, margins and font-sizes to name a few.

Read more about absolute and relative measuring units here

How it works

Let's take font sizing as an example use case. Say we have a text paragraph like below:

 <p> This is an example </p>
Enter fullscreen mode Exit fullscreen mode

This looks like this in your browser:

Rendered code


Using pixels

By default, it has a size of 16px. We can increase this size by specifying a pixel value in the CSS.

p {
 font-size: 32px; /* double the current size (i.e 2 * 16px) */
}
Enter fullscreen mode Exit fullscreen mode

Now it looks like this in your browser!

Rendered code

Now we have a bigger text


Using ems

We can achieve the same effect using em units. If we want to double the size like we did with pixels, we simply do:

p {
 font-size: 2em; /* double the current size (i.e 2 * 1em [16px]) */
}
Enter fullscreen mode Exit fullscreen mode

We can still see the we have the same larger size text as in the pixel example.

Rendered code

If we want to reduce the size relative to the default font size we can do this:

p {
 font-size: 0.5em; /* half the current size */
}
Enter fullscreen mode Exit fullscreen mode

This basically means:
0.5 * 16px(1em) = 8px

Hence the new size of the text is even smaller at 8px as seen below:

0.5 em visualized

To see the ems in comparison. We can have three html elements with different em values as seen below:

HTML

  <p class= "one"> I am 0.5 em or 8px </p>
  <p class= "two"> I am 1em or 16px and the default font size on browsers </p>
  <p class= "three"> I am 2em or 32px which is double the size above me </p>
Enter fullscreen mode Exit fullscreen mode

CSS

.one {
 font-size: 0.5em; 
}

.two {
 font-size: 1em; 
}

.three {
 font-size: 2em; 
}
Enter fullscreen mode Exit fullscreen mode

This is displayed as:
Comparing all three


Why do we use ems?

Two main examples are:

  1. Accessibility: If a user is trying to zoom in to see larger text on screen, using ems allows the browser to seamlessly resize the text based on the zoom.

  2. Flexible layouts: If you have a group of UI elements like a button input and maybe some text and you want to resize them all at once, paddings and margins included, setting an em value allows you to resize them from a single reference i.e the default em unit which is the font-size of the containing element (root or a parent element)

Dangers of em unit

  1. ems can be computationally expensive because they are relative, especially when they are used in complex CSS math.

  2. Compounding: So remember em units are relative to the root or parent font-size, if you set/change that value, the change is passed down to the children and they take the value from the nearest parent.

Let's take this example:

HTML

  <div class= "parent"> I am parent with size 1em or 16px
    <div class= "child"> I am child with size 2em or 32px 
      <div class= "grandchild"> I am grandchild with 3em or 96px because my parent is 32px!</div>
    </div>
  <div>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
 font-size:1em; 
}

.child {
 font-size: 2em; 
}

.grandchild {
 font-size: 3em; 
}
Enter fullscreen mode Exit fullscreen mode

Compounding visualized


This is the compounding effect, and can lead to unwanted experiences as a user may think that the font size of the grandchild would be 3 * 16px = 48px

How do we prevent this? rem units

To prevent this, we have rem units which are relative to the root element.

What this means is that it an em will always be the HTML root element font-size of 16px, preventing compounding, this means the example above now looks like this

HTML

  <div class= "parent"> I am parent with size 1em or 16px
    <div class= "child"> I am child with size 2em or 32px 
      <div class= "grandchild"> I am grandchild with 3em or 48px because my parent is the root element 16px!</div>
    </div>
  <div>
Enter fullscreen mode Exit fullscreen mode

CSS

.parent {
 font-size:1rem; 
}

.child {
 font-size: 2rem; 
}

.grandchild {
 font-size: 3rem; 
}
Enter fullscreen mode Exit fullscreen mode

Rem exammple

References

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems
W3Schools: https://www.w3schools.com/cssref/css_units.php
Youtube video: https://www.youtube.com/watch?v=dKvEwtqkVCs

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more