How it works ↗
REAL ONLINE RULER / A HANDY LITTLE TOOL

Accuracy starts here.

A screen ruler needs a real-world reference. Here is how to make the marks match your display.

Calibrate with a known object

Open the ruler and choose Calibrate screen. Use a standard 85.60 mm wide payment card, a physical ruler, or any flat object whose length you know. For a card, match its long edge to the orange reference bar. For a custom object, enter its measured length in millimeters first.

Adjust the slider until the displayed bar matches that physical length, looking straight at the display. Save calibration and check it against a second known object. You never need to enter any card numbers or upload a card photo.

Why calibration matters

Browsers use CSS pixels, whose physical size depends on your monitor, browser zoom, and operating system scaling. The default 96 CSS pixels per inch is an initial estimate, not a physical measurement. Our calibration records how many CSS pixels represent your known reference.

When to calibrate again

Recalibrate after moving the browser to another display, changing zoom or system scaling, or rotating a mobile device if the scale appears different. We flag changes in reported screen settings, but a browser cannot reliably detect every monitor change. Always verify the scale before a measurement that matters.

Check your setup

  1. Use your usual browser zoom and keep it fixed.
  2. Hold the reference flat and match both ends of the orange bar.
  3. Save, then compare a different known length against the ruler.
  4. For precision work, verify with a physical ruler or calipers.
LET’S LINE THINGS UP

A real-world reference.

Hold a standard payment card’s long edge against the orange bar, or enter a known length. No card details needed.

Match this length ↔

Keep your zoom fixed. Recalibrate after changing monitors or display settings. Physical accuracy depends on your reference and alignment.