🔤 Relative Units in CSS — em & rem Explained

🌐 What Are Relative Units?

Relative units scale based on another value — usually the font size of an element or the root HTML element. They make layouts more flexible, scalable, and responsive than fixed units like px.

>>“em and rem are the foundation of responsive typography and spacing.”

Note

💡 Use relative units for web layouts → They adapt beautifully across devices.

🅰️ em — Relative to Parent Font Size

The em unit scales based on the font size of the current element, which often inherits from its parent. This means em composes, so nested elements multiply in size.

📌 How em Works

em Basic Example

.parent {
  font-size: 20px;
}

.child {
  font-size: 2em; /* = 40px */
}

2em = 2 × parent’s font-size (20px) = 40px.

🧪 Example — Nested em Multiplication

Nested em

.box {
  font-size: 20px;
}

.box .inner {
  font-size: 1.5em; /* = 30px */
}

.box .inner .deep {
  font-size: 1.5em; /* = 45px (1.5 × 30px) */
}

Note

⚠️ em values compound — can lead to unexpectedly large sizes.

🎯 When to Use em

  • Spacing inside components (padding, margin)
  • Scalable button padding
  • Layouts where spacing should follow font-size
  • Nested elements that scale relative to their parent

📦 Example — Button Scaling with em

Button Example

button {
  font-size: 1rem;  /* text size */
  padding: 0.75em 1.5em; /* padding grows along with text */
}

Padding grows automatically if the button font increases.

🅱️ rem — Relative to Root (html) Font Size

The rem unit is based on the root element’s font-size(usually defined on html ).

>>“rem ensures consistent sizing throughout the site — unlike em which compounds.”

📌 How rem Works

rem Example

html {
  font-size: 16px;
}

.title {
  font-size: 2rem; /* = 32px */
}

.subtitle {
  margin-bottom: 1.5rem; /* = 24px */
}

rem remains consistent, even inside deep nesting.

🎯 When to Use rem

  • Global typography
  • Consistent spacing system
  • Design systems and UI libraries
  • Responsive scaling (changing root font size)

📱 Responsive Typography with rem

Responsive rem

html {
  font-size: 16px;
}

@media (max-width: 600px) {
  html {
    font-size: 14px; /* Smaller screens = smaller rem */
  }
}

Every rem-based measurement now scales automatically.

🔍 em vs rem — Quick Comparison

Featureemrem
Relative ToParent font-sizeRoot font-size
Nesting behaviorCompoundsStays consistent
Best UseComponent spacingTypography & layout scale
PredictabilityLess predictableMore predictable

🧪 Practical Example — Navbar Using rem & Buttons Using em

Practical Layout

html { font-size: 16px; }

.navbar {
  padding: 1.5rem;
}

.navbar h1 {
  font-size: 2rem;
}

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

Navbar spacing remains consistent site-wide (rem),
Button spacing grows with its own font size (em).

⚠️ Common Mistakes

  • ❌ Using em for global typography → results in compounding issues
  • ❌ Using rem for component padding → breaks scaling inside components
  • ❌ Forgetting that browser default font-size = 16px
  • ❌ Changing html font-size too aggressively → accessibility issues

Note

💡 Best practice:
✔ Use rem for typography & layout spacing
✔ Use em for internal component spacing

🔥 Summary

em and rem are powerful units for responsive, scalable CSS. Understanding their differences helps you build predictable and flexible components while maintaining consistent typography.

>>“Use rem for structure. Use em for components. Together they make perfect harmony.”

Learn more →MDN Docs 📘