Modern CSS Units Guide for 2026 (REM, Viewport, Containers, and Fluid Type)

REM and accessible scaling

REM relates every value to the root font size. That mirrors how many users change text scaling at the OS/browser level, so your interfaces stay proportionate.

When teams hard-code pixels for type, they accidentally fight user defaults. Start with tokens in REM, then convert measurements with the PX to REM and REM to PX tools when you audit comps.

Viewport and dvh realities

vw and vh translate layout to the viewport, but mobile browser chrome makes 100vh a footgun. Dynamic viewport units such as dvh, svh, and lvh model the visible area far more predictably on phones.

Use UnitCraft’s PX to VW helper when you need numeric equivalence to a design width, and pair it with clamp() so fluid values never collapse below readable minimums.

Container units

Component-based layouts benefit from @container and cqw/cqh because sizing tracks the card, not the whole window. Try the PX to CQW converter when you need to express a pixel measurement as a percentage of a known container width.

UnitCraft tooling loop

1. Pick a canonical root size (often 16px) and document it.
2. Convert legacy px spacing to REM with Tailwind spacing helper when you straddle utility frameworks.
3. Generate fluid headlines with Fluid typography and validate contrast using the WCAG contrast checker.

For a deeper dive into choosing units per concern, read Best CSS units for responsive design.