Measurement
Online Ruler
A ruler that is actually the right size. Calibrate against a bank card, the same 85.6 mm everywhere in the world, and measure on screen in centimetres, millimetres or inches. Or print a true-scale paper ruler.
Calibrate
Saved per screen. Current display: init
Method 1: Match this rectangle to your credit/debit card’s width, then press Save.
The rectangle’s left and top edges are anchored. It never leaves the area.
Method 2: Enter your screen diagonal in inches. Fine-tune with nudges afterward.
Current scale: 3.780 px/mm
Four steps
How to use an online ruler accurately
- 1
Open the calibration panel
Choose the credit-card method, any bank or ID card is exactly 85.6 mm wide.
- 2
Match the card
Hold the card against the on-screen outline and drag until the two line up exactly.
- 3
Pick your units
Switch between centimetres, millimetres and inches as needed.
- 4
Measure or print
Hold the object against the screen, or download the PDF and print at 100% scale.
Why screens cannot be trusted by default
The web has no reliable way to know your display’s physical size. CSS defines a pixel as 1/96 of an inch at a nominal viewing distance, which is a convention rather than a measurement, a MacBook, a 4K monitor and a phone all report pixels but render them at very different physical sizes.
Calibration solves this by giving the browser one known physical reference. Once it knows how many device pixels equal 85.6 mm, every other measurement follows.
The card trick, and why it works
Payment cards, national ID cards and driving licences are manufactured to ISO/IEC 7810 ID-1: 85.60 mm wide by 53.98 mm tall, with a tolerance of a few hundredths of a millimetre. That standard is honoured globally, which makes a card in your wallet the most widely available precision reference object in existence.
Hold it flat against the screen, drag the outline until the edges align, and the ruler is calibrated. Nothing else you own is that consistent.
Getting the most accurate result
- Set browser zoom to 100% before calibrating, and leave it there.
- Look straight on. Viewing at an angle introduces parallax error on thick-glass displays.
- Recalibrate after changing monitor: the stored value belongs to one display.
- Use the nudge control to fine-tune if a known object reads slightly off.
Printing a paper ruler
Download the PDF and print at 100% scale with “Fit to page” disabled. Verify it immediately: lay a bank card along the printed scale, the card’s long edge should span exactly 85.6 mm. If it does not, scaling is still switched on somewhere in the print dialog.
When to use something else
For pixel measurements on screenshots and mockups, the pixel ruler works in the units CSS actually uses. For angles, use the online protractor. For converting between measurement systems, the unit converter covers length, weight, temperature and more, and there are direct pages for mm to inches and cm to inches.
Answers