Understanding CSS units
px, rem, em, and the rest of the family.
A pixel isn't a pixel; an em isn't a metal letter; a vw isn't an inch. What each unit really measures.
The CSS pixel.
A CSS pixel is a unit of visual angle, not hardware. The W3C defines it as the size that renders one pixel on a screen viewed at arm's length, which on modern devices works out to roughly 1/96 of an inch. That's why 16px on a phone, a Retina laptop and a 4K monitor all look about the same physical size, even though the number of underlying device pixels differs by a factor of three or four.
1 CSS px ≈ 1/96 inch (visually)
rem and em — relative to what?
rem means "relative to the root font size" — the font-size of the <html> element, by default 16px. em means "relative to the current element's font-size", which is the font-size of the parent if you haven't set one. rem stays predictable as you nest; em compounds and is what you want for properties that should scale with the surrounding text (padding inside a button, line-height, margin between paragraphs).
Padding that grows with the type
button { font-size: 1.25rem; padding: 0.5em 1em; }
The em ties padding to this button's font size, not the page's.
1.25rem × 0.5 em = 10px vertical × 1 em = 20px horizontal
= Bigger button, bigger padding
vw, vh, vmin, vmax.
One vw is one percent of the viewport width. One vh is one percent of viewport height. They're ideal for hero sections, full-screen overlays and fluid type. The catch: on mobile browsers, address-bar collapse changes the viewport height. The newer svh/lvh/dvh units are "small", "large" and "dynamic" viewport heights — the first two represent the size with the bar permanently shown or hidden, the third updates live. Use dvh when you want the layout to follow the chrome.
ch, ex, lh.
ch is the width of the "0" character of the current font — a useful approximation of how many characters fit on a line. ex is the height of the lowercase "x". lh (and rlh at the root) is one line-height. They're font-relative units, which makes them the right choice for measurements that need to track the typography rather than the page geometry — a max-width of 65ch, for instance, gives well-typeset prose regardless of which body font you've chosen.
Physical units exist; don't use them.
CSS supports cm, mm, in, pt and pc, all defined by their relationship to the CSS pixel rather than to anything physical. A 1-inch CSS measurement is not 1 inch on your screen unless your DPI happens to match the standard. They're useful for print stylesheets (the page is, after all, a piece of paper) and for nothing else. For screen work, stick to px, rem, em and the viewport units.
The 16px default — keep it.
You'll occasionally see advice to set html { font-size: 62.5% } so that 1 rem equals 10 px. It's tempting because 1.6rem is easy to type. It's also wrong: it overrides the user's browser font-size preference, which low-vision users rely on. Leave the root at the browser default and do the arithmetic in your head, or use clamp() to express size relationships directly rather than translating from pixels.
Read next