PX vs Inches, MM, and CM: A Practical Guide
Pixels are the native unit of the screen, but sooner or later every designer and developer has to translate them into a physical measurement — inches for a US print job, millimeters or centimeters for a metric one. This guide explains exactly how that conversion works, why the numbers aren't always round, and how to use it correctly in real projects.
The 96px Standard That Makes This Possible
Pixels are a digital unit tied to a device's resolution, while inches, millimeters, and centimeters are physical units of length. On their own, these two categories have no fixed relationship — a "pixel" can be tiny on a 4K phone screen and comparatively large on an old low-resolution monitor.
To solve this, the CSS specification defines the reference pixel: a fixed, logical unit where 96px = 1 inch. This is the number browsers, design tools like Figma and Photoshop, and print-preview engines all agree on, regardless of a screen's actual physical pixel
density (PPI). It's what makes a "1 inch" box in your CSS look roughly the same size across devices.
The Core Conversion Facts
- 1 inch = 96px (by CSS specification)
- 1 inch = 2.54cm (by the international metric definition)
- 1 inch = 25.4mm
- 1 centimeter ≈ 37.795px
- 1 millimeter ≈ 3.7795px
Notice that the cm and mm figures aren't round numbers. That's expected: they're derived by combining the CSS 96px-per-inch rule with the metric definition of 2.54cm per inch, so the result is a repeating decimal rather than a clean integer.
Why You'd Convert PX to a Physical Unit
- Print-ready documents: Verifying a PDF or flyer generated from HTML/CSS will print at the correct physical size.
- Business cards and packaging: Standard sizes are defined in inches (US, 3.5in × 2in) or millimeters (EU, 85mm × 55mm).
- Paper sizes: US Letter (8.5in × 11in = 816px × 1056px) vs. A4 (210mm × 297mm ≈ 794px × 1123px).
- Design handoff: Translating a print spec from a client into pixel-based CSS for a web preview or print stylesheet.
Quick Reference Table
| Pixels (px) | Inches (in) | Centimeters (cm) | Millimeters (mm) |
|---|---|---|---|
| 96px | 1in | 2.54cm | 25.4mm |
| 192px | 2in | 5.08cm | 50.8mm |
| 378px | 3.94in | 10cm | 100mm |
| 816px | 8.5in | 21.59cm | 215.9mm |
| 1123px | 11.7in | 29.7cm | 297mm |
A Common Pitfall: CSS DPI vs. Print DPI
💡 Pro Tip
The 96px = 1in rule is a screen and CSS standard, not a print-quality standard. Professional printers typically render at 300 DPI or higher for crisp output. If you're preparing an image or PDF for actual printing, don't rely on the CSS 96 DPI conversion for the final resolution — use your print service's required DPI (usually 300) to calculate pixel dimensions for images, while using the 96px rule only for CSS layout and preview purposes.
In practice this means a print-ready A4 flyer image should typically be exported at roughly 2480px × 3508px (A4 at 300 DPI), not the 794px × 1123px you'd get from the CSS 96 DPI conversion — that lower-resolution version is only appropriate for on-screen previews.
Using the Converters
Rather than doing the math by hand, use our free converters for instant, accurate results in either direction:
- PX to Inches Converter and Inches to PX Converter
- PX to MM Converter and MM to PX Converter
- PX to CM Converter and CM to PX Converter
If you're working with CSS-relative units instead of physical ones, see our guide on REM vs PX or try the PX to REM converter.
Conclusion
Converting pixels to inches, millimeters, or centimeters always comes back to one fixed anchor: 96px = 1 inch, as defined by the CSS specification. From there, the metric conversions follow naturally through the standard 2.54cm-per-inch definition. Keep this distinct from print DPI (usually 300), and you'll avoid the most common mistake in translating digital designs into physical dimensions.