Pixel converter

A calculator that turns a length in pixels into inches, centimetres, millimetres, points, picas, rem, em or viewport width, and back again. This one first asks what the pixels are for, because a CSS pixel, an image pixel on paper and a pixel on your own screen each have a different inch.

• It asks what the pixels are for

  For CSS, an inch is 96 pixels by definition. For print, it is whatever resolution the file is printed at. On a screen, it is whatever the hardware makes it. Most converters pick one of these silently and give the other two groups of visitors a wrong answer.

  The same 3000 pixels are 31.25 CSS inches, 10 inches printed at 300 ppi and 20 inches printed at 150 ppi.

• It measures a real inch on your screen

  Hold a bank card against the display and adjust a rectangle until the edges meet. From then on, On this screen gives physical lengths, draws a centimetre ruler at true size, and warns you if browser zoom has changed since you measured.

  Bank and ID cards are 85.60 × 53.98 mm under ISO/IEC 7810. No browser interface reports a display’s physical size, so a known object is the only honest reference.

• Every result shows its arithmetic

  Under each value is the sum that produced it, with the basis named: the root size for rem, the parent size for em, the resolution for print. A wrong assumption is visible at a glance instead of buried in a number.

  24px at a 16px root reads "24px ÷ 16 = 1.5rem (16px root size)".

• Print sizes in whole pixels

  Choose print and a paper table appears at your resolution, already rounded, because a file cannot contain part of a pixel and the half-pixel is where most quoted figures disagree.

  At 300 ppi: A4 2480 × 3508, A5 1748 × 2480, US Letter 2550 × 3300.

1. 1

   Say what the pixels are for

   CSS for anything going into a stylesheet or a design tool, print for an image headed to paper, and this screen when you want to know how big something physically looks on your display.

2. 2

   Type the size, with its unit if you like

   A bare number uses the unit beside it. Typing 24px, 8.5in or 1.5rem in full sets the unit for you.

3. 3

   Set the one thing the answer depends on

   The root size for rem, the parent size for em, the viewport width for vw, or the resolution for print. Each only appears when it matters.

4. 4

   Copy the value you need

   Every result copies with its unit attached, ready to paste into CSS or a print brief.

• Why pixel-to-inch converters disagree, and which answer is yoursThe same 1920 pixels are 20 inches in CSS, 26.67 at 72 ppi and 6.4 at 300 ppi. Why converters differ, and how to pick the meaning you need.

• It cannot know your screen’s physical size without the card. Browsers do not expose it, so On this screen shows CSS inches until you measure.
• It does not resample images. To change an image’s pixel dimensions, use the image editor; this tool tells you the size those pixels will print at.
• em is answered for the parent size you enter. It cannot see your page, so if an ancestor sets a font size, read the computed value in your browser’s developer tools and enter that.