About the Inches to Pixels Converter
CSS defines one inch as exactly 96 pixels, and that ratio holds no matter what the physical display actually does. It is a reference measure rather than a promise about the glass in front of you, which is why a 1in rule and a 96px rule always produce identical boxes in a browser. This converter applies that ratio to as many values as you paste in.
The figures that come up most often are page sizes. US Letter is 8.5 by 11 inches, which lands at 816 by 1056 pixels, and a half inch margin is 48 pixels. A 0.0625 inch hairline works out at 6 pixels. Those numbers are useful when you are laying out an invoice or a certificate in HTML and want the on screen preview to match the printed sheet.
Be careful not to confuse this with image resolution. A photo exported at 300 DPI packs 300 device dots into an inch, but CSS still treats that inch as 96 pixels and the browser scales the bitmap to fit. Only the CSS ratio matters for layout maths, and print output is handled by the print stylesheet rather than by the file DPI. If you would rather work in the typographic unit, points are covered by PX to Point.
How to use
- Paste the measurements in inches, one value per line.
- Leave the base font size alone unless you also need em context.
- Read the pixel equivalents at 96 pixels per inch.
- Copy the values into your CSS or print template.
Common questions
- How many pixels is one inch?
- 96 pixels in CSS, which is the ratio every browser applies.
- Does screen DPI change the answer?
- No. The CSS inch is fixed at 96px regardless of the physical pixel density of the display.
- What is a Letter page in pixels?
- 816 by 1056 pixels, from 8.5 by 11 inches at 96 pixels per inch.
- Why does my 300 DPI image look different?
- Image DPI describes the file, not the layout. The browser still lays it out using CSS pixels and scales the bitmap accordingly.