Last updated: March 13, 2026

rem vs em vs px: Which CSS Unit Should You Use?

A complete guide to CSS units. Learn when to use rem, em, or px for typography, spacing, and responsive design.

TL;DR - Quick Recommendations

Use rem for most things

Font sizes, margins, padding, media queries, max-widths. Best for accessibility and scaling.

Use px for precision

Borders, box-shadows, very small values (1-2px), and fixed-size images.

Use em for components

Padding/margin relative to text size within a component, icons next to text.

Quick Comparison

Aspect	rem	em	px
Reference	Root font-size (html)	Parent font-size	Fixed pixel
Scales with	Browser/root settings	Parent element	Never
Accessibility	Excellent	Good	Poor
Predictability	High	Can cascade unexpectedly	Highest
Best for	Typography, spacing, layout	Component-internal scaling	Borders, shadows, small details

remRoot Em - Relative to Root Element

rem stands for "root em" and is relative to the root element's font-size (the <html> element). By default, browsers set this to 16px, so 1rem = 16px.

Example:

/* If root font-size is 16px (default) */
html { font-size: 16px; }

.text {
  font-size: 1rem;     /* = 16px */
  font-size: 1.5rem;   /* = 24px */
  font-size: 0.875rem; /* = 14px */
  margin: 2rem;        /* = 32px */
}

Pros:

+Respects user's browser font-size preference
+Consistent sizing across the entire page
+No cascading issues like em
+Easy to reason about and maintain

Cons:

-Slightly harder mental math than px
-Can't create component-relative sizing

emRelative to Parent Element

em is relative to the font-size of the element's parent (or the element itself for font-size). This creates a cascading relationship that can be powerful but also tricky.

Example:

/* Cascading behavior */
.parent {
  font-size: 20px;
}
.child {
  font-size: 1.5em;    /* = 30px (20 × 1.5) */
  padding: 1em;        /* = 30px (based on own font-size) */
}
.grandchild {
  font-size: 1.5em;    /* = 45px (30 × 1.5) - compounds! */
}

Warning: Cascading Issue

Nested em values compound. A list inside a list inside a list withfont-size: 0.9emwill shrink: 0.9 × 0.9 × 0.9 = 0.73em. This can cause unexpected sizing.

Pros:

+Great for component-internal scaling
+Icons/padding scale with text size
+Perfect for buttons/badges/chips

Cons:

-Can compound unexpectedly
-Harder to debug nested structures
-Less predictable than rem

pxAbsolute Pixels - Fixed Size

px is an absolute unit that represents CSS pixels. It doesn't scale with user preferences or parent elements, making it predictable but less flexible.

Example:

/* Fixed values - never change */
.box {
  border: 1px solid #ccc;   /* borders should be px */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);  /* shadows too */
  border-radius: 8px;
}

/* Not recommended for font-size */
.text {
  font-size: 16px;  /* Won't scale with user preference */
}

Accessibility Concern

When users increase their browser's default font size (a common accessibility setting), px-based font sizes don't change. This can make your site difficult or impossible to read for users with visual impairments.

Pros:

+Most predictable - WYSIWYG
+Easy mental math
+Perfect for fine details (1px border)

Cons:

-Ignores user font-size preferences
-Poor accessibility for font-size
-Doesn't scale responsively

Interactive Demo

Adjust the sliders to see how each unit responds to changes in root and parent font-size.

Root font-size (html): 16px

Default is 16px. Users with vision impairments often set this higher.

Parent font-size: 16px

Affects em units only. Parent could be a heading, button, etc.

1.5rem

Hello!

= 24px

1.5em

Hello!

= 24px

24px

Hello!

= 24px (always)

Notice how rem scales with root font-size, em scales with parent font-size, and px never changes.

When to Use Each Unit

Use rem for:

1.
Font sizes
All text should use rem for accessibility
2.
Margins & padding
Consistent spacing that scales with text
3.
Media queries
@media (min-width: 48rem)
4.
Max-widths
Container widths that scale appropriately
5.
Line heights
Though unitless is often preferred

Use em for:

1.
Button padding
Scales proportionally with button text
2.
Icons next to text
width: 1em matches text height
3.
Component-internal spacing
Margin between icon and label
4.
Typographic elements
First-letter drop caps, inline decorations

Use px for:

1.
Borders
border: 1px solid
2.
Box shadows
Shadow blur and spread values
3.
Very small values
1-2px details that shouldn't scale
4.
Fixed-size images
Logos, icons with specific dimensions
5.
Outline offset
outline-offset: 2px

Real-World Code Examples

Button Component (em for internal sizing)

.button {
  font-size: 1rem;        /* rem: base size scales with root */
  padding: 0.5em 1em;     /* em: scales with button's font-size */
  border: 1px solid;      /* px: thin border shouldn't scale */
  border-radius: 0.25em;  /* em: rounds proportionally */
}

.button-large {
  font-size: 1.25rem;     /* Larger text, padding grows too! */
}

Icon with Text (em for alignment)

.icon-text {
  display: flex;
  align-items: center;
  gap: 0.5em;            /* em: gap scales with text */
}

.icon-text svg {
  width: 1em;            /* em: icon matches text height */
  height: 1em;
}

Card Component (rem for consistency)

.card {
  padding: 1.5rem;           /* rem: consistent spacing */
  border-radius: 0.5rem;     /* rem: consistent rounding */
  border: 1px solid #e5e7eb; /* px: thin border */
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);  /* px: shadow */
}

.card-title {
  font-size: 1.25rem;        /* rem: accessible heading */
  margin-bottom: 0.75rem;    /* rem: consistent spacing */
}

.card-body {
  font-size: 1rem;           /* rem: accessible body text */
}

Frequently Asked Questions

Should I use rem or px for font-size?

Use rem for font-size in most cases. When users change their browser's default font size for accessibility reasons, rem-based font sizes will scale accordingly, while px values stay fixed. This makes your site more accessible to users with visual impairments. Use px only for very specific cases where you need exact pixel precision.

Why is rem better for accessibility?

rem (root em) respects the user's browser font-size preference. Many users with visual impairments increase their default font size in browser settings. When you use rem, your text and spacing scale proportionally with their preference. With px, your design ignores their settings entirely, making your site harder to use for people who need larger text.

When should I use em instead of rem?

Use em when you want an element's size to be relative to its parent's font-size, not the root. This is useful for component-internal scaling - for example, padding on buttons that should grow proportionally when the button text is larger, or icon sizes that should match adjacent text. Em creates a parent-child relationship that rem doesn't provide.

What's the default rem value?

By default, 1rem equals 16px in most browsers. This is because the browser's default root font-size (html element) is 16px. So 1.5rem = 24px, 0.875rem = 14px, and so on. You can change this by setting a different font-size on the html element, though it's recommended to use a percentage (like 62.5% for 10px base) if you need to change it.

How do I convert px to rem?

Divide the pixel value by 16 (or your root font-size). For example: 24px ÷ 16 = 1.5rem, 14px ÷ 16 = 0.875rem, 32px ÷ 16 = 2rem. You can also use Frontend Hero's px to rem converter tool, or set the root font-size to 62.5% (10px) so that 1rem = 10px, making the math easier (24px = 2.4rem).

Inspect any website's CSS units instantly

Frontend Hero's CSS Scanner shows you the exact values used on any element - font sizes, margins, padding, and more. See rem, em, and px values at a glance.

Get Frontend Hero now →

Try the CSS unit converter →

rem vs em vs px: Which CSS Unit Should You Use?

TL;DR - Quick Recommendations

Use rem for most things

Use px for precision

Use em for components

Quick Comparison

remRoot Em - Relative to Root Element

Example:

Pros:

Cons:

emRelative to Parent Element

Example:

Warning: Cascading Issue

Pros:

Cons:

pxAbsolute Pixels - Fixed Size

Example:

Accessibility Concern

Pros:

Cons:

Interactive Demo

1.5rem

1.5em

24px

When to Use Each Unit

Use rem for:

Use em for:

Use px for:

Real-World Code Examples

Button Component (em for internal sizing)

Icon with Text (em for alignment)

Card Component (rem for consistency)

Frequently Asked Questions

More Extension Comparisons

Best Color Pickers

Best CSS Inspectors

Best Page Rulers

Best Screenshot Tools

Best Image Downloaders

Best Font Identifiers

Best Tailwind Tools

Best Palette Extractors

Best Developer Tools

ColorZilla Alternatives

WhatFont Alternatives

CSS Peeper Alternatives

Eye Dropper Alternatives

Site Palette Alternatives

Tailscan Alternatives

ColorZilla vs Eye Dropper

WhatFont vs Fontanello

CSS Peeper vs VisBug

Tailwind vs CSS Modules

Styled Components vs Tailwind

Flexbox vs CSS Grid

Tailwind vs Bootstrap

CSS Scan vs Frontend Hero

Tailscan vs Frontend Hero

For React Developers

For Tailwind Users

For Freelancers

25 Must-Have Extensions

All-in-One Extensions

Too Many Extensions?

Free vs Paid

Animation Libraries

Page Ruler Alternatives

Grid Inspector Alternatives

CSS Scan Alternatives

VisBug Alternatives

GoFullPage Alternatives

Fonts Ninja Alternatives

ColorZilla vs Frontend Hero

CSS Peeper vs Frontend Hero

Tailwind vs Chakra UI

DaisyUI vs shadcn/ui

CSS-in-JS vs Tailwind

Tailwind vs Material UI

2026 Tools Report

2026 Tailwind Report