Understanding type sizes
Five units, one piece of paper.
What px, rem, em, pt and % actually measure, and the reason each one exists in CSS.
The five units, by category.
CSS sizes fall into two categories. Absolute units have a fixed physical meaning — px, pt, in, cm, mm. Relative units depend on context — em, rem, %, ch, vw, vh. The five you'll meet in font size discussions are px (absolute), pt (absolute, print-rooted), rem (relative to root), em (relative to local parent) and % (relative to whatever the property's reference is).
1 pt = 1/72 inch.
The point is a typesetter's unit — 1/72 of an inch, defined by the printing trade centuries before computers. It still anchors most book and print typography. The historical conversion to pixels comes from the (mostly fictional) "1 CSS px = 1/96 inch" assumption: at 96 DPI, 12 pt becomes 16 px. The map is exact regardless of the actual screen density, because both pt and px are now CSS-defined absolute units, not physical ones.
1 pt = 1.333… px (at the CSS default 96 DPI)
The browser's 16-pixel default.
Every major browser ships with a root font size of 16 px unless the user has changed it in their preferences. That single number is what rem always refers to. 1rem is "whatever the root size is" — 16 px by default, 20 px if the user has bumped the browser's default for accessibility reasons. Sites that use rem throughout scale automatically when users adjust browser defaults; sites that hardcode px values don't.
1 rem = root font size (browser default 16 px)
em vs rem — the subtle distinction.
em is relative to the element's own font size, which is usually inherited from its parent. rem is relative to the root font size — always. Nesting compounds em: if a parent is 1.2 em and the child is also 1.2 em, the child renders at 1.44 × root. rem doesn't compound. Pick rem for consistent visual rhythm across a design system; pick em for components that should scale with their context (typically icons and inline buttons inside text blocks).
A worked translation.
You design at 14 px and want to express that as rem. With the default 16 px root, 14 ÷ 16 = 0.875 rem. To express it as pt: 14 × (72 / 96) = 10.5 pt. To express it as %, relative to the parent's font size (assumed to be the root for top-level text), (14 / 16) × 100 % = 87.5 %. Em behaves the same as that percentage relative to the parent.
14 px in other units
root = 16 px ; parent = 16 px ; reference DPI = 96
Px divided by reference gives rem/em/% ; px times 0.75 gives pt.
14 / 16 = 0.875rem ; 14 × 0.75 = 10.5pt ; 14 / 16 = 87.5%
= 0.875rem · 10.5pt · 87.5%
20 px in other units
Same reference as above
Linear in every direction.
20 / 16 = 1.25rem ; 20 × 0.75 = 15pt ; 20 / 16 = 125%
= 1.25rem · 15pt · 125%
When to pick which.
Use rem for everything in a typography system — text sizes, line heights, spacing values tied to type. Use em when a component needs to scale with its parent's font size (a button's vertical padding inside a heading, an icon inside a paragraph). Use px for things that are pixel-accurate by definition — 1-pixel borders, image dimensions that match an asset, hairline rules. Use % for layout dimensions where the reference is the parent (widths, margins). Use pt almost never on screens; it's a print holdover that confuses more than it clarifies in CSS.
The accessibility argument for rem.
Browsers respect a user's preferred font size only when sites use relative units. If your entire stylesheet is in px, a user who set their default size to 20 px for legibility reasons gets nothing — your text stays at 14 px. If your stylesheet uses rem throughout, that user's pages scale up uniformly to a new visual baseline. This is the strongest functional reason for the rem-first discipline you'll see in modern design systems: it makes the user's accessibility preferences actually do something.
The fluid-type extension.
Modern CSS also offers viewport-relative units (vw, vh) and the clamp() function for "fluid" type that scales with screen size between configurable floor and ceiling. A typical fluid heading is clamp(1.5rem, 4vw, 3rem): never smaller than 1.5rem, never larger than 3rem, somewhere in between as the viewport varies. Treat this as the next step beyond rem-vs-px, not a replacement.