Points, Picas, Pixels and Ems: Typography Units Explained

Typography carries measurement units older than the metric system, adapted repeatedly for new technology. The result is a set of units that look simple and hide several centuries of accumulated compromise.

The point

The modern DTP point (desktop publishing point) is exactly 1/72 inch, or about 0.3528 mm.

It was not always. Historical points included:

• Didot point (continental Europe): about 0.376 mm
• Fournier point: about 0.345 mm
• American point (pre-1980s): about 0.3514 mm — 1/72.27 inch

The American point derived from a 19th-century standardisation that produced the awkward 72.27 points per inch. When Adobe defined PostScript in the 1980s they rounded to exactly 72, because 72 divides cleanly by 2, 3, 4, 6, 8, 9 and 12 — convenient for digital layout.

The pica

A pica is 12 points, so 6 picas to the inch, about 4.233 mm. Picas measure column widths and page margins; points measure type size and leading.

The convention is that you specify type in points and layout in picas — "10 on 12, 20 picas wide" means 10-point type with 12 points of leading in a 20-pica column.

What "12 point type" actually measures

Not the height of the letters. It is a holdover from metal type, where the point size was the height of the metal body the letter sat on — including space above and below.

The consequence is that two fonts at the same point size can look markedly different in size, because the proportion of the em occupied by the letters varies. The relevant measure is x-height, the height of a lowercase "x". A font with a large x-height looks bigger at the same nominal size.

This is why substituting one font for another at identical point size can wreck a layout.

Pixels and the CSS reference pixel

Screens introduced a device-dependent unit. Early Mac displays were 72 PPI, conveniently making one pixel equal one point. Windows used 96 PPI.

The CSS specification settled on a reference pixel of 1/96 inch, so 1px = 0.75pt and 16px = 12pt.

Modern high-density displays break the physical correspondence. A "Retina" display packs two or more device pixels into each CSS pixel, so a 1px border is still one CSS pixel but rendered with more physical pixels. This is the device pixel ratio, and it is why images need 2× or 3× variants to look sharp.

Em and en

An em is a relative unit equal to the current font size. At 16px type, 1em is 16px. An en is half an em.

The names come from the width of a capital M and N in early type, though the modern definition is purely proportional.

In CSS, em compounds: nested elements multiply. A 1.2em element inside another 1.2em element renders at 1.44 times the base. rem (root em) was introduced to avoid this, always referring to the root font size.

Em units also name punctuation: the em dash (—) is nominally one em wide, the en dash (–) half that. The em dash separates clauses; the en dash marks ranges and the minus sign in some fonts.

Leading

Leading — the vertical space between baselines — is named for the strips of lead inserted between lines of metal type. It is pronounced "ledding".

The convention "10/12" means 10-point type on 12-point leading. A common default is about 120% of type size, though longer line lengths generally want more.

In CSS, line-height serves the same purpose. A unitless value like 1.5 is usually preferable to a fixed one, because it scales with inherited font size instead of compounding awkwardly.

Practical notes

• For print, work in points and picas and let the software handle inches.
• For screen, prefer rem for type so user font-size preferences are respected.
• Never assume two fonts at the same point size occupy the same space.
• Old specifications in American points or Didot points need conversion, not assumption.

Our typography converter includes DTP points, picas, pixels, ems, twips, Didot points and ciceros.