How to use it
- Calibrate first (below the ruler). The most accurate way is Bank card: hold any standard bank, ID or loyalty card flat against the screen, line its corner up with the box, and resize the box until it matches the card edge to edge. Then press Use this size.
- No card? Use a US quarter on the circle, or type your screen’s advertised diagonal under Screen size.
- Measure by holding the object against the ruler, or drag the two pink lines to its ends; the reading shows centimetres, millimetres and inches. Each line moves to wherever you press nearest it.
- The calibration is saved, so next time the ruler is ready at true size on the same screen.
Why a screen ruler has to be calibrated
Web pages are laid out in CSS pixels, and the CSS standard defines an inch as exactly 96 of them. That is a convention, not a measurement: the browser has no way to know how big your screen physically is, so a CSS inch is the right size only on a screen that happens to have about 96 CSS pixels per real inch. Most do not.
Here is what an uncalibrated ruler would do on three common setups, worked out from the screen sizes (pixels per millimetre = diagonal in pixels ÷ diagonal in millimetres):
| Screen | Real CSS px per mm | A “10 mm” tick drawn at CSS size would really be |
|---|---|---|
| 24-inch 1920 × 1080 monitor at 100% scaling | 3.61 | 10.5 mm (+5%) |
| 15.6-inch laptop at 1536 × 864 CSS px (1920 × 1080 at 125% scaling) | 4.45 | 8.5 mm (-15%) |
| 6.1-inch phone reporting 390 × 844 CSS px | 6.00 | 6.3 mm (-37%) |
So the page measures your screen against something whose size is fixed by a standard. Bank, ID and most loyalty cards follow the ISO/IEC 7810 ID-1 format, 85.60 × 53.98 mm. The United States Mint specifies the quarter at 24.26 mm (0.955 in) across. Matching a long object gives a better scale than a short one, which is why the card beats the coin, and both beat the diagonal: advertised diagonals are rounded and include parts of the glass that show no picture.
Changing the browser zoom, the operating system’s display scaling or moving the window to another screen changes how big a CSS pixel is, so recalibrate after any of those.
What we tested
A test browser has no physical screen, so on October 15, 2026, in Chromium 141.0.7390.37, we checked that the ruler is drawn exactly to the scale your calibration sets, which is what makes it accurate on a real screen:
| Check | Result |
|---|---|
| 34,818 tick marks across 300 random lengths and scales, mm and sixteenths of an inch, against exact fractions | Every position, size and label correct (largest difference 2 × 10−13 px) |
| Card box after typing 323.5 px | Drawn 323.5 px wide; saved; scale 3.7792 px per mm after reload |
| 10 mm and 1 inch ticks on the drawn ruler | Exactly 10 and 25.4 times the scale from zero |
| A span as wide as the card | Reads 85.6 mm, 8.56 cm, 3.370 in |
| Quarter and screen-diagonal calibration | Scale matches the formulas |
| 390 px phone screen | Finger drag moves a line to where it was released; no sideways scrolling; 0 page errors |
Tips
- Check the calibration once with a second known object, for example measure the card with the ruler after calibrating with the coin.
- Measure along the ruler’s whole length rather than near the ends, and look straight at the screen, not from an angle.
- A phone held sideways gives a longer ruler.
- For printing, sizes on paper depend on the printer settings, not on this calibration; use the paper sizes in your print dialog.
Sources
Checked on .
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools