Pixels to points

Pixels to points and back: move a type size from a design file to a document.

96 px to the inch, fixed by the CSS spec.

pixelspoints

16px ÷ 1.3333 = 12pt (96 px per inch ÷ 72)

The same value in every unit

inches
0.1667in
16px ÷ 96 = 0.1667in (96 px per inch)
centimetres
0.4233cm
16px ÷ 37.7953 = 0.4233cm (96 px per inch ÷ 2.54)
millimetres
4.2333mm
16px ÷ 3.7795 = 4.2333mm (96 px per inch ÷ 25.4)
picas
1pc
16px ÷ 16 = 1pc (96 px per inch ÷ 6)

In short

Multiply pixels by 0.75 to get points, and multiply points by 4/3 to get pixels: 16px is 12pt and 12pt is 16px. The factor is fixed in CSS, because a point is 1/72 of an inch and a CSS pixel is 1/96.

The formula

CSS:   pt = px × 0.75
       px = pt × 4 ÷ 3
Print: pt = px × 72 ÷ ppi
       px = pt × ppi ÷ 72

Reference tables

Computed by the same code as the converter above.

Pixels to points (CSS)
pixels	Points
10px	7.5pt
11px	8.25pt
12px	9pt
13px	9.75pt
14px	10.5pt
15px	11.25pt
16px	12pt
18px	13.5pt
20px	15pt
24px	18pt
28px	21pt
32px	24pt
36px	27pt
48px	36pt
64px	48pt
72px	54pt

Points to pixels
points	CSS	Printed at 300 ppi
6pt	8px	25px
8pt	10.67px	33.33px
9pt	12px	37.5px
10pt	13.33px	41.67px
10.5pt	14px	43.75px
11pt	14.67px	45.83px
12pt	16px	50px
14pt	18.67px	58.33px
16pt	21.33px	66.67px
18pt	24px	75px
24pt	32px	100px
36pt	48px	150px
48pt	64px	200px
72pt	96px	300px

Design files measure type in pixels; documents measure it in points

Interface tools and CSS size type in pixels. Word processors, layout software and most print briefs size it in points. The two meet whenever a brand guide is written in one and applied in the other, and the conversion is a fixed ratio of three to four: 12pt body text is 16px, 18pt is 24px, 10.5pt is 14px.

The ratio comes from two old decisions. A typographic point has been 1/72 of an inch since desktop publishing settled it in the 1980s, and CSS took its pixel from the Windows convention of 96 to the inch. 96 ÷ 72 = 4/3, so the same nominal size is a larger number in pixels.

Points are physical, so in print a point is 1/72 of a real inch at any resolution. What changes with resolution is how many image pixels a point covers: at 300 ppi, 12pt type is set on a 50-pixel em, which is the number you need when setting text inside an image for print.

Worked examples

Real sizes, with the sums.

A brand guide written for print, applied on the web

You give it

Body 10.5pt, headings 18pt and 24pt.

You get

10.5 × 4/3 = 14px, 18 × 4/3 = 24px and 24 × 4/3 = 32px. All three land on whole pixels, which is the 3:4 ratio working in your favour.

Text set inside a 300 ppi poster image

You give it

72pt headline in an image printed at 300 ppi.

You get

72pt is one real inch, so 300 pixels. In CSS the same 72pt is 96px, which is why a size copied from a web mock-up into a print image comes out a third of the height you expected.

Questions people ask

Straight answers. Each one links directly: copy the address after opening it.

Is 12pt the same as 16px?

Yes, in CSS and in any software that follows the 96-pixels-per-inch convention. 12 × 4/3 = 16.

Why do px and pt differ at all?

A point is 1/72 of an inch and a CSS pixel is 1/96, so a pixel is three quarters of a point. The same type size is therefore a bigger number in pixels.

Should I use pt in CSS?

Only in print stylesheets, where it is a real physical size. On screen, pt is just px × 0.75 in disguise and does not respond to the visitor's font-size setting; rem does.