Online Ruler — Actual Size in cm, mm and Inches
A screen ruler that is genuinely to scale. Calibrate it once against any bank card — every card in the world is exactly 85.60 mm wide — and the centimetre and inch scales become true actual size on your display. Drag the marker to read a measurement in cm, mm and sixteenths of an inch, switch to a vertical ruler, and the calibration is remembered for next time.
Use Cases
How to use an online ruler at actual size
Hold any credit, debit or ID card flat against the screen and drag the slider until the outline matches its width exactly. That one drag tells the page your real screen DPI.
No card handy? Switch to Screen size and type your display's advertised diagonal in inches, or go to Enter DPI if you already know your pixels-per-inch.
Hold the object against the ruler and drag anywhere on the scale to move the red marker. Arrow keys nudge it a pixel at a time, Shift plus arrow moves ten.
The readout shows centimetres, millimetres, decimal inches and the nearest sixteenth. Switch to Vertical for tall objects; your calibration carries over and is saved for next visit.
Frequently Asked Questions
- Why do I need to calibrate at all?
- CSS pins one inch to 96 pixels no matter what screen you are on, so an uncalibrated on-screen ruler is only accurate by coincidence. A 141 DPI laptop would draw a "centimetre" about 47% too small. Calibration replaces that assumption with your display's real pixel density.
- Why a bank card?
- Because you almost certainly have one and it is a precision-manufactured reference. ISO/IEC 7810 ID-1 fixes every credit, debit and most ID cards at 85.60 by 53.98 mm worldwide, to a tolerance far tighter than you can see.
- Does the calibration stick?
- Yes. Your screen DPI is saved in this browser's local storage on this device and reloaded automatically. Reset clears it and returns to the uncalibrated 96 DPI default.
- How accurate is it?
- After card calibration, typically within a fraction of a millimetre — good enough for sizing a screw, a photo print, a ring or a phone case. It is not a substitute for calipers on precision work.
- Why did my ruler go wrong after zooming?
- Browser zoom changes how many CSS pixels fall in a physical inch, which is exactly what calibration measures. Reset zoom to 100% or recalibrate at your new zoom level.
- Does it work on a phone or tablet?
- Yes, and touch dragging works on the marker and the calibration slider. Calibrate in the orientation you plan to measure in, and remember the screen is usually shorter than the object you want to measure — use the vertical ruler for the extra length.
Three ways to calibrate, and when to use each
All three routes end at the same number — your screen's real DPI, the pixels it puts in one physical inch. They differ in how much they trust your hardware.
| Method | What you need | Accuracy |
|---|---|---|
| Bank card | Any credit, debit or ID card (ISO ID-1, 85.60 mm wide) | Best — measures what is actually on the glass, so browser zoom and scaling are included automatically |
| Screen diagonal | Your display's advertised size in inches | Good — but assumes no browser zoom and that the reported resolution matches the panel |
| Direct DPI | A pixels-per-inch figure you already trust | Exact if the number is right; useful for re-applying a known calibration on a new device |
| No calibration | Nothing | The CSS default of 96 DPI — correct only on a display that happens to be 96 DPI |
- Common effective densities: an older 1080p 24" desktop monitor sits near 92 DPI, a 15.6" 1080p laptop near 141 DPI, and a Retina MacBook reports around 96–110 CSS DPI because macOS already scales it. The wide spread is exactly why the uncalibrated default cannot be trusted.
- The ruler draws one SVG unit per CSS pixel with no scaling in between, so the tick spacing you calibrate is the tick spacing that reaches the screen.
Private by design. The ruler and your calibration run entirely in your browser — the saved DPI never leaves this device.