A screen shows pixels. A printer lays down ink at a physical size measured in inches. Somewhere between designing on a monitor and printing on paper, one has to convert into the other — and getting that conversion wrong is why print jobs come out the wrong size.
The Standard Assumption: 96 PPI
CSS defines 1 inch as exactly 96px, a convention that traces back to typical desktop monitor pixel density decades ago. It's not a measurement of your actual screen — it's a fixed reference point browsers use so that a "1-inch" CSS box means the same thing across different pages and devices, at least in theory.
The formula is simple: Inches = PX ÷ 96. A 192px-wide element is 2 inches "wide" by this standard, regardless of the physical screen displaying it. Going the other way, PX = Inches × 96, so a 3.5in-wide business card is 336px in CSS.
PX to Inch Reference Table
The table below shows common pixel values at the CSS standard of 96 PPI, alongside the 300 DPI figure most print shops ask for. The 300 DPI column tells you how big an image of that pixel width will print at full quality.
| Pixels | Inches at 96 PPI (CSS) | Inches at 300 DPI (print) |
|---|---|---|
| 48px | 0.5in | 0.16in |
| 96px | 1in | 0.32in |
| 300px | 3.125in | 1in |
| 600px | 6.25in | 2in |
| 816px | 8.5in | 2.72in |
| 1200px | 12.5in | 4in |
| 1920px | 20in | 6.4in |
| 2550px | 26.56in | 8.5in |
| 3300px | 34.375in | 11in |
The two columns answer different questions. The 96 PPI column is what a CSS layout will measure on paper when printed from a browser. The 300 DPI column is how large a raster image can be printed before it starts to look soft. Mixing them up is the most common reason a print job comes out either tiny or blurry.
Why Your Actual Screen Doesn't Match
Real monitors and phones vary wildly in pixel density — a 4K monitor packs far more physical pixels per inch than a standard 1080p one. CSS's 96 PPI assumption keeps layouts consistent in relative terms (a button always looks the same size relative to the rest of the page) but it does not mean a CSS "inch" measures a literal inch with a ruler on your specific screen.
When the Conversion Actually Matters
- Print stylesheets —
@media printrules sized in inches hold their real-world size far more reliably on a printed page than px will. - Product mockups and packaging — when a digital design needs to match a physical product's dimensions exactly.
- PDF and document generation — most PDF tooling works in real-world units (inches, points, mm), so converting your on-screen px dimensions first avoids surprises in the output.
A Practical Tip
If your printer or design software lets you set a custom DPI instead of assuming 96, use that actual number for the conversion — the formula works the same way, just with your real DPI in place of 96: Inches = PX ÷ DPI. The difference between screen density and printer density is explained in DPI vs PPI.
Worked Example: A Printable Flyer
Say you're building a web page that will also be printed as a US Letter flyer (8.5in × 11in) with half-inch margins. The printable area is 7.5in × 10in. In CSS pixels that's:
- Width: 7.5 × 96 = 720px
- Height: 10 × 96 = 960px
You could write the print rules in either unit and get the same printed result, but inches make the intent obvious to whoever maintains the code later:
@page { size: letter; margin: 0.5in; }
@media print {
.flyer { width: 7.5in; min-height: 10in; }
.flyer-logo { width: 2in; } /* 192px */
.flyer img { max-width: 100%; }
}Now the images. If the flyer has a photo printed 4in wide, the source file needs 4 × 300 = 1200 pixels across to look sharp at 300 DPI. A 400px-wide web image stretched to 4in has only 100 pixels per inch and will look noticeably soft on paper. For a quick check, divide the image's pixel width by the printed width in inches; anything near 300 is safe, while values well below 150 usually show visible blur.
Inches vs Centimetres and Millimetres
CSS treats all physical units the same way, so pick whichever matches your paper and your print supplier. US Letter and Legal sizes are specified in inches; A-series sizes such as A4 and A5 are specified in millimetres. Converting between them in CSS is exact: 1in = 2.54cm = 25.4mm = 96px, and 1cm = 37.795px. If a brief arrives in metric, the PX to CM and PX to MM converters give you the same reference-pixel maths without rounding errors.
| Item | Inches | CSS pixels |
|---|---|---|
| Business card (US) | 3.5 × 2in | 336 × 192px |
| Postcard | 6 × 4in | 576 × 384px |
| US Letter | 8.5 × 11in | 816 × 1056px |
| A4 | 8.27 × 11.69in | about 794 × 1123px |
Common Mistakes
- Holding a ruler to the monitor. A 96px box won't measure an inch on most screens because of OS scaling and pixel density. Check physical sizes on a printout or in print preview instead.
- Leaving "fit to page" on. Many print dialogs scale content to fit by default, which silently changes every measurement. Print at 100% when accuracy matters.
- Exporting images at screen size for print. A layout measured at 96 PPI is fine for vectors and text, but photos need far more pixels per inch.
- Forgetting bleed. Professional printing of edge-to-edge designs usually needs an extra 0.125in on each side, trimmed off after printing. Browsers don't add bleed for you.
Frequently Asked Questions
How many pixels are in an inch?
In CSS, exactly 96. Outside the browser it depends on the resolution: an image intended for 300 DPI printing has 300 pixels per inch, and a phone screen might have 400 or more physical pixels per inch.
Why is my 96px element not one inch on my screen?
Because CSS pixels are a reference unit, not a physical one. Your operating system's display scaling and your screen's actual pixel density decide how large a CSS pixel looks, so the on-screen size can be noticeably bigger or smaller than an inch.
What DPI should I use to convert px to inches for print?
Use 96 if you're working out how a browser will print a CSS layout. Use 300 if you're working out how large a photo or raster graphic can be printed at good quality. Use your printer's or supplier's stated resolution when they give one.
Should I write print styles in px or in?
Either produces the same printed size, because the browser converts both through the same 96px-per-inch rule. Inches (or mm for A-series paper) are easier to read and check against a physical spec, though. A rule like width: 2in tells the next developer exactly what was intended, whereas width: 192px needs a calculator before anyone can confirm it matches the printed design.
Try it yourself: our PX to Inch converter lets you plug in a custom DPI alongside the standard 96, so the numbers match whatever you're actually printing to. Need the reverse? Use Inch to PX.