rem vs em vs px in CSS

rem, em, and px are three common CSS units used for font sizes, spacing, layout, borders, and component sizing. They look simple, but choosing the wrong one can make a design harder to scale, less accessible, or difficult to maintain.

The short version is this: px is fixed, em is relative to the current element font size, and rem is relative to the root font size. Understanding that difference helps you choose the right unit for each job.

What Is px?

The px unit means CSS pixel. It is an absolute CSS unit in normal authoring terms. A value like 16px does not depend on the parent font size.

.badge {
  border-radius: 8px;
  border: 1px solid #d1d5db;
}

Pixels are useful for small visual details such as borders, shadows, fine adjustments, and sometimes fixed icon sizes. They are predictable, but they do not scale based on text size.

What Is em?

The em unit is relative to the font size of the current element. If an element has font-size: 20px, then 1em equals 20px for that element.

.button {
  font-size: 1rem;
  padding: 0.75em 1em;
}

Here the padding scales with the button text size. If the button font size increases, the padding increases too. This is a good use of em because the spacing belongs to the component text.

What Is rem?

The rem unit is relative to the root element font size, usually the html element. In many browsers, the default root font size is 16px, so 1rem often equals 16px unless changed by the user or site CSS.

.card {
  padding: 1.5rem;
  margin-bottom: 2rem;
}

rem is commonly used for typography, spacing, layout gaps, and component padding because it scales consistently from the root instead of compounding through nested elements.

Quick Comparison

Unit	Relative To	Common Use
px	fixed CSS pixel	borders, icons, precise details
em	current element font size	component padding tied to text
rem	root font size	typography, spacing, layout rhythm

None of these units is always best. Good CSS uses each where it makes sense.

em Compounding

The main risk with em is compounding. If nested elements use em for font size, each level can multiply based on its parent.

.parent {
  font-size: 1.2em;
}

.child {
  font-size: 1.2em;
}

The child does not become 1.2 times the root. It becomes 1.2 times the parent, which is already larger. This can create unexpected sizes in deeply nested components.

Why rem Is Popular

rem avoids most compounding problems because every rem value points back to the root font size. This gives consistent scaling across a site.

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1rem;
}

If the user changes browser font settings or the root font size changes, rem-based typography can scale consistently. This is one reason rem is common in design systems.

When to Use px

Use pixels when the value should remain visually precise and not scale with text. Borders are a good example. A 1px border usually should stay thin even if text size changes.

.input {
  border: 1px solid #9ca3af;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
}

Pixels are also common for tiny offsets, hairline separators, and exact raster image dimensions. Avoid using pixels everywhere just because they are familiar.

When to Use rem

Use rem for site-wide typography and spacing that should scale consistently. This includes headings, paragraphs, section spacing, grid gaps, and container padding.

.section {
  padding-block: 4rem;
}

.grid {
  gap: 1.5rem;
}

These values stay connected to the root font size and help the page maintain a consistent rhythm.

When to Use em

Use em when spacing should scale with the component text size. Buttons are the classic example because a larger button label should usually have larger internal padding.

.button {
  font-size: 1rem;
  padding: 0.75em 1.25em;
  border-radius: 0.5em;
}

The padding and border radius scale with the button font size. This makes the component more flexible when creating small, normal, and large button variants.

Accessibility Considerations

Users may increase default font size for readability. rem and em can respond better to those preferences than fixed pixel typography. This does not mean pixels are forbidden, but body text and core spacing should not fight user readability settings.

Avoid setting the root font size to tricks like 62.5 percent only to make rem math easier. It can confuse scaling and assumptions in large projects. Clear values and good tokens are usually better.

Practical Unit Strategy

CSS Need	Recommended Unit
Body text	rem
Headings	rem or clamp with rem
Section spacing	rem
Button padding	em
Borders	px
Fine shadows	px

This strategy gives predictable typography, scalable spacing, and precise visual details.

Root Font Size and rem Math

Most browsers default to a 16px root font size. With that default, 1rem equals 16px, 1.5rem equals 24px, and 2rem equals 32px. But users can change their browser font settings, so do not treat rem as permanently equal to one pixel value.

html {
  font-size: 100%;
}

Keeping the root at 100 percent respects the browser default. If the user increases the default font size for readability, rem-based layouts can scale with that preference.

Unit Math Examples

Value	If root is 16px	Use Case
0.5rem	8px	small gap
1rem	16px	body text
1.5rem	24px	card padding
2rem	32px	section heading
4rem	64px	large section spacing

These conversions are only examples. The main benefit of rem is not mental math. The benefit is consistent scaling from one root value.

Line Height and Unitless Values

Line height is often best written as a unitless number. A unitless value multiplies the current font size and inherits more predictably.

body {
  font-size: 1rem;
  line-height: 1.6;
}

This means the line height is 1.6 times the current font size. It scales naturally when text size changes. Fixed pixel line heights can become too tight when font size increases.

Design Tokens with Units

Large projects often store spacing and typography values in custom properties. This makes unit choices consistent across the site.

:root {
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --radius-sm: 4px;
}

.card {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}

The spacing tokens use rem because they should scale with the root. The small radius uses px because it is a precise visual detail.

em for Media Query Breakpoints

Some developers use em for media query breakpoints because it can respond better to browser font-size changes. Many teams still use px because it is familiar and easy to compare with design files.

@media (min-width: 48em) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

If the root is 16px, 48em is roughly 768px. The important rule is consistency: choose a breakpoint unit strategy and document it for the project.

Spacing That Scales with Text

Some spacing should scale with the component text, and some spacing should scale with the site rhythm. This is where em and rem can work together.

.alert {
  font-size: 1rem;
  padding: 1em;
  margin-block: 1.5rem;
}

The alert padding uses em because it belongs to the alert text size. The outside margin uses rem because it belongs to the page spacing rhythm. This gives a component that scales internally while still fitting the site layout system.

Nested Components

Nested components are where unit decisions become visible. If a card uses rem for its main padding, the spacing stays consistent across the page. If a button inside that card uses em padding, the button can scale with its own label size.

.card {
  padding: 1.5rem;
}

.card .button-small {
  font-size: 0.875rem;
  padding: 0.65em 1em;
}

The card spacing follows the page system, while the small button keeps proportions based on its smaller text. This is a practical way to avoid random unit mixing.

Debugging Unit Problems

When sizes feel inconsistent, inspect the computed value in browser developer tools. It will show what a rem or em value becomes in pixels after calculation. This is the fastest way to understand unexpected spacing or text size.

If an em value looks too large, check the current element font size and the parent font size. If a rem value looks wrong everywhere, check the root font size and any global typography rules.

Once the source of the calculation is clear, the correct unit choice becomes much easier.

Use the unit that matches the relationship you want the size to follow.

That rule prevents most unit confusion.

Consistent unit choices make design systems easier to scale.

Document the pattern clearly.

Keep the system clear.

Using Units with clamp()

Responsive typography often combines rem with viewport units inside clamp().

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

The heading never goes below 2rem, scales with viewport width in the middle, and never exceeds 4rem. This is better than many separate font-size breakpoints.

Common rem, em and px Mistakes

• Using px for all typography and ignoring user font preferences.
• Using em for nested font sizes and getting unexpected compounding.
• Using rem for button padding when em would scale with the button text better.
• Changing html font-size only to make calculations easier.
• Mixing units randomly without a system.
• Assuming one unit is always correct for every CSS property.

rem vs em vs px in CSS FAQ

What is the difference between rem and em?

rem is relative to the root font size, while em is relative to the current element font size.

Is rem better than px?

rem is usually better for scalable typography and spacing, while px is useful for precise details like borders.

When should I use em?

Use em when spacing should scale with the current element text size, such as button padding.

Should I avoid px completely?

No. Use px for precise visual details, but avoid relying on fixed pixels for all text and layout spacing.

---