How to calibrate your on-screen ruler

Why calibration is the whole game

A physical ruler is trustworthy because its marks were printed at known distances. A screen ruler has no such guarantee: the same 96 CSS pixels can be a full inch on one laptop and noticeably less on a high-density phone display. The site starts from the web-standard guess of 96 pixels per inch, then replaces it with your display’s real number. Everything else — centimeters, millimeters, fractions of an inch — is arithmetic built on that one number, so getting it right matters more than anything else on this site.

The four methods

Open the calibration dialog from the toolbar on the home page ruler and pick whichever method fits what you have at hand. All four save automatically to your browser.

1. Auto-detect

The fastest option. The page reads your screen’s resolution and your browser’s best guess at the pixel ratio, then estimates the density. It is right surprisingly often on mainstream laptops and desktops, and it is the method to try first. If measurements later feel slightly off, switch to one of the manual methods below.

2. Pick your device

Choose your phone, tablet, laptop, or monitor from the built-in list of known displays. Each entry carries that model’s manufacturer pixel density, so the math is exact for that panel. This is the best method on mobile, where model detection is reliable — your phone becomes a pocket ruler in about ten seconds.

3. Screen diagonal

Enter your screen’s advertised diagonal size (13.3″, 15.6″, 24″, 27″ — it’s on the box or the manufacturer’s spec page) and the page derives the density from your resolution. Quick and decent, but only as accurate as the advertised number, which is sometimes rounded.

4. Credit card

The most accurate method for most people. Hold any standard bank or ID card against the on-screen rectangle and drag the slider until the two match exactly. Cards follow the ISO/IEC 7810 ID-1 standard — 85.60 × 53.98 mm — so you are calibrating against a physical object of a known size. Take your time with the slider; half a millimeter of mismatch here is the whole error budget.

Tips for the best accuracy

• Use the card method last, not first. It’s worth the extra minute — it removes every assumption about your display.
• Keep browser zoom at 100%. Zooming rescales CSS pixels, so a ruler calibrated at 100% reads wrong at 110%. The app reminds you of this in its status bar.
• Calibrate on the display you’ll measure on. Laptop screen and external monitor almost always have different densities.
• Check your OS display scaling. If you change the scaling setting (125%, 150%) after calibrating, recalibrate — the CSS-pixel-to-physical mapping changed.
• Sanity-check with something known. After calibrating, measure your credit card (85.60 mm wide) or a US quarter (24.26 mm across). If it reads right, you’re set.

When to recalibrate

Almost never, day to day. Your calibration is stored in your browser under ror-calibration and reloaded on every visit. Recalibrate only when the display itself changes: a new monitor, a different laptop, a changed scaling setting, or docking and undocking. If measurements ever feel like they’ve drifted, the two-minute card check above will tell you the truth.

Frequently asked questions

Which calibration method is the most accurate?

The credit-card method is usually the most accurate because it calibrates against a physical object of a known, standardized size (85.60 mm wide) that you hold against the screen. The device picker is equally good when your exact model is listed. Auto-detect is a solid starting point, and the diagonal method is best used as a fallback.

How often should I recalibrate?

Only when something about your display changes: a new monitor, a different laptop, a changed OS display-scaling setting, or docking/undocking. Your calibration is saved in the browser, so day-to-day you never need to touch it.

Does calibration work on a second monitor?

Each display needs its own calibration, because pixel density differs between screens. Calibrate once per monitor; the saved value applies to whichever display the browser window is on when you calibrate. If you move the window to another monitor, recalibrate there.