Learn
EM vs REM in CSS: When to Use Each Unit (With Converter)
REM is relative to the root (html) font size. EM is relative to the parent element's font size. Use REM for global sizing consistency. Use EM for component-level scaling.
Overview
REM is relative to the root (html) font size. EM is relative to the parent element's font size. Use REM for global sizing consistency. Use EM for component-level scaling.
Quick Comparison
| Attribute | EM | REM |
|---|---|---|
| Relative to | Parent element font size | Root element font size |
| Cascading | Yes (compounds with nesting) | No (always relative to root) |
| Default base | Inherited font size | 16px (browser default) |
| Best for | Component-internal spacing | Font sizes, global spacing |
| Predictability | Lower (depends on context) | Higher (single reference point) |
What Is EM?
The em unit is relative to the font size of the element itself (for properties like padding and margin) or the parent element's font size (for the font-size property). Because em values compound when elements are nested, sizing can become unpredictable in deep component trees.
For example, if a parent has font-size: 20px and a child has font-size: 1.5em, the child renders at 30px. If that child also contains an element with font-size: 1.5em, it renders at 45px.
What Is REM?
The rem unit (root em) is always relative to the root element's font size (<html>), which defaults to 16px in all major browsers. Unlike em, rem does not compound with nesting. 1.5rem is always 24px (assuming the default root), regardless of where it appears in the DOM tree. This root-relative sizing is what makes rem predictable across a fluid type scale.
Code Examples
/* REM for font sizes - predictable */
h1 font-size: 2rem; /* 32px */
h2 font-size: 1.5rem; /* 24px */
p font-size: 1rem; /* 16px */
/* EM for component spacing - proportional */
.button
font-size: 1rem;
padding: 0.5em 1em; /* scales with button text size */
.button--large
font-size: 1.25rem;
/* padding automatically scales to 10px 20px */
/* Common 62.5% trick for easier rem math */
html font-size: 62.5%; /* 1rem = 10px */
body font-size: 1.6rem; /* restore 16px base */Best Practices
Convert between pixels and rem or em units instantly with our PX to REM and PX to EM converters.
- Use rem for font sizes to maintain a consistent typographic scale across your entire site.
- Use rem for layout spacing (margins, grid gaps) for predictable, global consistency.
- Use em for component padding when you want spacing to scale proportionally with the component's own font size.
- Avoid deep em nesting - compounding makes values hard to predict and debug.
- Set a clear root font size - either keep the browser default (16px) or use the 62.5% trick for easier math.
EM, REM, and Browser Accessibility
User-controlled browser font size is the key accessibility reason to prefer rem over px. Many users with low vision increase their browser's base font size above 16px through browser settings or operating system accessibility features. Accessible font sizing starts with choosing the right CSS unit.
If you set all your font sizes in px, they are fixed regardless of the user's preference. If you use rem, your font sizes scale automatically when the user increases their browser base size. This is a key accessibility benefit.
The WCAG 2.1 Success Criterion 1.4.4 (Resize Text) requires that text can be resized up to 200% without loss of content or functionality. Using rem for font sizes makes this trivial to satisfy. Using px for font sizes means you need to test and verify that zoom does not break your layout.
For this reason, design system typography guidelines broadly recommend rem for all typographic sizes and font-size-dependent spacing. The em unit can still be used safely for component-internal padding where scaling with font size is the intended behavior.
Quick Decision Guide: EM vs REM vs PX
Choosing between em, rem, and px comes down to the scope of the value and whether you want it to respond to font-size changes. Em gives you parent-relative sizing; rem gives you root-relative sizing; px gives you a fixed value that ignores user preferences.
| What you are sizing | Recommended unit | Reason |
|---|---|---|
| Body and heading font sizes | rem | Consistent scale, responds to user preferences |
| Button or component padding | em | Scales proportionally with component font size |
| Border widths | px | Should not scale with font size |
| Layout grid gaps | rem | Consistent spacing regardless of context |
| Line height | unitless (e.g. 1.5) | Scales with local font size automatically |
| Media query breakpoints | rem | Responds to user font size changes |
Practical Quality Notes for EM vs REM in CSS
This guide is most helpful when the result is tied to a real workflow, not treated as a loose number. For EM vs REM in CSS, verify the CSS reference value, the component context, and the viewport or font-size setting used by the layout. That context prevents the common mistake of copying a pixel value into a print, web, or CSS workflow where the reference size is different.
EM vs REM in CSS depends on the root font size, commonly 16px unless the site changes html font-size. If the number looks unexpectedly large or small, check the unit direction first, then check the DPI, base font size, viewport width, or physical measurement that controls the calculation.
A good review pass for EM vs REM in CSS is simple: calculate once, compare against a known example, and preview the final output at the size people will actually see. REM is relative to the root (html) font size. EM is relative to the parent element's font size. Use REM for global sizing consistency. Use EM for component-level scaling.
Checks Before You Use the Result
- Confirm that EM vs REM in CSS is using the same input unit your source file or design brief uses.
- Save the DPI, viewport, or font-size setting next to the final EM vs REM in CSS value so another person can reproduce it.
- Preview the EM vs REM in CSS output on the target medium before sending it to print, publishing it, or adding it to CSS.
- Recalculate EM vs REM in CSS after resizing, cropping, changing aspect ratio, or changing the root font-size or viewport assumption.
When the Number Needs a Second Look
Recheck the result if the project moves from screen to print, from desktop to mobile, from one social platform placement to another, or from a draft export to a production file. Small context changes can make a correct EM vs REM in CSS answer wrong for the final job.
Sources
Reference Sources
These external references support the page's conversion formulas, resolution guidance, and unit explanations.
w3.org
W3C: CSS Values and Units Module Level 4
Specification covering absolute lengths and resolution units such as px, in, cm, mm, pt, and dpi.
Visit source
developer.mozilla.org
MDN: CSS values and units
Reference guide for CSS measurement units and how browsers interpret physical and relative sizes.
Visit source
developer.mozilla.org
MDN: <resolution>
Reference for resolution units including dpi, dppx, and dpcm used in screen and print discussions.
Visit source
Frequently Asked Questions
Em is relative to the parent element's font size. Rem is relative to the root (html) element's font size. Use rem for global consistency -- it won't compound through nested elements. Use em for component-level scaling where children should scale with their parent.
Rem for most font sizes. It gives global consistency and respects user browser preferences. Em is useful for specific component patterns where you want child elements to scale automatically when the component's font size changes.
1em equals the parent element's font size in pixels. If the parent is 16px: 1em = 16px. If the parent is 20px: 1em = 20px. Top-level 1em is typically 16px (browser default), but this changes inside nested elements.
Yes. A common pattern is rem for font sizes (global consistency) and em for component-internal spacing like padding and margins (local proportionality). This gives you both predictable sizing and proportional components.