CSS Units Explained: px, rem, em, %, vh, vw, and When to Use Each
For my first two years of front-end work I used px for literally everything — font sizes, padding, breakpoints, the works. Then one accessibility audit on a client site failed because a user who bumped their browser font size to 200% got no benefit at all (px overrides that). That single audit rewired how I think about CSS units. Here's the practical decision tree I now use on every project: which unit for which job, and — more importantly — why. Follow it and 95% of your unit choices become obvious.
Absolute vs relative units
- Absolute — px, pt, cm. Fixed size, ignores user settings.
- Relative — rem, em, %, vh, vw, ch. Scale with context or user preferences.
The big three: rem, em, px
rem — relative to the root
1rem equals the root <html> font size (default 16px). Best for font sizes, spacing, and component sizing because it respects the user's browser font-size setting.
em — relative to the parent
1em equals the current element's font size. Great for padding inside buttons or spacing that should scale with text — but watch out for nested compounding.
px — fixed pixels
Best for borders, box-shadows, and anything that should not scale (hairlines look bad at 0.0625rem).
Viewport units: vh, vw, vmin, vmax
.hero { min-height: 100svh; } /* small viewport height — safe on mobile */
.title { font-size: clamp(1.5rem, 4vw, 3rem); }Percentages and ch
- % — relative to the parent's same property (width % of parent width)
- ch — width of the '0' character, perfect for max-width on text (max-width: 65ch)
A quick rulebook
- Font sizes → rem
- Component padding/margin → rem (or em if it should scale with text)
- Borders & shadows → px
- Full-screen sections → svh/dvh
- Fluid typography → clamp() with vw
Frequently asked questions
Should I ever set the root font size?
Avoid it. Setting html { font-size: 62.5% } breaks the user's preferred size. Keep root at the browser default.
Are rem and em accessible?
Yes — both scale when users change their browser font size, unlike px.
External references
Enjoyed this article?
Share it with a fellow developer or explore more tutorials in our blog.
More articles