CSS Typography Conversion Reference
Assumptions: The generic browser font size default setting is 16px and the <body> selector font size is set to 1em or 100%.
It’s an approximation, which will depend on font, browser and OS, but it’s a good starting point.
| Points (for print css) |
Pixels | Ems | Percent | HTML Size | Keyword |
|---|---|---|---|---|---|
| 6 pt | 8 px | 0.5 em | 50% | ||
| 7 pt | 9 px | 0.55 em | 55% | xx-smal | |
| 7.5 pt | 10 px | 0.625 em | 62.5% | 1 | x-small |
| 8 pt | 11 px | 0.7 em | 70% | H6 |
|
| 9 pt | 12 px | 0.75 em | 75% | 2 | |
| 10 pt | 13 px | 0.8 em | 80% | H5 |
small |
| 10.5 pt | 14 px | 0.875em | 87.5% | ||
| 11 pt | 15 px | 0.95 em | 95% | ||
| 12 pt | 16 px | 1 em | 100% | 3
H4 |
medium |
| 13 pt | 17 px | 1.05 em | 105% | ||
| 13.5 pt | 18 px | 1.125 em | 112.5% | 4 | |
| 14 pt | 19 px | 1.2 em | 120% | H3 |
large |
| 14.5 pt | 20 px | 1.25 em | 125% | ||
| 15 pt | 21 px | 1.3 em | 130% | ||
| 16 pt | 22 px | 1.4 em | 140% | ||
| 17 pt | 23 px | 1.45 em | 145% | ||
| 18 pt | 24 px | 1.5 em | 150% | H2 |
x-large |
| 20 pt | 26 px | 1.6 em | 160% | 6 | |
| 22 pt | 29 px | 1.8 em | 180% | ||
| 24 pt | 32 px | 2 em | 200% | H16 |
|
| 26 pt | 35 px | 2.2 em | 220% | ||
| 27 pt | 36 px | 2.25 em | 225% | ||
| 28 pt | 37 px | 2.3 em | 230% | ||
| 29 pt | 38 px | 2.35 em | 235% | ||
| 30 pt | 40 px | 2.45 em | 245% | ||
| 32 pt | 42 px | 2.55 em | 255% | xx-large |
Formula to calculate em equivalent for any pixel value required
1 ÷ parent font size (px) × required pixels = em equivalent
Example: 1 ÷ 16 px (parent font size) × 669 px (required size) = 41.8125 em
