Pixel & Typography Converter

How do you convert pixels, points and inches?

Convert through the inch: the CSS specification fixes 1 inch at exactly 96 pixels, 72 points or 6 picas. Screen and print units all measure a physical or virtual length, so once a value is in inches you can express it in any other unit with a single multiplication.

The core formulas

• Pixels to inches: inches = px ÷ 96
• Points to pixels: px = pt × 96 ÷ 72, which simplifies to pt × 4/3
• Pixels to centimeters: cm = px × 2.54 ÷ 96
• Pixels to rem or em: rem = px ÷ root font size (16 px by default)

Worked example: a 300 px wide image is 300 ÷ 96 = 3.125 inches in CSS units, or 3.125 × 2.54 = 7.9375 cm. A 12 pt caption set in a word processor matches 12 × 4/3 = 16 px on the web, and a 24 px heading equals 24 ÷ 16 = 1.5 rem. You can check each of these with the pixels to inches converter, the px to rem converter or the converter at the top of this page.

Print resolution works differently

For printing, the number of pixels per inch is not fixed at 96. It is whatever resolution you print at. Multiply the print size in inches by the target DPI to get the pixel dimensions you need: a US Letter page (8.5 × 11 in) at 300 DPI needs 8.5 × 300 = 2,550 by 11 × 300 = 3,300 pixels. The same multiplication works for any size and resolution.

What is the difference between PPI and DPI?

PPI (pixels per inch) describes how densely an image or screen packs pixels, while DPI (dots per inch) describes how many ink or toner dots a printer lays down per inch. In everyday use the two are often swapped, and “300 DPI” usually means an image with enough pixels to print at 300 pixels per inch.

Pixels needed for a print

Multiply each printed dimension in inches by the target PPI. A 4 × 6 in photo at 300 PPI needs 1,200 × 1,800 pixels (2.16 megapixels). An A4 page, 210 × 297 mm under ISO 216, is 8.2677 × 11.6929 in, so at 300 PPI it needs about 2,480 × 3,508 pixels. About 300 PPI is the usual target for prints viewed at arm’s length; large posters viewed from across a room can use far less. Stored uncompressed at 3 bytes per pixel, that A4 image is 26,099,520 bytes, about 26.1 MB, which the data storage converter can express in any unit.

Pixel density of a screen

For a display, PPI = √(width² + height²) ÷ diagonal in inches. A 27-inch 4K monitor works out to about 163.2 PPI and a 24-inch 1080p monitor to about 91.8 PPI. Changing the DPI value stored in an image file does not add or remove pixels; it only changes the size the image prints at. To go from pixels to physical size, use the pixels to inches converter at print resolution, or the length converter for inches and centimeters.

Which digital units are used where?

Pixels and rem dominate screen design, points and picas dominate print typography, and inches or centimeters describe physical output, while aspect ratios describe the shape of screens, images and video.

• Pixels (px): the default unit of web layout, UI design tools such as Figma, and image dimensions. A CSS pixel is a layout unit, not a single hardware dot.
• Rem: the preferred unit for font sizes and spacing in accessible web design, because it scales when a reader raises the browser's default text size. Convert your design specs with the px to rem converter.
• Em: useful for padding and icons that should grow with the text of their own component, since em is relative to the element's computed font size rather than the root.
• Points (pt): font sizes in Microsoft Word, Google Docs, Adobe InDesign and PDF files, and CSS print stylesheets.
• Picas (pc): column widths, margins and gutters in traditional page layout. Six picas make one inch.
• Inches and centimeters: physical output such as print sizes, stickers and packaging. Design at the final physical size and let the DPI decide the pixel count.
• Aspect ratio: video frames, thumbnails and responsive image boxes. Keep the ratio fixed when resizing to avoid stretching, which the aspect ratio calculator does for you.

Color values sit alongside these units in every stylesheet: a hex code such as #FF8800 is three base-16 numbers, one each for red, green and blue, and the decimal to hex converter or the number system converter translates them.

Should you use px, rem or em in CSS?

Use rem for font sizes and most spacing, em for details that should scale with their own component’s text, and px for fine lines such as borders and hairlines. All three are defined in the W3C CSS Values and Units specification, but they respond differently when a reader changes the text size.

• rem follows the root font size, which in turn follows the reader’s browser font-size setting. A reader who sets a larger default gets larger rem-based text and spacing everywhere, which helps meet WCAG 2 Success Criterion 1.4.4 (resize text up to 200% without loss of content).
• em follows the computed font size of the current element, so it suits button padding and icons that should grow with their label. Because it compounds when nested, deep em chains are hard to predict.
• px stays fixed relative to the reference pixel. Pixel font sizes still scale with browser zoom, but they ignore the default font-size preference, which is why they are best kept for borders, shadows and other decoration.

Some teams set html { font-size: 62.5% } so that 1 rem equals 10 px at the default size, which makes the arithmetic easy but shifts every rem value on the page; many simply divide pixel values by 16. Media queries written in em or rem use the browser’s initial font size, not the html font size, so a breakpoint of 48em is 768 px at the default. The px to rem converter handles the division for any design token.

What is the difference between CSS pixels and device pixels?

A CSS pixel is an abstract layout unit, 1/96 of a CSS inch, while a device pixel is a physical dot on the screen. On a high-density display, the browser maps one CSS pixel to several device pixels. The ratio between them is the device pixel ratio (DPR): a DPR of 2 means each CSS pixel is drawn with a 2 × 2 block of device pixels, and a DPR of 3 uses a 3 × 3 block.

This is why a phone with a 1170 × 2532 panel reports a much smaller viewport to web pages, and why a CSS inch rarely measures exactly one inch with a ruler. The physical size depends on the screen's actual pixel density, which is the diagonal resolution in pixels divided by the diagonal size in inches. A 27-inch 4K monitor has about 163 PPI, while a 24-inch 1080p monitor has about 92 PPI.

pt vs px, and em vs rem

Points come from print typography, where 72 points make an inch, so 1 pt is 4/3 of a CSS pixel and 1 px is 0.75 pt. Em and rem are relative units: rem always refers to the root (html) font size, while em refers to the font size of the current element, so nested em values compound. With a 16 px root, 1.5 rem is 24 px everywhere, but 1.5 em inside a 20 px parent is 30 px. The converter on this page assumes a 16 px base for both.