BLOG POSTS

MangoHost Blog / CSS rem vs em Units – Difference and Best Use Cases

CSS rem vs em Units – Difference and Best Use Cases

CSS rem and em units are relative sizing units that make web layouts more flexible and maintainable than fixed pixel values, but choosing between them can be tricky since both scale with font sizes yet behave differently in nested elements. Getting this right matters because it affects your site’s responsiveness, accessibility for users who adjust their browser font sizes, and how maintainable your CSS codebase becomes over time. This guide breaks down exactly how rem and em work under the hood, when to use each one, and the practical gotchas that’ll save you debugging headaches.

How rem and em Units Work

Both rem and em are relative units that calculate sizes based on font-size values, but they reference different elements in your DOM tree. Understanding this difference is crucial for predictable layouts.

The em unit is relative to the font-size of its parent element. If a parent has font-size: 20px, then 1em equals 20px for child elements. This creates a cascading effect where nested elements can compound sizing changes.

.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px (20px × 1.5) */
  margin: 1em;      /* 30px (based on child's computed font-size) */
}

.grandchild {
  font-size: 1.2em; /* 36px (30px × 1.2) - compounding effect */
}

The rem unit (root em) is always relative to the root element’s font-size, typically the <html> element. This eliminates the compounding behavior and provides consistent reference point throughout your stylesheet.

html {
  font-size: 16px; /* Root font-size */
}

.component-one {
  font-size: 1.5rem; /* Always 24px (16px × 1.5) */
  padding: 1rem;     /* Always 16px */
}

.nested-component {
  font-size: 1.2rem; /* Always 19.2px (16px × 1.2) */
  margin: 2rem;      /* Always 32px */
}

Step-by-Step Implementation Guide

Setting up a robust rem/em strategy starts with establishing your root font-size and scaling system. Here’s a practical approach that works well for most projects:

1. Set Your Root Font-Size

/* Option 1: Keep browser default (usually 16px) */
html {
  font-size: 100%;
}

/* Option 2: Set explicit pixel value */
html {
  font-size: 16px;
}

/* Option 3: Use percentage for easier calculations */
html {
  font-size: 62.5%; /* Makes 1rem = 10px if browser default is 16px */
}

2. Create a Consistent Scale

Define your sizing scale using CSS custom properties for consistency:

:root {
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
}

3. Apply Units Strategically

/* Use rem for components that should scale with root font-size */
.card {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-base);
}

/* Use em for elements that should scale with their context */
.button {
  padding: 0.5em 1em; /* Scales with button's font-size */
  border-radius: 0.25em;
}

.button--large {
  font-size: 1.25rem;
  /* Padding automatically becomes larger due to em units */
}

.button--small {
  font-size: 0.875rem;
  /* Padding automatically becomes smaller due to em units */
}

Real-World Examples and Use Cases

Here are practical scenarios where choosing the right unit makes a significant difference:

Navigation Menu with Responsive Typography

.nav {
  font-size: 1rem; /* Base size scales with user preferences */
}

.nav__item {
  padding: 0.75em 1.5em; /* Scales with nav font-size */
  margin-right: 0.5em;
}

.nav__dropdown {
  font-size: 0.9em; /* Relative to parent nav item */
  margin-top: 0.25em;
}

@media (max-width: 768px) {
  .nav {
    font-size: 0.875rem; /* All em-based spacing scales down */
  }
}

Modal Component System

.modal {
  width: 90vw;
  max-width: 32rem; /* Fixed maximum size regardless of content */
  padding: 2rem;
  margin: 2rem auto;
}

.modal__header {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.modal__content p {
  margin-bottom: 1em; /* Scales with paragraph font-size */
  line-height: 1.6em;
}

.modal__actions {
  margin-top: 2rem; /* Consistent spacing */
  gap: 1rem;
}

Form Elements with Consistent Scaling

.form-field {
  margin-bottom: 1.5rem; /* Consistent field spacing */
}

.form-field__label {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.form-field__input {
  font-size: 1rem;
  padding: 0.75em 1em; /* Scales with input font-size */
  border-radius: 0.25em;
}

.form-field__help {
  font-size: 0.75em; /* Relative to input size */
  margin-top: 0.25em;
}

Performance and Browser Support Comparison

Aspect	rem Units	em Units	px Units
Browser Support	IE9+ (excellent)	All browsers (excellent)	All browsers (excellent)
Calculation Complexity	Simple (always root-based)	Complex (parent-dependent)	None
Accessibility	Excellent (respects user font-size)	Excellent (respects user font-size)	Poor (ignores user preferences)
Maintenance	Easy (predictable scaling)	Moderate (context-dependent)	Difficult (fixed values)
Performance	Good (single calculation)	Good (may require DOM traversal)	Best (no calculation)

Common Pitfalls and Troubleshooting

Even experienced developers run into these issues when working with relative units. Here’s how to avoid and fix them:

The Compounding em Problem

Nested elements with em units can spiral out of control:

/* Problem: Compounding font sizes */
.sidebar {
  font-size: 0.9em;
}

.sidebar .widget {
  font-size: 0.9em; /* Now 0.81em relative to root */
}

.sidebar .widget .title {
  font-size: 1.2em; /* 0.972em relative to root - unpredictable */
}

/* Solution: Use rem for font-sizes, em for spacing */
.sidebar {
  font-size: 0.9rem;
}

.sidebar .widget {
  font-size: 0.9rem; /* Predictable 0.9rem */
}

.sidebar .widget .title {
  font-size: 1.2rem; /* Always 1.2rem */
  margin-bottom: 0.5em; /* Scales with title size */
}

Root Font-Size Changes Breaking Layouts

/* Problem: Everything breaks when root size changes */
html {
  font-size: 14px; /* Changed from 16px */
}

.fixed-width-component {
  width: 20rem; /* Now 280px instead of 320px */
}

/* Solution: Use rem for most things, but px for critical dimensions */
.fixed-width-component {
  width: 320px; /* Keep critical layouts stable */
  padding: 1rem; /* Allow internal spacing to scale */
  font-size: 1rem; /* Typography scales with user preferences */
}

Media Query Breakpoint Confusion

/* Problem: rem-based breakpoints can shift unexpectedly */
@media (max-width: 48rem) { /* 768px at 16px root, but 672px at 14px root */
  .responsive-grid {
    grid-template-columns: 1fr;
  }
}

/* Solution: Use px for breakpoints, rem for content */
@media (max-width: 768px) {
  .responsive-grid {
    grid-template-columns: 1fr;
    gap: 1rem; /* Content spacing still flexible */
  }
}

Best Practices and Decision Framework

Use this decision tree to choose the right unit for your specific use case:

Use rem when:
- Setting font-sizes for consistent typography scale
- Defining component dimensions that should scale with user preferences
- Creating spacing systems (margins, padding) for layout consistency
- Setting widths/heights for containers and major layout elements
Use em when:
- Creating padding/margins that should scale with the element’s font-size
- Defining line-height and letter-spacing relative to text size
- Building component variations where internal spacing scales together
- Setting border-radius that should proportionally match element size
Stick with px when:
- Defining media query breakpoints
- Setting border widths (usually 1px)
- Creating precise alignments or critical fixed dimensions
- Working with box-shadows and other decorative effects

Advanced Pattern: Hybrid Approach

The most maintainable approach combines all three units strategically:

/* Typography and major spacing: rem */
.article {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 45rem;
}

/* Internal component spacing: em */
.article h2 {
  font-size: 1.5rem;
  margin-top: 2em;    /* Scales with heading size */
  margin-bottom: 0.5em;
}

.article p {
  margin-bottom: 1em; /* Scales with paragraph size */
}

/* Decorative and precise elements: px */
.article {
  border-left: 4px solid #3498db;
  padding-left: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Responsive breakpoints: px */
@media (max-width: 768px) {
  .article {
    font-size: 1rem;     /* Smaller base size */
    padding-left: 1rem;  /* Proportional padding */
    margin-bottom: 1.5rem;
  }
}

For comprehensive documentation on CSS units and their behavior, check the MDN CSS length reference and the W3C CSS Values specification.

The key to successful rem/em usage is consistency within your team and project. Document your unit choices, create reusable spacing scales, and test your layouts with different browser font-size settings to ensure they work well for all users. Most importantly, remember that these units exist to make your CSS more maintainable and accessible – if you find yourself fighting against them, step back and reconsider your approach.

This article incorporates information and material from various online sources. We acknowledge and appreciate the work of all original authors, publishers, and websites. While every effort has been made to appropriately credit the source material, any unintentional oversight or omission does not constitute a copyright infringement. All trademarks, logos, and images mentioned are the property of their respective owners. If you believe that any content used in this article infringes upon your copyright, please contact us immediately for review and prompt action.

This article is intended for informational and educational purposes only and does not infringe on the rights of the copyright owners. If any copyrighted material has been used without proper credit or in violation of copyright laws, it is unintentional and we will rectify it promptly upon notification. Please note that the republishing, redistribution, or reproduction of part or all of the contents in any form is prohibited without express written permission from the author and website owner. For permissions or further inquiries, please contact us.