Typography and CSS Unit Converter
Convert pixels, points, picas, em, rem, inches, millimeters and centimeters for web and print, with an adjustable base font size.
· CalcFlow Editorial
16 px = 1 rem
Results shown are estimates for informational purposes only. Nothing on CalcFlow is financial, tax, legal, or medical advice. Always consult a qualified professional before making important decisions.
Common Typography Conversions
| Pixels (CSS px) | rem (relative to root font size) | Points | Picas | Inches | Millimeters |
|---|---|---|---|---|---|
| 8 px | 0.5 | 6 | 0.5 | 0.083333333 | 2.1166667 |
| 10 px | 0.625 | 7.5 | 0.625 | 0.10416667 | 2.6458333 |
| 12 px | 0.75 | 9 | 0.75 | 0.125 | 3.175 |
| 14 px | 0.875 | 10.5 | 0.875 | 0.14583333 | 3.7041667 |
| 16 px | 1 | 12 | 1 | 0.16666667 | 4.2333333 |
| 18 px | 1.125 | 13.5 | 1.125 | 0.1875 | 4.7625 |
| 24 px | 1.5 | 18 | 1.5 | 0.25 | 6.35 |
| 32 px | 2 | 24 | 2 | 0.33333333 | 8.4666667 |
| 48 px | 3 | 36 | 3 | 0.5 | 12.7 |
Popular Typography Conversions
Formula
CSS defines 1 in = 96 px = 72 pt = 6 pc; rem and em = px / base font size (default 16 px)Understanding Typography Conversion
On the web, CSS fixes the reference pixel at 1/96 of an inch, a point at 1/72 of an inch and a pica at 12 points, so 1 inch is 96 px, 72 pt and 6 pc. Relative units such as em and rem scale with a base font size, which browsers set to 16 pixels by default. Using rem for type and spacing keeps a layout responsive to the reader's font preference.
Tips and Best Practices
- 1At the default 16 px base, 1 rem is 16 px and 0.75 rem is 12 px.
- 2Divide px by the base size for rem; multiply rem by the base size for px.
- 3Use rem for font sizes so users who raise their browser font size get larger text.
Real-World Example
24 px at a 16 px base is 24 / 16 = 1.5 rem. A 12 pt print font is 12 x 96 / 72 = 16 px.
Common Mistakes to Avoid
- Assuming 1 em always equals 16 px; em depends on the parent element font size, and the base here is adjustable.
- Treating a CSS pixel as a physical device pixel on high density screens.
- Using pt on screens when the design brief is in px.
How to Use
- Pick the unit you have in the left selector and the unit you want in the right selector.
- Type a number in either box; the other box updates instantly.
- Use the swap button to reverse the direction and Copy result to copy the answer.
Frequently Asked Questions
How do I convert px to rem?
How many px is 1 pt?
What is the difference between em and rem?
Sources: CSS Values and Units Module Level 3/4 (W3C): 1in = 96px = 2.54cm, 1pt = 1/72in, 1pc = 12pt.