Common font sizes (16 px base)
| pt | px | mm | rem |
|---|---|---|---|
| 6 | 8 | 2.12 | 0.5 |
| 7 | 9.33 | 2.47 | 0.583 |
| 8 | 10.67 | 2.82 | 0.667 |
| 9 | 12 | 3.17 | 0.75 |
| 10 | 13.33 | 3.53 | 0.833 |
| 10.5 | 14 | 3.7 | 0.875 |
| 11 | 14.67 | 3.88 | 0.917 |
| 12 | 16 | 4.23 | 1 |
| 14 | 18.67 | 4.94 | 1.167 |
| 16 | 21.33 | 5.64 | 1.333 |
| 18 | 24 | 6.35 | 1.5 |
| 20 | 26.67 | 7.06 | 1.667 |
| 24 | 32 | 8.47 | 2 |
| 28 | 37.33 | 9.88 | 2.333 |
| 32 | 42.67 | 11.29 | 2.667 |
| 36 | 48 | 12.7 | 3 |
| 48 | 64 | 16.93 | 4 |
| 60 | 80 | 21.17 | 5 |
| 72 | 96 | 25.4 | 6 |
How to use it
- Type the size and pick its unit: points, pixels, millimeters or em/rem.
- If you work in em or rem, set the base size in pixels. Browsers start at 16 px.
- Read every equivalent and check the preview. Calibrate the on-screen ruler first if you want the preview at true physical size.
How it works
The CSS specification ties the units together through the inch: 1 in = 96 px = 72 pt = 25.4 mm. Points and millimeters are absolute. Em and rem are relative: they multiply whatever base font size is in effect, which browsers set to 16 px unless the reader or the stylesheet changes it.
pt = px × 0.75 · mm = px × 25.4 ÷ 96 · em = px ÷ base
Worked example
A print spec calls for 9 pt body text and you're building the web version on a 16 px base. 9 × 96 ÷ 72 = 12 px. In rem that's 12 ÷ 16 = 0.75rem, and on paper the em box is 12 × 25.4 ÷ 96 = 3.175 mm. Going the other way, a 24 px heading is 18 pt, 1.5rem and 6.35 mm.
Assumptions and limits
- A CSS pixel isn't a device pixel. On a phone with a 3× screen, 16 CSS px covers 48 physical pixels, and how big that looks depends on the screen. That's why the preview needs a calibrated ruler to be true to size.
- These are desktop-publishing (PostScript) points of 1/72 in. The older Didot point still used in some European print work is about 0.376 mm, roughly 7% bigger.
- Font size sets the em box, not the height of the letters, so two typefaces at the same size can look quite different.
- Some apps scale type with your display setting: at 125% scaling, 12 pt can show up as 20 px.
Frequently asked questions
How many pixels is 12 pt?
16 px. CSS fixes one inch at 96 px and 72 pt, so 1 pt is 1.333 px.
What's the difference between em and rem?
Both are multiples of a font size. 1rem always equals the root size (16 px unless you change it), while 1em equals the parent element's size, so em values compound when you nest them.
Are 12 pt letters 4.23 mm tall?
The em box is, the letters aren't. Capitals usually take up about 70% of it, so 12 pt capitals stand roughly 3 mm tall. The exact figure depends on the typeface.