Pixels to inches

Pixels to inches and back, for CSS, for print, or as measured on your screen.

96 px to the inch, fixed by the CSS spec.

pixelsinches

300px ÷ 96 = 3.125in (96 px per inch)

The same value in every unit

points
225pt
300px ÷ 1.3333 = 225pt (96 px per inch ÷ 72)
centimetres
7.9375cm
300px ÷ 37.7953 = 7.9375cm (96 px per inch ÷ 2.54)
millimetres
79.375mm
300px ÷ 3.7795 = 79.375mm (96 px per inch ÷ 25.4)
picas
18.75pc
300px ÷ 16 = 18.75pc (96 px per inch ÷ 6)

In short

Divide pixels by 96 to get CSS inches, or by the print resolution to get printed inches: 300 pixels is 3.125 inches in CSS and exactly 1 inch printed at 300 ppi. Going the other way, multiply inches by 96 for CSS or by the resolution for print.

The formula

CSS:   inches = px ÷ 96
       px = inches × 96
Print: inches = px ÷ ppi
       px = inches × ppi

Reference tables

Computed by the same code as the converter above.

Pixels to inches
pixels	CSS (96 per inch)	Printed at 150 ppi	Printed at 300 ppi
16px	0.1667in	0.1067in	0.0533in
72px	0.75in	0.48in	0.24in
96px	1in	0.64in	0.32in
300px	3.125in	2in	1in
600px	6.25in	4in	2in
1080px	11.25in	7.2in	3.6in
1200px	12.5in	8in	4in
1920px	20in	12.8in	6.4in
2400px	25in	16in	8in
3000px	31.25in	20in	10in
3840px	40in	25.6in	12.8in

Inches to pixels
inches	CSS (96 per inch)	Printed at 150 ppi	Printed at 300 ppi
0.5in	48px	75px	150px
1in	96px	150px	300px
2in	192px	300px	600px
3in	288px	450px	900px
4in	384px	600px	1200px
5in	480px	750px	1500px
6in	576px	900px	1800px
8.5in	816px	1275px	2550px
10in	960px	1500px	3000px
11in	1056px	1650px	3300px
12in	1152px	1800px	3600px

There are three kinds of pixel, and each has its own inch

A CSS pixel is defined as 1/96 of a CSS inch by the CSS Values specification, so 96 is not a setting or an average: it is the definition. That is the right number for anything you are writing in CSS or measuring in a browser.

An image pixel has no size until it is printed. A 3000-pixel-wide photo is 10 inches wide at 300 ppi and 20 inches wide at 150 ppi. Changing the resolution field in an image editor changes that printed size and nothing else: not the pixels, not the file, not how it looks on screen.

A hardware pixel is a physical dot on a particular display, and a CSS pixel covers several of them on a high-density screen. That is why a CSS inch is almost never a real inch on a monitor or a phone. No browser can report the physical size of its screen, so the "On this screen" mode measures it: match a bank card, and the tool knows how long a real inch is on your display.

Worked examples

Real sizes, with the sums.

A photo for an 8 × 10 print

You give it

A 2400 × 3000 pixel image, to be printed at 300 ppi.

You get

2400 ÷ 300 = 8 inches by 3000 ÷ 300 = 10 inches, so it prints at exactly 8 × 10 with no resampling. At 150 ppi the same file would print at 16 × 20.

A US Letter page as a web layout

You give it

8.5 × 11 inches, in CSS for a print stylesheet.

You get

8.5 × 96 = 816 by 11 × 96 = 1056 CSS pixels. For a 300 ppi image of the same page you need 2550 × 3300 pixels.

Questions people ask

Straight answers. Each one links directly: copy the address after opening it.

How many pixels are in an inch?

In CSS, exactly 96: the specification defines a CSS pixel as 1/96 of an inch. For an image you will print, it is whatever resolution you print at, usually 300. On a physical screen it varies by device, which is why this tool can measure yours.

Is 72 dpi still the standard for the web?

No, and it never affected the web at all. 72 comes from the 1984 Macintosh, whose screen showed one pixel per typographic point. Browsers ignore the resolution stored in an image; they draw its pixels as CSS pixels. The field only matters when the image is printed.

What is the difference between dpi and ppi?

PPI is pixels per inch in an image or on a screen. DPI is the dots of ink a printer lays down per inch, and a printer uses several dots to render one pixel. In everyday use the two are mixed up constantly, and when someone asks for a 300 dpi image they mean 300 ppi.

Why does 1 inch in CSS not measure 1 inch on my monitor?

Because on screens CSS anchors its units to the pixel, not to physical length. A CSS inch is 96 CSS pixels, and how long that is depends on your display density and zoom. Use the On this screen mode to see the real figure.