Units

CSS has a lot of units. Here are the ones worth knowing, and when I actually reach for each.

Fixed

px ~ one pixel, always. Fine for borders, small radii, and anything that genuinely shouldn’t scale.

Relative to font size

rem ~ a multiple of the root font size (16px by default). This is my default for sizes and spacing, because if a reader turns their browser text size up for readability, your layout grows with them.

em ~ a multiple of this element’s font size. Handy for padding that should scale with its own text, but it compounds through nesting, which produces some genuinely baffling bugs.

Relative to the parent

% ~ a percentage of the parent’s size. Simple, and does exactly what you expect until you try it on height, which needs the parent to have a height first.

Relative to the window

vw and vh ~ 1% of the window’s width or height. 100vh is a full screen. On phones this is complicated by the address bar appearing and disappearing, which is why dvh exists.

Doing maths

calc() ~ mix units freely: calc(100% - 40px).

clamp(min, ideal, max) ~ fluid, but bounded. This is how you do responsive type without a single media query.