PX to Inch Converter
CSS pixels to inches at the anchored 96 to the inch, with the 72-point publishing inch alongside it and what a real display does to both.
1,920.0000px = 20.0000in
1,920.0000px in every absolute unit
px 1,920.0000 ← in
in 20.0000 ← out
cm 50.8000
mm 508.0000
pt 1,440.0000
pc 120.0000
The definitions these come from
1 inch 96px, 2.54cm, 25.4mm, 72pt, 6pc
1mm 3.779528px
1cm 37.795276px
1pt 1.333333px, which is why 12pt is 16px
Those 1,920.00 CSS pixels on a real screen
at 96 ppi 20.0000in, 50.8000cm
the CSS answer assumes 96 ppi
so the real length is 100.0% of the CSS one
on a 1080p 24-inch monitor 530.09mm
on the CSS reference pixel 508.00mm
on a 27-inch 4K monitor 299.19mm
on a 13-inch MacBook Pro 214.84mm
on an iPhone 15 106.02mm
The absolute units in CSS are defined against each other, not measured:
one inch is exactly 96 pixels, 2.54 centimetres, 25.4 millimetres, 72
points and 6 picas. So 1,920.0000px is 20.0000in exactly, and no screen
is involved in that conversion.
A CSS pixel is not a device pixel and not a physical length. It is about
1/96 inch on a 96 ppi monitor and about a quarter of that on a phone,
where the browser draws one CSS pixel with several device pixels. That
is the whole reason `1cm` in a stylesheet does not measure a centimetre
on screen.
Physical units belong in a print stylesheet, where the browser knows the
paper size and the conversion means something. In a screen stylesheet
they are a slower way of writing pixels, and they break when a reader
zooms.
The inch has been exactly 2.54 centimetres since the international
agreement of 1959. Rounding it to 2.5 is an error of 1.6 percent, which
is four millimetres across a sheet of A4 and enough to lose a bleed.
12pt is 16px, and that is where the browser default font size comes
from. A point is 1/72 inch in publishing and CSS keeps that definition,
which is why type specified in points from a design tool converts to
pixels cleanly.
`rem` and `em` are the units to reach for in a stylesheet. They scale
with the reader's font size, which is a preference that people set
deliberately and that fixed physical units ignore.
For anything that will be printed, work in millimetres and set the
resolution separately. The pixel dimensions needed follow from the print
size and the resolution, and a file specified in pixels alone has no
physical size at all.
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
96 pixels is one inch, by definition, in CSS. 72 points is one inch, by definition, in publishing. Both are true and they are the source of most of the confusion about type sizes.
It is why 12pt comes out as 16px, which is the default font size in every browser. It is also why a number taken from a print design converts cleanly into CSS: the two systems share the inch, so a point is exactly 1.3333 pixels.
What neither of them shares is any relationship with a real screen. 1,920 CSS pixels is 20 inches according to CSS, about 8.5 inches on a MacBook Pro, and about 4 on a phone.
How to use
- Put in the pixel value.
- Read the inch figure and the point figure, which is the one type specs use.
- Set your screen’s density to see the physical length.
Example
A 1,920-pixel design width:
1,920.0000px = 20.0000in
1,920.0000px in every absolute unit
px 1,920.0000 ← in
in 20.0000 ← out
cm 50.8000
mm 508.0000
pt 1,440.0000
pc 120.0000
The definitions these come from
1 inch 96px, 2.54cm, 25.4mm, 72pt, 6pc
1pt 1.333333px, which is why 12pt is 16px
Those 1,920.00 CSS pixels on a real screen
at 96 ppi 20.0000in, 50.8000cm
on a 27-inch 4K monitor 299.19mm
on a 13-inch MacBook Pro 214.84mm
on an iPhone 15 106.02mmTwenty inches wide in CSS. Eight and a half on the laptop most designers are looking at it on.
Pitfalls
96 for pixels, 72 for points. Confusing the two is a 33 percent error, and it is the most common mistake when moving type sizes between a print tool and a stylesheet. 12pt is 16px, 9pt is 12px, 18pt is 24px.
The inch in CSS is not an inch on screen. It is 96 CSS pixels, which is roughly an inch only on a 96 ppi display. Every current laptop and phone is denser, so the physical length is smaller.
A “72 dpi” image is not low quality. It is the same pixels as a “300 dpi” one; only a metadata field differs. The number in an image header does not change the image, and browsers ignore it entirely.
Do not use in in a screen stylesheet. It is a fixed multiple of pixels with a misleading name.
If you want a fixed size, write pixels; if you want it to respect the reader, write rem.
Inches are correct in print CSS. @page { size: 8.5in 11in } is exactly how to specify US Letter,
and within @media print all the physical units behave properly.
Points in CSS are not points in a PDF viewer’s ruler. They agree at 72 to the inch, but a PDF’s user space and CSS’s px grid can be scaled differently by the software in between, so verify a critical measurement on the output rather than in the stylesheet.
Compatibility
Arithmetic in the browser: nothing is uploaded and nothing is stored.
The relationships used are the exact CSS ones: 1in = 96px = 2.54cm = 25.4mm = 72pt = 6pc. Browsers implement them identically because the units are anchored to each other rather than to hardware, and every pair is round-tripped in the test suite.
The 12pt-to-16px identity is checked explicitly, because it is the one conversion people rely on and the one that reveals a 72-versus-96 mistake immediately.
Screen densities in the output are real hardware figures, included so that the difference between the CSS inch and a physical one is visible.
Frequently asked questions
How many pixels in an inch?
Why is 12pt 16px?
Should I specify font sizes in points?
rem, so type scales with the reader’s chosen size. Points are the right unit in
a print stylesheet and in print design tools.