The absolute chain is exact
CSS fixes the relationship between its absolute units by definition rather than by measurement, which makes this one of the few conversion tables with no rounding anywhere in it.
One inch, exactly| Unit | Per inch | In pixels |
|---|
| CSS pixel | 96 | 1 |
|---|
| Point | 72 | 1.3333 |
|---|
| Pica | 6 | 16 |
|---|
| Millimetre | 25.4 | 3.7795 |
|---|
| Q (quarter-mm) | 101.6 | 0.9449 |
|---|
Two consequences worth carrying. 12 pt is exactly 16 px, which is why the browser default body size and the print default body size are the same size wearing different numbers. And a pica is exactly 16 px, which makes it a surprisingly convenient unit for a design grid.
The exactness is narrower than it looks, though, and the next section but two explains why: a CSS inch is 96 pixels by definition, and only a real inch when the display happens to make it one.
An em is not a length
“How many pixels is 1.5em?” has no answer, in the same way that “how many pounds is 50%?” has none. An em is a multiple of the element’s own font size, so it is a different length on every element.
1.5em, on six different elements| Element font size | 1.5em is |
|---|
| 12 px | 18 px |
|---|
| 14 px | 21 px |
|---|
| 16 px | 24 px |
|---|
| 18 px | 27 px |
|---|
| 20 px | 30 px |
|---|
| 24 px | 36 px |
|---|
That is not a limitation to work around — it is the point of the unit. A margin set in em scales with the text it sits beside, so a heading gets proportionally more space than a caption without anyone writing two rules.
A rem is the same idea measured against the root font size instead, so it is the same length everywhere on the page. And a percentage is relative too, but to a different thing depending on the property — which is the part that catches people out.
What a percentage is a percentage of| Property | Resolves against |
|---|
| font-size | The parent’s font size |
|---|
| width | The containing block’s width |
|---|
| height | The containing block’s height |
|---|
| padding, margin — all sides | The containing block’s WIDTH |
|---|
The last row is the surprise: padding-top: 10% is ten per cent of the container’s width, not its height. It reads like a bug and is deliberate — and it is the trick behind the aspect-ratio padding hack that held responsive video embeds together for a decade.
Why rem exists
The difference between em and rem is easy to state and easy to underestimate: em compounds through nesting, and rem does not.
Three nested elements, each set to 1.25 of its parent, on a 16 px root| Level | With 1.25em | With 1.25rem |
|---|
| Root | 16 px | 16 px |
|---|
| One | 20 px | 20 px |
|---|
| Two | 25 px | 20 px |
|---|
| Three | 31.25 px | 20 px |
|---|
The em column nearly doubles over three levels of ordinary markup — a list inside a card inside a section is three levels. Nobody wrote a rule saying “31.25 px”, and nobody would.
It compounds downwards just as hard. Three nested 0.8em rules take 16 px to 8.19, which is how text ends up unreadably small in a deeply nested component that looked fine in isolation.
rem was added to CSS precisely for this. It always resolves against the root element, so nesting has no effect and the same declaration means the same length anywhere. The working practice most teams settle on is rem for anything that should be consistent across the page — type scale, spacing scale — and em for anything that should track its own local context, like the padding inside a button that scales with the button’s label.
A CSS pixel is not a device pixel
CSS defines a pixel as 1/96 inch. That is a reference pixel — a nominal size chosen so that a page comes out roughly the same physical size on different screens — and it is not the same thing as a pixel on the panel.
What one CSS pixel becomes on real hardware| Device | DPR | Device pixels across | By area |
|---|
| Standard monitor | 1 | 1 | 1× |
|---|
| Windows at 125% | 1.25 | 1.25 | 1.56× |
|---|
| Laptop or tablet | 2 | 2 | 4× |
|---|
| High-density phone | 3 | 3 | 9× |
|---|
The area column is the one that matters for images and the one people get wrong. A 3× screen needs nine times the pixels for the same picture, not three — which is why 2× and 3× asset exports exist and why an image budget is not a linear thing.
It also explains two familiar oddities. A one-pixel border on a 3× phone is drawn a third of a device pixel thick, so browsers approximate it and hairlines look inconsistent between devices. And fractional ratios — 1.25 and 1.5 are common on Windows — mean CSS pixel boundaries do not land on hardware pixel boundaries at all, which is why some edges look soft at those scalings and crisp at 2×.
Three different points
The point is older than computing and was standardised more than once, so there are three of them in circulation.
The three points| Point | Definition | In mm | Where |
|---|
| PostScript / desktop | 1/72 inch | 0.3528 | CSS and every modern design tool |
|---|
| Traditional American | 1/72.27 inch | 0.3515 | Typographic references predating PostScript |
|---|
| Didot | ≈ 0.376 mm | 0.3760 | Continental Europe, historically |
|---|
The first two differ by 0.375%, which is invisible on a single character and adds up over a page of set text — about 0.016 mm on a 12-point body size, but a measurable fraction of a millimetre over forty lines. The Didot is 6.6% larger than the PostScript point, which is not subtle at all.
In practice this only matters when reading older material. Anything produced since desktop publishing means the PostScript point, and CSS says so explicitly. But a typographic table from before the 1980s may well be in American points, and European typographic literature in Didot — twelve of which make a cicero, the continental equivalent of a pica.
One last thing the arithmetic cannot settle: two fonts set at the same point size look different sizes. The em box a designer draws letters inside is a design decision rather than a measurement, so a 16 px Georgia and a 16 px Helvetica have noticeably different visible heights. Point size fixes the box, not the letters in it.
Sources and methodology
The absolute conversions here are exact because CSS defines them rather than measuring them: an inch is 96 pixels by specification, not by any property of a screen. The em/rem distinction and the percentage behaviour are likewise definitional — including the padding rule that resolves top and bottom percentages against the containing block’s width, which reads like a bug and is deliberate.