Why an on-screen ruler needs calibrating
Web pages are laid out in CSS units, and the CSS standard defines one inch as 96 CSS pixels. That is a convenient fiction: on a 27-inch 1440p monitor a CSS inch is about 0.88 real inches, on a 13-inch laptop at 150% scaling it is around 1.2, and a phone differs again. No browser is told how big your screen physically is, so an uncalibrated online ruler is usually out by 10 to 40 per cent — and any site claiming “actual size” without asking you to calibrate is guessing.
This ruler fixes that in one step. You compare an on-screen outline with an object whose size is fixed by a standard, and it works out how many real screen pixels there are per millimetre. That figure is stored in device pixels against your screen — identified by its size and position on the desktop, never by guessing the page zoom — which has useful consequences: browser zoom doesn't break the calibration, neither does docking Chrome's side panel or DevTools (which make the page narrower than the window), and a second monitor is recognised as a different screen with its own calibration. For iPhones, iPads and recent MacBooks the pixel density is known from the resolution, so the ruler starts from an automatic estimate — still worth checking against a card.
Five ways to calibrate
- Bank card (quick and precise). Every bank card, driving licence and most loyalty and ID cards follow ISO/IEC 7810 ID-1: 85.60 × 53.98 mm. Hold the card flat on the screen, lined up with the outline's top-left corner, and drag the round handle until the right edge matches. On a narrow phone the outline turns portrait and you match the 53.98 mm side instead. Use the − and + buttons, or the arrow keys on the handle, for fine steps of 0.2%.
- A4 or US Letter paper. On a large monitor a whole sheet beats a card: an error of half a millimetre over 210 mm is a quarter of the error over 85.6 mm. Match the sheet's short edge (210 mm for A4, 215.9 mm for Letter); on narrower screens the outline switches to the sheet folded in half.
- Coin. Handy when you have no card: choose your coin — every UK coin from 1p to £2 is listed, plus euro, US, Canadian and Australian coins — and resize the circle until the rim touches all round. The UK 20p and 50p are heptagons of constant width, so they fit the circle properly too.
- Screen size. Type the diagonal from the spec sheet. The tool divides your native diagonal pixel count by it. The resolution is pre-filled from what the browser reports and you can correct it — Chrome and Edge can't reveal page zoom, so at anything other than 100% the pre-filled figure is off. Check the value on the screen resolution page or in your display settings, and avoid this method on a Mac set to a scaled “looks like” resolution.
- Real ruler. Measure the on-screen check line with a tape measure and type what it really is; the scale is corrected by the difference.
Press Save calibration and it is remembered on this device for this screen only. Nothing is uploaded.
Measuring with the cm ruler, mm ruler or inches
The rulers run along the top and left edges of the measuring area, with zero at the top-left corner, just like an L-square. The cm / mm setting gives you a cm ruler with every millimetre marked, so it doubles as a mm ruler, inches switches to sixteenths (thirty-seconds where the screen is dense enough to show them clearly), and cm + in puts centimetres along the top edge and inches down the left edge at the same time. Butt the object against that corner and read the edge. For anything else, drag across the area: a measure line appears with its length in your chosen unit, the equivalents in the other units, its angle, and the horizontal (Δx) and vertical (Δy) components. Drag either handle to adjust it, hold Shift to snap to horizontal, vertical or 45°, or focus a handle with Tab and nudge it with the arrow keys — one pixel per press, ten with Shift.
| Mode | Graduations | Best for |
|---|---|---|
| cm / mm | 1 mm, with 5 mm and 1 cm marks | Small objects, jewellery, screws, ring sizes, paper |
| Inches | 1/32″ on dense screens, otherwise 1/16″ (1/8″ on very low-density screens) | US and imperial measurements; fractions shown with each reading |
| cm + in | cm/mm along the top, inches down the side | Converting between the two at a glance |
| Pixels | 10 px, with 50 and 100 px marks | Web and UI design, checking element sizes and spacing |
Full screen gives you the longest possible ruler — on a phone, turn it to landscape first. Pixel mode measures CSS pixels by default; tick Device pixels to count physical pixels on high-density screens. For converting the result into other units, use the unit converter.
How accurate is it, and printing a ruler
Calibrated with a card, the ruler is typically accurate to within half a millimetre over 10 cm — limited by how precisely you line the card up, and by your screen's pixel pitch (0.1 to 0.3 mm on most monitors). Look straight at the screen: viewing at an angle adds parallax error, especially on thick glass. Accuracy holds when you zoom the page or open a side panel, and the scale goes down to about 25 pixels per inch, so even a 65-inch 1080p TV can be calibrated. Changing your operating system's resolution or scaling, or moving to another display, means calibrating that setup once.
Need something on paper? Print a paper ruler prints an 18 cm and a 7-inch ruler built from printer millimetres rather than screen pixels, plus a 10 cm check line. Print at 100% or “Actual size” — “Fit to page” shrinks it — and measure the check line before trusting it. Printers are not calibrated to the screen, so the screen calibration doesn't apply to paper. For a quick sense of your display itself, the dead pixel test shows every pixel at native size.
Frequently asked questions
Is this ruler actual size?
Once calibrated, yes. Before calibration it uses the CSS standard of 96 pixels per inch, which is rarely correct, and the status says so. Calibrate once with a bank card, a coin or your screen's diagonal and the ruler matches real centimetres and inches on that screen. iPhones, iPads and recent MacBooks get a close automatic estimate straight away.
How do I calibrate the ruler with a credit card?
Press Calibrate, choose Bank card, and hold any standard card flat against the screen with its corner on the outline's top-left corner. Drag the round handle, or use the slider and plus and minus buttons, until the outline's edge lines up exactly with the card's edge. Press Save calibration. Any bank, ID or loyalty card of the standard 85.60 mm size works.
Does zooming the page break the calibration?
No. The calibration is stored as real screen pixels per millimetre against your screen's size and desktop position, and the ruler redraws using the browser's current pixel ratio, so zooming in or out — or docking a side panel or DevTools — keeps it true to size. Changing your operating system's resolution or scaling, or dragging the window to another monitor, is a different setup and needs calibrating once.
Can I use this ruler on my phone?
Yes. It works with touch: drag to measure and drag the handles to adjust. iPhones, including the X, 11 Pro, mini, Plus and Air models, and iPads start with an automatic estimate from their known pixel density; check it with a card. The card outline turns portrait on narrow screens so it fits. Turn the phone to landscape and use full screen for the longest ruler.
Why is my printed ruler the wrong size?
Your print dialog is almost certainly scaling the page. Choose 100%, “Actual size” or “No scaling” rather than “Fit to page” or “Shrink to fit”, then measure the 10 cm check line printed on the sheet. The printed ruler uses printer millimetres, so it doesn't depend on your screen calibration.
How many pixels are in a centimetre or an inch?
There's no fixed answer: it depends on your screen's pixel density. In CSS, one inch is defined as 96 pixels and one centimetre as about 37.8, but physically a phone might have over 400 pixels per inch and a large monitor fewer than 100. After calibrating, the quick facts under the ruler show the real figure for your screen.