Online CM Ruler

Calibrate against a real object (credit card is 8.56 cm) if you need accuracy. Screen DPI varies widely.

A 30 cm ruler drawn straight in your browser, numbered at every centimetre and marked every millimetre. A screen has no idea how big it physically is, so the ruler starts from the browser default of 96 DPI and you correct it yourself: hold a bank card against the display and drag the Screen DPI slider until the card lines up with 8.56 cm on the scale. From that moment the ruler is true for that screen, and you can measure anything you can hold flat against the glass.

How to calibrate and measure

  1. 1

    Hold a known object against the screen

    Anything whose size you know exactly. A bank card is ideal: every card is 85.60 mm long, worldwide (ISO/IEC 7810 ID-1).

  2. 2

    Drag the Screen DPI slider

    Move it between 72 and 220 until the card matches exactly 8.56 cm on the ruler. That single number tells the page how large a pixel really is on your display.

  3. 3

    Write your DPI number down

    The ordinary one-page ruler returns to 96 when reloaded. In the multi-step ruler, the safe DPI setting travels in the page URL to the next steps, without separate persistent storage.

  4. 4

    Measure

    Hold the object flat against the screen, line one edge up with 0 and read the scale. If 30 cm is wider than your window, scroll the ruler sideways.

Why an on-screen ruler must be calibrated

CSS pixels are not physical units. Every browser assumes a nominal 96 pixels per inch, but a 13-inch laptop, a 27-inch 4K monitor and a phone all fit a very different number of pixels into the same centimetre. Without calibration, a span the page believes is 10 cm can land on your desk as 6 cm or as 14 cm. The Screen DPI slider is what closes that gap, and it is the reason every honest on-screen ruler asks you to do this once.

Reference objects you can trust

Object Real size
Bank card, long side (ISO/IEC 7810 ID-1) 85.60 mm
Bank card, short side 53.98 mm
CD or DVD disc 120 mm
A4 sheet, short side 210 mm
AA battery, length 50.5 mm
2-euro coin 25.75 mm
1-euro coin 23.25 mm

What this ruler actually shows

  • 30 centimetres, numbered at every whole centimetre.
  • Millimetre marks along the full length, with a taller mark at every 5 mm.
  • Centimetres only. There is no unit switch: for inches, use the online inch ruler (12 in, down to 1/8 in).
  • Nothing leaves your browser. The ruler is drawn locally, nothing is uploaded and no measurement is stored.

What people use it for

  • Craft and sewing. Checking a seam allowance, a button or a patch when the tape measure is in another room.
  • Print and packaging checks. Confirming a label width or a photo size before sending a batch to print.
  • Small parts. Screws, cables, SIM trays, anything you can lay against the screen.
  • Quick design checks. Seeing how large a button or a font really renders in the physical world.

Honest limits

  • The calibration is only as good as your reference. Lining a card up by eye gets you to roughly 1 to 2 percent, which is fine for craft, sewing and print checks, and no substitute for a real ruler when a single millimetre matters.
  • Keep browser zoom at 100 percent. Zooming rescales the CSS pixel and therefore silently rescales the ruler.
  • Recalibrate after any display change. A different monitor, or a change to Windows or macOS display scaling, needs a new DPI number.
  • Measure flat against the glass. Holding an object a centimetre away from the screen adds a parallax error of 1 to 2 mm.
  • Calibration is not kept in separate persistent storage. The ordinary one-page ruler returns to 96 on reload. In the multi-step ruler, the safe DPI setting is carried only in the page URL for its next steps.
  • You cannot measure more than the screen shows. The usable length is limited by your display width, even though the scale runs to 30 cm.

Frequently Asked Questions

Because the page starts from the browser default of 96 pixels per inch, which is only a convention, not a measurement. Your screen is almost certainly denser or sparser than that. Drag the Screen DPI slider until a bank card measures 8.56 cm on the scale and the ruler becomes true for your display.

The ordinary one-page ruler resets the Screen DPI slider to 96 on reload. In the multi-step ruler, the safe DPI setting is included in the page URL so it follows the next steps. It is not a stored measurement or a separate persistent profile.

Once you have lined a bank card up by eye, expect roughly 1 to 2 percent, so about 1 to 2 mm over 10 cm. That is good enough for a quick check and not good enough for engineering or anything that has to fit exactly.

Not in this tool: it draws centimetres only. Use the online inch ruler, which shows 12 inches graduated to 1/8 inch, or the length converter if you already have a number to convert. For the record, 1 inch is exactly 2.54 cm.

Yes. Any zoom other than 100 percent rescales CSS pixels and therefore the ruler. On a phone or tablet, pinch zoom does exactly the same, so calibrate at the zoom level you will actually measure at.

Related Tools