Font Size Units Explained: Points, Pixels, Millimeters, and Em/Rem

Font size units come from two different worlds β€” print and screens β€” and here is how they line up.

Points: the print-origin unit

A point (pt) is a print-origin unit equal to 1/72 of an inch, standardized by desktop publishing software decades ago. It is still the default unit in word processors and print design tools.

Pixels: the screen unit

A pixel (px) is a screen unit, but it does not correspond to a fixed physical size β€” it depends on a device's resolution. For consistency, web browsers use a "CSS pixel" based on a 96 dots-per-inch reference, not the display's actual pixel density.

The 96dpi bridge between pt and px

Because the web standard assumes 96 CSS pixels per inch and a point is 1/72 of an inch, 1pt equals exactly 96/72 = 1.333px, which is where the common "12pt β‰ˆ 16px" body text approximation comes from.

Millimeters: true physical size

Millimeters describe a font's true physical size, which matters for print materials like business cards or packaging where the output size is fixed and known in advance, unlike a screen where the same pixel size can appear physically larger or smaller depending on the display.

Em vs rem

An em is relative to the font size of its parent element, so nested elements can compound unexpectedly, while a rem is always relative to the root (usually the html element's) font size, making it more predictable across a page β€” which is why many designers default to rem for consistency.

Why relative units matter for accessibility

Using relative units like em or rem instead of a fixed px value lets text scale properly when a user increases their browser's default font size for accessibility, something a hard-coded pixel value does not respond to.

Why a point traces back to the printing press

The point system predates computers by centuries, developed by typefounders to standardize metal type sizes. Desktop publishing software in the 1980s adopted a simplified "PostScript point" of exactly 1/72 inch, which is the version still used today and the reason 72pt equals one inch on the nose.

Why the web settled on 96dpi as a reference

Physical screens vary wildly in pixel density, from low-resolution monitors to ultra-high-density phone displays, so the web needed a fixed reference to keep font sizes visually consistent across devices. Early Windows systems commonly used 96dpi displays, and that number became the de facto CSS standard, even though most modern screens have a much higher actual pixel density under the hood.

Frequently Asked Questions

Why does 12pt text in a word processor look different from 12px on a website?

They are not measuring the same thing β€” 12pt refers to a physical print size that gets rendered based on your printer or screen's resolution, while 12px on the web is a fixed screen unit under the CSS 96dpi convention. The two are related (1pt β‰ˆ 1.33px) but are not interchangeable without a conversion.

Should I use px or rem when building a website?

Many designers prefer rem for font sizes because it scales properly when a user changes their browser's accessibility font settings, while px stays fixed regardless of a user's preferences. Pixels are still common for things like borders or icons where exact, unscaled sizing matters more.