Unit Choice Tracks Whether a Value Should Scale With Text

CSS unit choice is not stylistic — it follows one question: should this value scale when the user changes their root font size?

Should scale with text?	Unit	Examples
Yes — it is text or surrounds text	rem	font-size, padding, margin, gap, text-container widths
No — pure visual detail	px	border-width, box-shadow, focus/outline rings
Relative to its own element's font	em	letter-spacing, inline icon sizing (1em)
Inherits as a multiplier	unitless	line-height (1.5)
Relative to parent/viewport	%, vw/dvh	container widths, hero heights

The principle: most browsers let users enlarge the root font for accessibility. rem values scale with that; px values do not. So text and everything that wraps text must be rem (or it ignores user preference — an a11y failure), while hairline borders and shadow blur must stay px (or a 1px line becomes a blurry 1.25px at zoom).

em is a footgun everywhere except letter-spacing and inline icons, because it compounds through nesting. The acceptance test: set the browser default to 24px and reload — text/spacing should grow, borders/shadows should not. Encode the right unit once in the token (see Three-Tier Design Tokens); components just reference it.

Source: css-conventions skill §11.