1. The Evolution of CSS Sizing Units
Modern CSS has evolved far beyond static pixels (px). Today's responsive layouts demand relative units that adapt fluidly across devices, screen orientations, and user accessibility preferences.
2. Deep Dive: 'rem' vs 'em'
| Unit | Relative To | Best Used For |
|---|---|---|
| rem (Root EM) | Font size of the root element (<html>, usually 16px) |
Global typography, layouts, grid gutters, section margins |
| em | Font size of the immediate parent element | Component padding, icon sizing, scalable buttons |
3. The New Viewport Units: dvh, svh, and lvh
For years, mobile developers struggled with the infamous 100vh bug, where full-screen hero sections overflowed below mobile URL bars. CSS Viewport Units Level 4 introduced three precise viewport definitions:
- svh (Small Viewport Height): Represents the viewport when mobile UI elements (address bar, toolbar) are fully expanded. Safe from overflow.
- lvh (Large Viewport Height): Represents the viewport when all browser UI elements are fully collapsed.
- dvh (Dynamic Viewport Height): Dynamically adjusts in real-time as the user scrolls and browser bars expand or contract.
/* Perfect mobile-friendly full-screen hero */
.hero-section {
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
}4. Character Units: The Secret to Readable Typography (ch)
The ch unit equals the width of the zero character (0) in the current font. Web typography research recommends maintaining line lengths between 45 to 75 characters for optimal reading comprehension.
/* Optimal readable article container */
.article-content {
max-width: 65ch;
margin-inline: auto;
}