How inches turn into pixels, and where the number comes from
A pixel has no fixed physical size. An inch does. The bridge between them is pixel density, written as DPI or PPI, which states how many pixels a screen or printer packs into one inch. Multiply inches by that density and you get pixels. Divide to run the trip backwards. Two inches at 300 DPI is 600 pixels, and 600 pixels at 300 DPI is two inches again.
The 96 DPI rule that CSS follows
CSS defines one inch as exactly 96 pixels. Write width: 1in in a stylesheet and the browser renders 96 CSS pixels, whatever monitor sits in front of the reader. On a 27 inch 4K panel packing roughly 163 real pixels per inch, that box measures closer to 0.59 physical inches on the glass. The inch in CSS is a unit of convention, not a promise about the ruler on your desk. Hold the 96:1 ratio in mind and browser output stays predictable. Reach for physical accuracy on screen and the number stops meaning anything.
Print works the other way around. A printer lays down real ink on real paper, so 300 DPI describes something you measure with a ruler. This is why the same 3.5 inch measurement produces 336 pixels for a web mockup and 1050 pixels for the press file.
Picking a density that matches the output
| Density | Where it applies | 1 inch equals |
|---|---|---|
| 72 DPI | Older Mac design files, where one typographic point mapped to one pixel | 72 px |
| 96 DPI | Web and app layouts, the density every CSS engine assumes | 96 px |
| 150 DPI | Posters, banners and signage read from a few feet back | 150 px |
| 300 DPI | Brochures, magazines, business cards, most commercial print | 300 px |
| 600 DPI | Fine art reproduction and photo work inspected close up | 600 px |
Anything between those steps is fair game. Wide format printers often quote 120 or 200 DPI, and phone screens land anywhere from 320 to 500 PPI. Type the number into the custom field rather than rounding to the nearest preset, because rounding a density quietly resizes the artwork.
Print sizing worked through
A business card measures 3.5 by 2 inches. At 300 DPI that becomes 1050 by 600 pixels. US letter at 8.5 by 11 inches becomes 2550 by 3300 pixels. A 4 by 6 photo print becomes 1200 by 1800 pixels. Each of those numbers came from one multiplication per side.
This converter handles a single measurement at a time, so a two dimensional size needs two passes. Enter 4 to read 1200, then enter 6 to read 1800. Keeping the sides separate is deliberate, since it stops the width of one job being pasted into the height of another.
Bleed sits on top of whatever you calculate. A card printed with a 0.125 inch bleed on all four sides needs 3.75 by 2.25 inches of artwork, which is 1125 by 675 pixels at 300 DPI. Convert the bleed size, not the trim size, or the press file arrives short.
Where the conversion stops being reliable
- Screen inches are nominal. Browsers, operating system scaling and device pixel ratios all sit between your CSS and the glass. A 1in box is 96 CSS pixels everywhere and a different physical length on every device.
- DPI and PPI are not interchangeable. Printers measure ink dots, images measure pixels. A 300 DPI inkjet spec and a 300 PPI image describe different things, and printer drivers often lay several dots down per image pixel.
- Fractional pixels get rounded. A 0.37 inch measurement at 96 DPI works out to 35.52 pixels. Browsers snap that to a device pixel boundary during paint, so the rendered edge lands a fraction off the arithmetic.
- Resolution is not resampling. Tagging a 600 by 400 photo as 300 DPI does not add detail. Converting a size tells you the pixel target, it does not tell you whether the source has enough pixels to fill it.
What usually goes wrong
- The density belongs to a different medium. Web mockups built at 300 DPI come out roughly three times too large once they hit a browser.
- The measurement was in millimetres or points. A 3.5 that meant centimetres produces a card less than half the size it should be.
- The trim size got converted while the bleed was forgotten, so the artwork has no margin for the cutter.
- A print looks soft at the correct pixel dimensions, which points at the source image rather than the maths. Check the original pixel count before blaming the conversion.
How this tool behaves
Both fields stay linked. Type into inches and pixels follow, type into pixels and inches follow. Changing the density recalculates pixels while holding the inch measurement steady, since the physical size is normally the fixed part of a brief. Results carry up to four decimal places and drop trailing zeros, so 96 reads as 96 rather than 96.0000. Everything runs in your browser with no upload step, and the current inch and DPI pair rides along in the URL when you copy the link.
Pair this with related converters
Typography measured in points belongs in the Point to PX Converter, and the PX to Point Converter takes a screen value back toward print. Once a pixel target exists, the PX to REM Converter and the PX to EM Converter turn it into units that scale with user text settings, while the EM to PX Converter resolves a relative value back to pixels during debugging. For a single surface covering percentages, viewport units and the rest, use the CSS Unit Converter.
