On-screen Ruler
A calibrated ruler right on your screen.
How to use
- 1 Choose your unit: centimetres, millimetres or inches.
- 2 Hold a known object, such as a credit card, against the screen.
- 3 Enter the object's real length and the pixels it spanned, then apply the calibration.
- 4 Read measurements off the calibrated ruler.
About On-screen Ruler
The On-screen Ruler draws a real measuring ruler directly in your browser, marked in centimetres, millimetres or inches.
It is handy when you need to size something quickly and a physical ruler is not within reach — checking the width of an on-screen image, a printout preview, or a small object you can hold against the display.
Because every monitor packs a different number of pixels into each inch, an uncalibrated ruler is only a rough guide.
That is why this tool lets you calibrate: hold a known object against the screen — a credit card is a great choice, since it is a standard 85.6mm wide — line it up, then enter its real length and the number of pixels it covered.
The ruler instantly works out your screen's true pixels-per-inch and redraws itself to scale, so the marks match the real world.
The PPI you find is also shown, and you can reset to the CSS default of 96 at any time.
The ruler renders major ticks at every whole unit with numbered labels and finer minor ticks in between, so you can read measurements at a glance.
Everything happens locally — no calibration data or measurements ever leave your device — and the tool keeps working offline once loaded.
FAQ
Why does the ruler need calibration?
Screens vary in pixel density, so the same number of pixels can be a different physical size on each display. Calibrating to a known object makes the ruler match real-world lengths.
What can I use to calibrate?
Anything with a known size works. A standard credit or ID card is ideal because it is reliably 85.6mm wide, but any ruler or measured object will do.