Published 2026-02-10 · 1 min read
Best CSS Units for Responsive Design (Decision Matrix)
Pick units with intent: REM for tokenized scale, % for liquid tracks, vw/vh for viewport-bound effects, container units for components, px for optical precision.
Quick matrix
| Goal | Prefer |
|---|---|
| Type + spacing tokens | REM |
| Local type rhythm inside a component | EM (careful cascade) |
| Fluid hero sizing | vw + clamp guards |
| Card internals | Container units |
| Borders / hairlines | px |
Hop to the canonical CSS unit converter hub for shortcuts.
Worked examples
- Full-bleed section title: vw-based clamp via clamp().
- Sidebar widget padding: REM tokens exported from spacing generator.
- Video tile: simplify dimensions with aspect ratio.
If you inherit mixed px/rem/em files, reconcile with CSS size calculator during refactor week.
Frequently asked questions
- Where does % fail?
- When the percentage’s reference is indefinite (auto height parents, weird flex items), % heights misbehave—inspect the containing block.