Digital and print layout units

Layouts that work on screens and in print depend on understanding a handful of units. Web design relies on flexible units such as pixels, rem and em, while print design uses fixed points and is defined by output resolution (DPI). This guide explains how each unit behaves and when to use it.

Web layout metrics: px, rem and em

Modern interface design uses CSS units that decide how type and spacing scale across viewport sizes and user accessibility settings.

1. Pixels (px): the fixed digital baseline

The CSS pixel is the basic unit of digital screens. It was once tied to a single hardware pixel, but it is now an abstract unit defined as 1/96 of an inch on a standard reference display. Pixels are not relative: an element set to 24px renders at 24px regardless of the default font size a user has chosen in their browser. (Browser zoom still scales it.)

When to use: borders, divider lines, decorative structural elements and fixed-size canvas components, where flexible scaling would break the design.

2. Rem (root em): the user-centric scale

The rem unit is relative to the font size of the root element (<html>). Almost all major browsers start with a root font size of 16px, so 1rem equals 16px by default. If a user raises the browser font size for accessibility, the root size updates and everything set in rem scales with it.

When to use: general typography, body copy, global margins, section padding and the main layout grid, so the page stays responsive and accessible.

3. Em: the contextual, inherited scale

Unlike rem, the em unit is relative to the font size of its parent element. If an element is set to 2em inside a container with an 18px font size, it works out to 36px. Em values compound down the page structure, so nested elements inherit and multiply the sizes.

When to use: only inside self-contained modules where padding, icon size or line height must stay in exact proportion to the current text size.

The core conversion blueprint

Fluid layouts need quick conversions between fixed pixels and relative units. This chart assumes the standard browser baseline of 1rem = 1em = 16px. The px to rem and rem to px converters handle any other value.

Bridging screen and print: pixels to points

When screen work moves into desktop publishing, the pixel gives way to the point (pt). A point is an absolute physical unit, fixed by the PostScript standard as exactly 1/72 of an inch.

Converting means reconciling 72 points per inch with the 96 pixels per inch of the CSS standard, which gives a fixed scaling factor:

Points = pixels × (72 ÷ 96) = pixels × 0.75

To go from print back to web, invert the scale:

Pixels = points × (96 ÷ 72) = points × 1.333

Use the px to pt and pt to px converters for other values.

Print physics: DPI and PPI

A common cause of layout distortion is mixing up PPI (pixels per inch) and DPI (dots per inch). They describe different parts of the process.

• PPI (pixels per inch): the resolution of a digital file, or the pixel density of an electronic display. A 300 PPI image has 300 data pixels in every inch of its digital canvas.
• DPI (dots per inch): the output resolution of a physical printer. It measures how many micro-droplets of ink the print head lays down per inch of paper. Printers build each colour from cyan, magenta, yellow and black droplets in a halftone pattern, so several droplets are needed to reproduce a single image pixel.

To keep a printed image from looking pixelated or blurry, the industry standard for crisp reproduction is 300 PPI at print size.

Pixels needed = print size (inches) × 300

An image printed at 4 inches by 6 inches therefore needs at least 1200 by 1800 pixels. The same rule gives the pixel sizes for other common prints:

The px to inches and px to mm converters give physical sizes, but they assume 96 pixels per inch, so use the 300 PPI rule above when planning print resolution.

Related converters