How to calibrate an online ruler

Last reviewed on 2026-04-23.

If you've ever opened an on-screen ruler and held something up to it, only to see that an "inch" on the screen was noticeably bigger or smaller than an inch in the real world, the cause is almost always the same: the ruler hasn't been calibrated to your specific display. A couple of minutes with a credit card fixes it, usually for good.

Why calibration is needed at all

A web browser draws things in CSS pixels. A CSS pixel is not a fixed physical size — it's a unit that the browser maps to the actual device according to screen pixel density, operating-system scaling, and browser zoom. The web was historically standardized around the rough idea that 96 CSS pixels equal 1 inch, but on modern high-resolution laptops, phones, and monitors the real-world size of 96 pixels can be anything from about 13 mm to more than 30 mm.

Calibration is simply telling the ruler how many CSS pixels on your screen add up to one real inch. Once that number is stored, every tick mark on the ruler lines up with real space.

Method 1 — Credit-card calibration (recommended)

This is the most reliable method because it relies on a physical reference whose size is standardized worldwide. Bank cards, debit cards, and most national ID cards follow the ISO/IEC 7810 ID-1 standard: 85.60 mm × 53.98 mm (3.370 × 2.125 inches). Every card in your wallet that fits a standard card slot is the same width, give or take a few hundredths of a millimeter.

  1. On the ruler page, tap or click the ⚙️ gear button in the header.
  2. Switch to the Credit card tab.
  3. Place a physical card flat on your screen, aligned with the on-screen reference rectangle. Hold it steady but don't press hard.
  4. Drag the slider until the on-screen rectangle is exactly as wide as the card. Sight along the edges; small misalignments are easy to see.
  5. When the widths match, tap Save calibration. The PPI value is stored in your browser's local storage and re-used on future visits.

For best accuracy, match the width of the card (the long edge). The short edge is shorter and gives less visual feedback to sight against.

Method 2 — Screen-diagonal calibration

If you don't have a card to hand, or you just want a reasonable starting point, you can tell the ruler the diagonal size of your screen. The ruler combines that with the resolution reported by your browser to estimate pixels per inch.

  1. Open the ⚙️ gear dialog.
  2. Stay on the default Screen diagonal tab.
  3. Enter your display's diagonal in inches (for example, 13.3, 14, 15.6, 24, 27).
  4. Tap Save calibration.

For a lot of laptops the diagonal is printed on a sticker on the device or on the manufacturer's product page. Tablets and phones usually advertise their diagonal in marketing material. Monitors list it in the model name (a "U2723QE" 27-inch monitor has a 27-inch diagonal).

Method 3 — Quick-calibrate dropdown

For very common devices — MacBook Air, MacBook Pro, common iPhones, standard monitor diagonals — selecting the model from the dropdown in the header applies a pre-computed PPI that matches the manufacturer's published specification. It's accurate enough for casual measuring and doesn't require any reference object.

Troubleshooting

The ruler looks wrong even after calibration

Check the basics, in order:

  1. Browser zoom. Zoom at anything other than 100% will throw calibration off. In most browsers, the keyboard shortcut Ctrl+0 (Windows/Linux) or ⌘+0 (macOS) resets zoom to 100%. Re-calibrate if you change zoom permanently.
  2. Operating-system display scaling. Windows "Scale" and macOS "Scaled resolution" change the relationship between CSS pixels and physical pixels. If you change the OS scale, re-calibrate.
  3. Second monitor with different PPI. A calibration saved on a laptop screen won't be right on an external 4K monitor. Re-calibrate on each physical display you use the ruler on.
  4. Installed as a PWA. If you installed the ruler as a PWA, calibration is saved against the installed app, which is a separate storage scope from the browser tab. Calibrate in whichever context you'll actually use.

The slider won't go high enough

Some very high-PPI screens (flagship phones, some 4K laptop panels) need more than the default slider maximum. In that case, use the screen-diagonal method — it computes PPI from your screen's reported resolution directly and is not limited by the slider range.

Calibration keeps resetting

Calibration is stored in localStorage on the specific origin inchruler.com. If your browser aggressively clears site data between sessions (Safari's intelligent tracking prevention can do this, as can private/incognito windows, and some privacy extensions), the value won't persist. Disabling "clear site data on exit" for this origin, or installing the site as a PWA, usually fixes it.

How often to recalibrate

In practice, very rarely. Once you've calibrated a given browser on a given screen at a given zoom level, the number stays correct. Recalibrate after any of the following:

How accurate can a calibrated on-screen ruler get?

With careful credit-card calibration, an LCD or OLED screen can hit roughly ±1 mm over the length of a typical ruler — good enough for everyday measuring, sewing, jewelry sizing, paper sizing, and most crafts. It is not good enough for machining tolerances or medical dosing. The measurement-accuracy page goes into more detail about where on-screen rulers belong in the toolbox and where they don't.

What to do next