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 :
- "px" - pixels
- "vw" - viewport width
- "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>
This looks like this in your browser:
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) */
}
Now it looks like this in your browser!
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]) */
}
We can still see the we have the same larger size text as in the pixel example.
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 */
}
This basically means:
0.5 * 16px(1em) = 8px
Hence the new size of the text is even smaller at 8px as seen below:
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>
CSS
.one {
font-size: 0.5em;
}
.two {
font-size: 1em;
}
.three {
font-size: 2em;
}
Why do we use ems?
Two main examples are:
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.
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
ems can be computationally expensive because they are relative, especially when they are used in complex CSS math.
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>
CSS
.parent {
font-size:1em;
}
.child {
font-size: 2em;
}
.grandchild {
font-size: 3em;
}
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>
CSS
.parent {
font-size:1rem;
}
.child {
font-size: 2rem;
}
.grandchild {
font-size: 3rem;
}
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
Top comments (0)