This content originally appeared on Go Make Things and was authored by Go Make Things
Today, I wanted to talk about why I still think em units are superior to rem, and why Kelp uses them. Let’s dig in!
Relative units
Relative units are ways to define size in CSS that’s relative to the current element (or the parent it inherits from) rather than being an absolute size.
For example, 16px is a fixed unit, and is always 16px regardless of what element you use it on.
/* Both have a bottom margin of 16px */
p,
h2 {
margin-block-end: 16px;
}Relative units express their size relative to some other element, often the element they’re applied to.
For example, em units is equal to the font-size of the element it’s applied to times the number of units.
In this example, the p element has a bottom margin of 16px, while the h2 element has a bottom margin of 20px.
p {
font-size: 16px;
}
h2 {
font-size: 20px;
}
/* Both have a bottom margin of 16px */
p,
h2 {
margin-block-end: 1em;
}em units vs. rem units
The biggest difference between em units and rem units is that em units are relative to the element they’re applied to, while rem units are relative to the :root (or html element).
Here, the bottom margin for both p and h2 elements is 16px, because the rem unit math is based on the html element.
html {
font-size: 16px;
}
h2 {
font-size: 20px;
}
/* Both have a bottom margin of 16px */
p,
h2 {
margin-block-end: 1rem;
}A lot of developers prefer rem units, because the value associated with a unit is the same regardless of what element it’s applied to.
But in my opinion, this is also its greatest weakness…
em units FTW!
Kelp, my UI library for people who love HTML, uses em units for everything.
This allows you to scale things like margins and padding proportionally with font-size changes. It also makes it really easy to adjust the size of all elements inside a parent element.
With em units, instead of doing this…
<div class="callout">
<h2 class="size-xl">Hello world!</h2>
<p class="size-xl">How are you today?</p>
<button class="size-xl">Say hi</button>
</div>You can do this…
<div class="callout size-xl">
<h2>Hello world!</h2>
<p>How are you today?</p>
<button>Say hi</button>
</div>And all of the elements inside the .callout, as well as the border radius, padding, and margins, will scale up proportionately.
Whereas with rem units, all of the elements inside the .callout would be the exact same size, rather than proportionately larger.
The one gotcha
Unlike rem units, em units will compound, so you need to be mindful not to accidentally nest classes with em unit adjustments.
<!-- The <h2> element will get bigger twice -->
<div class="callout size-xl">
<h2 class="size-2xl">Hello world!</h2>
</div>This is primarily why folks have historically struggled with em units. But to me, that’s also their biggest superpower, and easily mitigated.
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-09-08T14:30:00+00:00) Why I still prefer ems over rems. Retrieved from https://www.scien.cx/2025/09/08/why-i-still-prefer-ems-over-rems/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.