PX to PT and EM Converter
CSS fixes every absolute unit against a 96 pixel inch, so these conversions are exact by definition. Set a root font size and the relative units follow.
16 px is the browser default. Change it if your stylesheet sets a different root size.
CSS fixes 1in = 96px = 72pt = 6pc = 2.54cm regardless of your hardware, so these
conversions are exact by definition rather than by measurement.
How CSS units relate
The specification defines 1in = 96px = 72pt = 6pc = 2.54cm = 25.4mm. That makes 1 pt equal to 1.3333 px, and 12 pt equal to 16 px — which is why the browser default font size is 16 px.
em and rem are relative rather than absolute. rem is always measured against the root font size, while em is measured against the font size of the element it appears in, so nested em values compound.
Points, inches and print
Points come from typography, where 72 points make an inch. Converting pt to inches is therefore division by 72: 12 pt is one sixth of an inch.
Absolute units behave predictably in print stylesheets, where the output medium has a real physical size. On screen they are notional — a 1in CSS box only measures an inch on a display that happens to be near 96 PPI.
Reference table
| px | pt | rem | in | mm |
|---|---|---|---|---|
| 8 px | 6 pt | 0.5 rem | 0.083 in | 2.12 mm |
| 12 px | 9 pt | 0.75 rem | 0.125 in | 3.18 mm |
| 16 px | 12 pt | 1 rem | 0.167 in | 4.23 mm |
| 20 px | 15 pt | 1.25 rem | 0.208 in | 5.29 mm |
| 24 px | 18 pt | 1.5 rem | 0.25 in | 6.35 mm |
| 32 px | 24 pt | 2 rem | 0.333 in | 8.47 mm |
| 48 px | 36 pt | 3 rem | 0.5 in | 12.7 mm |
| 96 px | 72 pt | 6 rem | 1 in | 25.4 mm |
Frequently asked questions
How do I convert pt to inches?
Divide by 72. There are exactly 72 points in an inch, so 36 pt is half an inch and 12 pt is 0.1667 in.
How many pixels is 1 pt?
1 pt is 1.3333 px in CSS, because 96 pixels and 72 points both make one inch.
How do I convert px to em?
Divide the pixel value by the root font size. At the 16 px default, 24 px is 1.5 em; at a 20 px root it is 1.2 em.
Should I use px or rem in CSS?
rem for anything that should respond to a reader’s font-size preference, especially type and spacing. px is fine for hairlines, borders and values that must not scale.