Both rem and em are relative CSS units, but they behave very differently. Understanding the difference is essential for writing clean, scalable, and accessible CSS.
What is EM?
em is relative to a font size close to the element itself. When used on the font-size property, it refers to the parent's font size: if the parent has a font size of 20px, then font-size: 1em gives the element 20px. When used on any other property — padding, margin, width, border-radius — it refers to the element's own computed font size. (For a full walkthrough of that rule, see what is em in CSS.)
This makes EM very flexible but also unpredictable when you have deeply nested elements, because EM values compound. Say a <div> has font-size: 20px, and a nested <p> inside it sets font-size: 1.5em — that paragraph renders at 30px. Nest another element inside that paragraph with font-size: 1.5em, and it now calculates 1.5× of 30px, not 1.5× of the original 20px, landing at 45px. Three or four levels of nesting like this, and font sizes balloon in ways that are hard to trace back to a single source.
What is REM?
rem stands for Root EM. It is always relative to the font size of the <html> root element — regardless of how deeply nested the element is. By default, 1rem = 16px. That same three-level-deep paragraph, set to 1.5rem instead, is always 24px, no matter how many parent elements wrap around it.
REM vs EM at a Glance
| rem | em | |
|---|---|---|
Reference for font-size | Root (html) font size | Parent's font size |
| Reference for other properties | Root font size | The element's own font size |
| Compounds when nested? | No | Yes, for font-size |
| Default value of 1 unit | 16px | Depends on context |
| Follows user's default font size? | Yes | Yes, unless an ancestor uses px |
| Best for | Type scale, page spacing, layout | Component internals, icons, letter-spacing |
The Same Component, Two Ways
Here is a callout box written with each unit, placed inside a sidebar whose font size is 0.875rem (14px at the default root).
/* Version A: rem */
.callout { font-size: 1rem; padding: 1rem; }
.callout h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
/* Version B: em */
.callout { font-size: 1em; padding: 1em; }
.callout h3 { font-size: 1.25em; margin-bottom: 0.5em; }| Value | Version A (rem) | Version B (em) in a 14px sidebar |
|---|---|---|
| Callout text | 16px | 14px |
| Callout padding | 16px | 14px |
| Heading size | 20px | 17.5px |
| Heading margin | 8px | 8.75px (0.5 × 17.5px) |
Version A looks identical everywhere on the page. Version B adapts to its surroundings: it shrinks to fit the smaller sidebar text and would grow inside a larger hero section. Neither is wrong — the question is which behaviour the component needs.
Why Accessibility Favors REM
Both units respond when a user increases their browser's default font size in accessibility settings, but rem does it more predictably. Because every rem value traces back to one root number, increasing that root size scales your entire layout proportionally. Em values also scale, because they chain back to the root through each ancestor — but only if every ancestor in that chain is also relative. A single wrapper with font-size: 14px cuts the chain, and every em value inside it stops responding to the user's preference. That kind of break is easy to introduce and hard to spot in testing, which is why rem is the safer default.
How the Root Font Size Affects Both
Whatever you set on html becomes 1rem and the starting point for every em chain. Use a percentage, not px, so the user's setting still applies:
html { font-size: 100%; } /* 1rem = user's default, usually 16px */
html { font-size: 62.5%; } /* 1rem = 10px at the default */
html { font-size: 16px; } /* avoid: ignores the user's setting */With the 62.5% approach, remember to set the body back to a readable size, e.g. body { font-size: 1.6rem; }, or any text without an explicit size will render at 10px.
Which Should You Use?
Use REM for site-wide typography and spacing — it's what most CSS frameworks and design systems default to, for good reason. Use EM when you specifically want an element to scale relative to its own text size, such as icon sizing inside a button: font-size: 1.2em on an icon keeps it proportional to whatever size that particular button happens to be, without setting it explicitly for every button variant.
A practical pattern many teams use: set font-size in rem everywhere, and reserve em only for component-internal spacing that should scale with that component's own font size — padding on a button, or the gap between an icon and its label.
.tag {
font-size: 0.875rem; /* 14px, predictable */
padding: 0.25em 0.75em; /* 3.5px 10.5px, scales with the tag */
border-radius: 1em; /* pill shape at any size */
}If you are also weighing up whether px still has a place, our PX vs REM guide covers borders, shadows and breakpoints.
Common Mistakes
- Using em for font-size on reusable, nestable elements such as list items or comment threads — sizes compound with every level.
- Converting em with the wrong base. 1.5em is only 24px when the reference font size is 16px. Check the computed font size in DevTools first.
- Expecting rem in media queries to follow your
htmlfont size. Both rem and em in media queries use the browser's initial font size, not your stylesheet's root value. - Mixing units in one component without a reason, which makes it hard for the next developer to predict how it scales.
Frequently Asked Questions
Is rem supported in all browsers?
Yes. Rem has been supported in every major browser for many years, including all current versions of Chrome, Firefox, Safari and Edge. There is no need for px fallbacks in modern projects.
Do rem and em give the same result at the top level?
For an element whose parent is the html element (or whose ancestors have not changed the font size), 1em and 1rem resolve to the same value. They only diverge once an ancestor sets a different font size.
Can I convert em directly to rem?
Only if you know the reference font size. Convert the em value to px first (em × context font size), then divide by the root font size. For example, 2em in a 14px context is 28px, which is 1.75rem at a 16px root.
Should line-height use rem or em?
Usually neither. A unitless line-height like 1.5 scales with each element's own font size and avoids inheritance problems that fixed lengths can cause.
Try It Yourself
Want to convert between the two without doing the math by hand? Use our PX to REM converter as a starting point for building a consistent type scale, the PX to EM converter for component-level values, and the REM to PX converter to check what a rem value renders at.