02-cssTermsLevel_08rem vs em

rem vs em

rem vs em

Level 8 — Responsive Design & Units The modern, accessible units used for typography and spacing, which scale relative to the font-size of the document.

1. Prerequisites

2. Term Category

CSS Measurement Unit (Universal Modern Standard .): rem vs em is a fundamental concept in this technology stack. Level 8 — Responsive Design & Units

3. Explanation

(1) Design Motivation — "Why did we design this?"

Historically, developers used Pixels (px) for everything. The problem? Pixels are fixed. If a visually impaired user goes into their browser settings and changes their default text size from 16px to 24px so they can read better, a website built with hardcoded 14px fonts will ignore their settings, ruining the accessibility. The W3C created rem (Root EM) and em to solve this. They are multipliers. By default, all browsers have a "Root" font size of 16px.

  • 1rem = 1 * 16px = 16px.
  • 2rem = 2 * 16px = 32px. If the visually impaired user changes their browser root to 24px, your 2rem title instantly scales up to 48px, respecting their needs! You should use rem instead of px for almost everything in modern CSS.

(2) The Difference: rem vs em

  • rem (Root EM): Calculates its math based strictly on the Root (the <html> tag). It is consistent and safe. 1rem is always 16px everywhere on the page.
  • em (Local EM): Calculates its math based on its immediate Parent Container. This is powerful, but extremely dangerous because it compounds.

(3) Code Examples

The Safe Way (rem)

/* Assuming the browser default root is 16px */
h1 {
  /* 3 * 16px = 48px */
  font-size: 3rem; 
}

p {
  /* 1 * 16px = 16px */
  font-size: 1rem;
}

The Danger of em

.parent {
  font-size: 20px;
}

.child {
  /* The child looks at its parent (20px). 
     2 * 20px = 40px! */
  font-size: 2em; 
}

4. Common Mistakes & Pitfalls

Mistake 1: The em Snowball Effect

The mistake: Using em for font sizes in a deeply nested HTML list.

Why it's wrong: Because em looks at its parent, it multiplies exponentially. If <ul> is 2em (32px), and an <li> inside it is 2em… the <li> calculates 2 * 32px = 64px! If there is a sub-list inside that, it becomes 128px! The text snowballs out of control. Golden Rule: NEVER use em for font-size. Always use rem for typography.

Mistake 2: Using px for spacing

The mistake: Using padding: 20px; on a button.

Why it's wrong: If a user scales up their font size to 32px, but the padding is locked at 20px, the giant text will burst out of the small button! Solution: Use em for padding! If you set a button to padding: 1em;, the padding will dynamically grow to perfectly wrap the text, no matter how big the text gets. (This is the one scenario where em is better than rem!).

Mistake 3: Using em for Padding/Margin Causing Compound Scaling Bugs inside Nested Containers

The mistake: Setting padding: 2em; font-size: 1.5em; on multi-nested card containers.

Why it's wrong: em units calculate relative to the current element's font size (or parent font size). Nesting elements with em units causes font size and padding to compound exponentially.

Incorrect:

div { font-size: 1.2em; padding: 1.5em; } /* ❌ Compounds size when nested! */

Fix:

div { font-size: 1.2rem; padding: 1.5rem; } /* rem calculates against root 16px font size */

Mistake 4: Overriding html { font-size: 16px; } in Pixels Destroying User Accessibility Zoom Settings

The mistake: Hardcoding html { font-size: 16px; } in CSS.

Why it's wrong: Hardcoding root font-size in px overrides user browser accessibility font preferences. Use html { font-size: 100%; } to preserve root responsiveness.

Incorrect:

html { font-size: 16px; } /* ❌ Overrides user browser accessibility settings! */

Fix:

html { font-size: 100%; } /* Preserves user-agent 16px base font scaling */

5. Practice Exercises

Exercise 1: Building Scalable Responsive Component Architecture using rem for Layout and em for Local Padding

Scenario: An author uses rem for global typography and page layout spacing, and em for component-relative button padding.

Requirements:

  1. Set body { font-size: 1rem; }.
  2. Apply padding: 0.5em 1em to button.
  3. Demonstrate scalable button sizes.
Answer

Implementation

html {
  font-size: 100%;             /* Root baseline: 16px default */
}

/* Component Button: Uses em for padding so padding scales with button font-size! */
.btn {
  font-size: 1rem;            /* 16px default */
  padding: 0.5em 1em;         /* 8px top/bottom, 16px left/right */
  border-radius: 0.25em;
  background-color: #2563eb;
  color: #ffffff;
}

/* Large Button Variant: Scaling font-size automatically scales em padding! */
.btn-large {
  font-size: 1.5rem;          /* 24px: Padding automatically expands to 12px / 24px! */
}

Technical Explanation

  1. rem (Root EM) Definition: 1rem equals the font-size of the root <html> element (default 16px); provides consistent, predictable sizing across the entire page.
  2. em (Local EM) Definition: 1em equals the font-size of the CURRENT element (or parent element for font-size); ideal for padding/margins that should scale proportionally with font size.
  3. Component Scalability Pattern: Using em for button padding means changing .btn-large { font-size: 1.5rem; } automatically scales its padding and borders proportionally without writing extra CSS!

Exercise 2: Root Font-Size Scaling for Universal App Zooming

Scenario: Demonstrates why root font size should be kept at default 100% for accessibility.

Requirements:

  1. Set html { font-size: 100%; }.
Answer

Implementation

html {
  font-size: 100%;             /* Respects browser user font preferences (default 16px) */
}

p {
  font-size: 1rem;            /* Scales if user changes browser font size to Large (20px) */
  line-height: 1.5;
}

Technical Explanation

  1. User Accessibility Preference: Setting html { font-size: 100%; } respects user browser font size preferences (e.g. visually impaired users setting default text to 24px).
  2. Pixel Hardcoding Hazard: Hardcoding html { font-size: 16px; } or using hardcoded px on text overrides user browser settings, breaking accessibility.
  3. WCAG 1.4.4 Compliance: Guarantees text can be zoomed up to 200% without loss of content or function.

Exercise 3: Compounding em Nesting Pitfalls in Component Lists

Scenario: Explains why nesting em font sizes causes unintended exponential text scaling.

Requirements:

  1. Refactor nested list font sizes from em to rem.
Answer

Implementation

/* ❌ Compounding em Bug: Nested <ul> tags get smaller and smaller exponentially! (14px -> 12px -> 10px) */
/* ul li { font-size: 0.875em; } */

/* ✅ Scalable rem Solution: Every list level retains consistent 14px size! */
ul li {
  font-size: 0.875rem;
}

Technical Explanation

  1. The em Compounding Effect: When em is used for font-size, nested child elements multiply their parent's computed font-size, causing exponential scaling!
  2. rem Immunity: rem ALWAYS references the root <html> font size, rendering nested elements completely immune to compounding bugs.
  3. CSS Architecture Standard: Use rem for font-size and layout dimensions; reserve em strictly for component-relative padding and icons.

7. Key Takeaways

  • rem and em are relative multipliers, making them perfect for Accessibility.
  • Rule of Thumb: Use rem for font-size, margin, and global spacing.
  • Rule of Thumb: Use em for local element padding (like buttons) so the box scales with the text inside it.
  • Avoid px in modern web development whenever possible (except for tiny things like 1px borders).

Links to this page:

  1. % (Percentages)
  2. Responsive Design (Concept)
  3. vw / vh (Viewport Units)
Built with LogoFlowershow