PX to points converter

The exact relationship

CSS fixes two absolute equivalences, and everything else follows from them: 1 inch = 96 px and 1 inch = 72 pt.

1pt = 96/72 px = 1.3333px
1px = 72/96 pt = 0.75pt

12pt = 16px    (the browser default body size)
 9pt = 12px
10.5pt = 14px
18pt = 24px

The 12pt/16px correspondence is not a coincidence. Browsers chose 16px as the default body size precisely because 12pt was the conventional size of body text in print.

Both units are absolute, and neither is physical

The point comes from typography, where it is genuinely physical: 1/72 of an inch on paper. The CSS pixel is a reference pixel — a unit of visual angle chosen so content appears the same size at a normal viewing distance regardless of display density. Because CSS pins them together at 96/72, the conversion is exact and independent of any device.

What that means in practice: 12pt in CSS is 16px on every screen. 12pt in Word on paper is 12/72 of an inch. They are the same nominal size and they are measured against different things, which is why a heading that looks right on screen can look small when printed.

Conversion table

When to use pt in CSS

Only inside a print stylesheet, and even then only for type. Everywhere else it buys nothing over px and confuses the scale.

@media print {
  body { font-size: 11pt; line-height: 1.4; }
  h1   { font-size: 20pt; }
  h2   { font-size: 15pt; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

@page { margin: 20mm; }

Why the printed result may not match

• Shrink to fit. Most browsers scale the page down to fit the paper width unless you turn it off in the print dialog. A 12pt heading can arrive at 11pt.
• Default margins. Set them explicitly with the @page rule rather than relying on the browser’s.
• Font substitution. A web font that fails to load in the print context is replaced by a fallback with different metrics.
• Printer DPI. Irrelevant to size — 600dpi and 1200dpi produce the same physical dimensions, just different sharpness.

Points are not pica, and DTP points are not PostScript points

One pica is 12 points, or 16px in CSS terms. Historically, several slightly different point sizes existed — the American printer’s point was 1/72.27 inch — but every modern system, CSS included, uses the PostScript point of exactly 1/72 inch. If you are working from a very old typographic specification, that 0.4% difference is the reason numbers do not quite line up.