Modern web development demands responsive, accessible, and maintainable CSS. Choosing between em and rem units is one of those decisions that seems small but carries significant implications for how your designs scale across devices and respect user preferences.
This guide breaks down exactly how these relative units work, when to use each, and how to avoid the common pitfalls that trip up developers at every level. Whether you're building a marketing site or a complex web application, mastering em and rem will make your CSS more flexible and your layouts more resilient.
The foundation of responsive design lies in understanding the difference between fixed and relative units
Fixed Units (px)
Absolute values that don't adapt to screen size or user preferences. Useful for precise borders and shadows.
Relative Units (em, rem)
Scale based on context--either parent element (em) or root element (rem). Essential for responsive design.
Viewport Units (vw, vh)
Scale based on browser window dimensions. Perfect for full-screen sections and hero layouts.
Percentage (%)
Relative to parent container dimensions. Ideal for fluid widths and flexible layouts.
What is rem: Root-Based Scaling
rem stands for "root em" and calculates its value based on the font size of the root element (typically the <html> element). If your browser's default font size is 16px--a common standard--then 1rem equals 16px throughout your entire document.
This predictability makes rem the go-to choice for designers who want consistent, scalable typography and spacing.
The rem Calculation
html {
font-size: 16px; /* Default browser setting */
}
h1 {
font-size: 2.5rem; /* Computes to 40px */
}
.section {
padding: 1.5rem; /* Computes to 24px */
}
rem and Accessibility
One of rem's greatest strengths is its relationship with user accessibility settings. When users adjust their browser's default font size for visual comfort, rem-based layouts respect those preferences automatically. Our web development services prioritize accessibility-first approaches that respect user preferences.
WCAG 2.2 Success Criterion 1.4.4 (Resize Text) requires that text be resizable up to 200 percent without assistive technology. rem-based designs meet this requirement naturally.
What is em: Component-Based Scaling
em units calculate based on the font size of the parent element rather than the root. This makes em inherently context-aware--change a parent's font size, and all em-based child elements adjust accordingly.
The Compounding Effect
The term "em" originates from traditional typography. The challenge with em is its compounding behavior in nested structures:
.parent {
font-size: 16px;
}
.parent .child {
font-size: 2em; /* 32px */
}
.parent .child .grandchild {
font-size: 2em; /* 64px, not 32px! */
}
When em Shines
Despite the compounding challenge, em excels when you want all elements within a component to scale together:
.btn {
padding: 0.75em 1.5em;
font-size: 1rem;
border-radius: 0.3em;
}
.btn-large {
font-size: 1.25em; /* Scales all em values proportionally */
}
| Aspect | rem | em |
|---|---|---|
| Reference Point | Root element (<html>) | Parent element |
| Predictability | High - always consistent | Variable - depends on parent |
| Nesting Behavior | No compounding | Can compound exponentially |
| Accessibility | Respects user settings | Inherits parent behavior |
| Best For | Global typography, layout spacing | Component-level scaling |
| Maintenance | Easier to maintain | Requires careful monitoring |
Best Practices for Modern CSS
The Hybrid Approach
Professional CSS typically employs all three unit types strategically. When building websites with our professional web development services, we follow these principles:
/* Root-level - use rem for accessibility */
html {
font-size: 100%;
}
/* Typography - rem for consistency */
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
/* Component internals - em for proportional scaling */
.card {
padding: 1.5em;
}
.card-title {
font-size: 1.25em;
}
/* Fine details - px for precision */
.card {
border: 1px solid #e2e8f0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
When to Use Each Unit
Use rem for:
- Global typography and type scales
- Layout spacing and container sizing
- Media query breakpoints
- Any element that should scale uniformly across the entire site
Use em for:
- Button padding and spacing
- Card component internal scaling
- Icon sizing relative to text
- Isolated components that should scale contextually
Use px for:
- Hairline borders
- Box-shadow blur and spread
- Fine decorative details
- z-index values
Common Pitfalls to Avoid
-
The Nested em Trap: Deeply nested em values can compound exponentially. Use rem or reset values at component boundaries.
-
Overriding User Settings: Never set a fixed pixel value on the html or body font size. This breaks accessibility.
-
Inconsistent Mixing: Choose one approach per property category and apply it consistently.
Frequently Asked Questions
CSS Grid Layout Guide
Master modern CSS Grid for complex, responsive layouts that adapt beautifully across all devices.
Learn moreResponsive Design Best Practices
Essential techniques for creating websites that look and work great on every screen size.
Learn moreCSS Custom Properties
Leverage CSS variables for maintainable, themable design systems that scale effortlessly.
Learn more