PX to CM Converter
CSS pixels to centimetres at 37.795276 to the centimetre, and why that centimetre is not a centimetre on any screen you own.
1,024.0000px = 27.0933cm
1,024.0000px in every absolute unit
px 1,024.0000 ← in
in 10.6667
cm 27.0933 ← out
mm 270.9333
pt 768.0000
pc 64.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,024.00 CSS pixels on a real screen
at 96 ppi 10.6667in, 27.0933cm
the CSS answer assumes 96 ppi
so the real length is 100.0% of the CSS one
on a 1080p 24-inch monitor 282.71mm
on the CSS reference pixel 270.93mm
on a 27-inch 4K monitor 159.57mm
on a 13-inch MacBook Pro 114.58mm
on an iPhone 15 56.54mm
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,024.0000px is 27.0933cm 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.
1,024 pixels is 27.09 centimetres, and that centimetre is not a centimetre on any screen you own.
CSS anchors its absolute units to each other rather than to hardware: one inch is defined as exactly 96 pixels, and a centimetre is 37.795276 of them. So the arithmetic is exact, and the physical claim behind it assumes a display at 96 pixels per inch. A 27-inch 4K monitor is 163. A MacBook Pro is 227. A phone is around 460.
On that MacBook, 1,024 CSS pixels measure 11.5 centimetres, not 27.
How to use
- Put in the pixel value.
- Read the centimetre figure, which is the CSS one.
- Set your screen’s density to see what those pixels really measure.
Example
1,024.0000px = 27.0933cm
1,024.0000px in every absolute unit
px 1,024.0000 ← in
in 10.6667
cm 27.0933 ← out
mm 270.9333
pt 768.0000
pc 64.0000
Those 1,024.00 CSS pixels on a real screen
at 96 ppi 10.6667in, 27.0933cm
on a 1080p 24-inch monitor 282.71mm
on a 27-inch 4K monitor 159.57mm
on a 13-inch MacBook Pro 114.58mm
on an iPhone 15 56.54mmOne number, five answers. The first is what CSS says and the rest are what a ruler says.
Pitfalls
A pixel is not a length. It is a unit of a coordinate system that the browser maps onto the display, at whatever device pixel ratio that display reports. Asking how many centimetres a pixel is only has an answer once you name a screen.
The conversion is right and the interpretation is usually wrong. 37.795276 px/cm is exact by definition. What varies is whether those pixels occupy a centimetre, and on current hardware they do not.
Do not use centimetres to size anything on screen. They ignore the reader’s font size, they do
not adapt to the viewport, and they suggest a precision the medium has not got. rem, percentages
and clamp() are the units for a screen.
Centimetres are correct in a print stylesheet. Inside @media print the browser knows the paper,
so physical units mean what they say. That is the only place to reach for them.
Device pixel ratio is a separate multiplier. A ratio of 2 means each CSS pixel is drawn with four device pixels, which is why a 2× image at 2,048 real pixels is served for a 1,024 CSS-pixel slot. Neither number is centimetres.
Converting a design-tool measurement is usually the wrong move. If a design says 27cm, ask what it means: a print size, a screen width, or a proportion. Two of those three answers are not pixels at all.
Compatibility
Arithmetic in the browser: nothing is uploaded and nothing is stored.
The definitions used are the CSS ones: 1in = 96px = 2.54cm = 25.4mm = 72pt = 6pc, all exact. Every browser agrees on them, because there is nothing to measure. Every conversion pair is round-tripped in the test suite.
The screen densities quoted are real hardware figures, and they are in the output so the gap between the CSS centimetre and a physical one is visible rather than asserted.
For reference in other places: in PHP or JavaScript the same arithmetic is px / 96 * 2.54, and in
Sass math.div($px, 96) * 2.54cm. There is no browser API that reports the display’s physical
density, which is the reason this cannot be done automatically.
Frequently asked questions
How many pixels in a centimetre?
Can I make an element exactly 5cm on screen?
Why does my 10cm box look different on my phone?
What is the right unit for a responsive layout?
fr for structure, rem for type and spacing, clamp() where something needs a
floor and a ceiling. Physical units have no role in a layout that has to adapt.