CSS Unit Converter: px, pt, em, rem
Convert between px, pt, em, rem and the rest, plus why only every third point size is a whole pixel and why em compounds when you nest it.
The absolute units convert with no context at all. em needs the parent's computed size and rem needs the root's, which is why those two boxes are separate — and why the two units are not interchangeable. Nothing is uploaded.
The ratios are exact, and that is the problem
CSS defines one inch as 96 pixels — not approximately, definitionally, and with no reference to any real screen. Everything else follows from that one number, as an exact rational.
| Unit | Pixels | Exact value |
|---|---|---|
| 1in | 96 | 96 exactly, by definition |
| 1pc | 16 | 16 exactly (12pt) |
| 1pt | 1.33333 | 4/3 exactly |
| 1cm | 37.79528 | 96/2.54 |
| 1mm | 3.77953 | 96/25.4 |
| 1Q | 0.94488 | 96/101.6 |
| 1px | 1 | 1 |
Only every third point size is a whole number of pixels
A point is 4/3 of a pixel, so n points is 4n/3 pixels — a whole number exactly when 3 divides n, and never otherwise. Of the first 36 point sizes, 12 land on whole pixels: precisely the multiples of three.
| Point size | Pixels | Whole? |
|---|---|---|
| 9pt | 12 | yes |
| 10pt | 13.3333 | no |
| 11pt | 14.6667 | no |
| 12pt | 16 | yes |
| 14pt | 18.6667 | no |
| 18pt | 24 | yes |
Which is awkward, because the sizes print actually uses are 10, 11 and 14 point, and all three are fractional. 9pt and 12pt survive as 12px and 16px. If you want your point sizes to be whole pixels you have exactly a third of them to choose from.
Rounding through points loses a quarter of all sizes
Convert a pixel size to the nearest whole point and back and you do not always return. Over the first 200 pixel sizes, 50 fail — 25% — and they are not scattered.
| Start | Nearest point | Back to pixels |
|---|---|---|
| 10px | 8pt | 11px |
| 14px | 11pt | 15px |
| 18px | 14pt | 19px |
| 22px | 17pt | 23px |
Every failure is a size congruent to 2 modulo 4 — 10, 14, 18, 22 and so on — and every such size fails. Nothing else does. They also all fail the same way, coming back one pixel too large rather than too small, because 4k + 2 points rounds up through a half.
em compounds; rem does not
em resolves against the parent's computed size. Nest the same value and it multiplies rather than repeating — 5 levels of 1.5em turns a 16px root into 121.5px.
| Value | Root | Level 1 | Level 2 | Level 3 | Level 4 | Level 5 | Total |
|---|---|---|---|---|---|---|---|
| 1.1em | 16.00 | 17.60 | 19.36 | 21.30 | 23.43 | 25.77 | 1.61× |
| 1.25em | 16.00 | 20.00 | 25.00 | 31.25 | 39.06 | 48.83 | 3.05× |
| 1.5em | 16.00 | 24.00 | 36.00 | 54.00 | 81.00 | 121.50 | 7.59× |
| 1.1rem | 16.00 | 17.60 | 17.60 | 17.60 | 17.60 | 17.60 | 1.10× |
The worst of those is 7.59× the root from a value that reads like it means "half again". rem asks the root every time and lands on the same number at every depth, which is the whole reason it exists. The two agree at one level of nesting and diverge geometrically after that.
How to use
- Type a value and pick the unit it is in.
- Every other unit updates at once.
- Set the root size for rem and the parent size for em.
- Watch which values land on whole pixels and which do not.
Frequently asked questions
How many pixels is a point?
Exactly four thirds. CSS defines one inch as 96 pixels by definition, with no reference to any real screen, and a point is one seventy-second of an inch. So 96 divided by 72 gives 4/3 px per point, and a pica works out to exactly 16 pixels.
Why do point sizes give fractional pixels?
Because n points is 4n/3 pixels, which is a whole number precisely when 3 divides n. Only every third point size lands: 9pt is 12px and 12pt is 16px, but 10pt is 13.333px, 11pt is 14.667px and 14pt is 18.667px. The three sizes print actually uses are all fractional.
Can I safely round between pixels and points?
Not reliably. Converting a pixel size to the nearest whole point and back fails for a quarter of all sizes, and the failures are exactly the sizes congruent to 2 modulo 4. 10px becomes 8pt becomes 11px. Every failure overshoots by one pixel rather than undershooting.
What is the difference between em and rem?
em resolves against the parent element’s computed font size and rem against the root. That sounds minor and is not: nesting the same em value multiplies it. Five levels of 1.25em is 1.25 to the fifth, a little over three times the root, and five levels of 1.5em turns a 16px root into 121.5px.
Does rem compound the same way?
No, and that is the whole reason it exists. rem asks the root every time, so the same value at any nesting depth computes to the same number of pixels. The two units agree at exactly one level of nesting and diverge geometrically after that.
Are the absolute units tied to physical size?
Not on screen. CSS anchors them to the reference pixel rather than to the display, so an inch in CSS is 96 pixels whatever the actual density. They keep their ratios to each other exactly, which is what makes the arithmetic on this page exact rather than approximate.
Does this send anything anywhere?
No. Every conversion happens in your browser, and nothing is uploaded.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.