What are the em and rem units in CSS?
Introduction
This is my first post in a series about topics covered in Josh Comeau's CSS for JavaScript Developers course. These posts will be brief, polished versions of my notes. I'll write about new things I learned or deepen my understanding of something already familiar to me.
In this post, we'll explore the em and rem units in CSS, covered in module 0 of the course.
Ems
An em is a unit relative to the font-size of the current element. When used for the font-size property, an em is relative to the font-size of the parent element.
For example, if an element has a font-size of 16px and padding of 2em, the element's padding will be 32 pixels (16 x 2):
If an element has a font-size of 16px and its child has a font-size of 1.5em, the child's font-size will be 24 pixels (16 x 1.5):
If the element's font-size is not set, the closest ancestor with a font-size gets used. Note that browsers have a default font size of 16 pixels out of the box, so 1em is generally equal to 16 pixels.
ems are useful when scaling some property with the element's font-size. Consider the following .box class:
.box {
width: 3em;
height: 3em;
padding: 2em;
}
To create small, medium, and large boxes with these same proportions, we can alter the font-size of each .box:
The compounding problem
Because ems are relative, the value of an em in descendant elements can compound. This can cause unexpected layout changes when a font size change ripples through descendant elements. For instance, if an element has a font-size of 2em and its child has a font-size of 1.5em, the child's font size is 48 pixels (16 x 2 x 1.5):
Rems
A rem, short for "root em," is like an em, but its value is relative to the root <html> tag. So, if the root font-size is 16 pixels, a value of 2rem is 32 pixels at every level in the DOM:
rems are always relative to the root element, so there isn't an issue with compounding. This makes them more predictable and consistent than ems:
We can use rems to scale values globally by only changing the root font-size. The following article has many font sizes specified in rems, and we can use a media query to change all the sizes by setting the root font-size:
Em and rem a11y benefits
Both ems and rems help make our sites more accessible by respecting the user's default font size, set in their browser's settings. Using a fixed unit such as px will override this setting, but em and rem will scale it. This makes rems particularly good for typography because we can scale the user's font size preference globally without em interference.
Summary
em and rem are relative units. An em is generally relative to the current element's font-size; when used for the font-size property, it's relative to its parent's font-size. A rem is relative to the root <html> element's font-size, which is usually 16 pixels. Take caution when using ems because of their compounding effect; rems are more predictable and increase accessibility by respecting the user's default font size.
Let's connect
Thanks for reading! If you enjoyed this post, connect with me on LinkedIn, GitHub, and Twitter!