Pixel ruler

What is a CSS pixel?

A CSS pixel is the browser’s abstract unit — the px in your stylesheet. It is deliberately not a physical size: on a standard display one CSS pixel maps to one physical pixel, while on a high-density (“Retina”) display several physical pixels team up to draw a single CSS pixel more sharply. The ratio is the device pixel ratio (DPR). Web design happens in CSS pixels, which is exactly what this ruler counts.

Reading the px scale

In px mode, small ticks come every 10 px, medium ticks every 50 px, and the numbered marks every 100 px. Measuring a button: line up its left edge with zero and read where the right edge lands — say, just past 120, i.e. about 124 px wide. For exact work, drop guides at both edges and subtract their readouts.

Why px mode needs no calibration

Calibration answers a physical question: “how many CSS pixels make a real inch on this display?” Pixel mode never asks that question — it simply counts the browser’s own units, which the page knows exactly. That’s also why px measurements are meaningless as physical sizes: 100 px is a different number of millimeters on every display. Use px for design, and cm/mm/inches (after calibration) for the physical world.

Pixels vs. print points

You’ll sometimes see “1 px = 1/96 inch.” That’s a print convention from CSS, used so stylesheets can convert to physical units on paper — it says nothing about your screen. On screen, the only honest statement is: a CSS pixel is however big the display’s density makes it, and the calibrated ruler is how you find out.

Handy pixel references

• Typical body text (16 px) cap height — roughly 11 px
• Common button height — 36–48 px
• Favicon — 16 × 16 px
• Full HD viewport width — 1920 px (CSS px, regardless of DPR)

Frequently asked questions

How big is a pixel in real life?

There is no fixed answer. A CSS pixel has no physical size — it is 1/96th of an inch only by convention for print. On your screen its physical size depends on the display density, which is exactly why the ruler needs calibration for physical units but not for pixel mode.

Does the pixel ruler need calibration?

No. Pixel mode counts the browser’s own CSS pixels, which the page knows exactly without any physical measurement. Calibration only matters for cm, mm, and inches — the units with real-world sizes.

What is device pixel ratio (DPR)?

The number of physical screen pixels used to draw one CSS pixel. A DPR of 2 (a Retina display) packs four physical pixels into each CSS pixel for sharper rendering. The ruler’s pixel mode always shows CSS pixels, which is what web designers work in.