Typography Units: Px, Pt, Em, and Rem for Designers

Why the same "16px" can look different everywhere

Typography units weren't all designed for the same medium — some come from print, some from screens, some are relative to context — which is why a font size that looks right in one tool can look completely different in another.

Pixels: the screen-native unit

Pixels are an absolute unit tied directly to screen resolution, making them predictable for on-screen design. Their downside is that they don't scale with user accessibility settings, which is a growing concern for web design.

Points: the print legacy unit

Points originated in the printing industry, long before screens existed, and are still the default unit in word processors and PDF design. One point is a fixed physical fraction of an inch, which is why print and screen typography rarely translate directly.

Em and rem: relative, scalable units

An em is relative to the font size of its parent element, which makes it powerful but also unpredictable when nested deeply. A rem solves that by always referencing the root element's font size instead, which is why modern web design leans heavily on rem for consistent, accessible scaling.

A practical rule of thumb

For web design, prefer rem over px for font sizing wherever accessibility matters — it respects a user's browser zoom and font preferences, while a fixed pixel value ignores them entirely.