Online ruler
Hold a small object up to your screen and read its length. Browsers cannot know how big a pixel really is, so the ruler starts with a standard guess; match a bank card or enter your screen size once and it becomes accurate. Your setting is kept in this browser only.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Choose centimeters or inches.
- Under Calibrate the ruler pick Bank card, put a card on the screen and move the slider until the box is the same size as the card. Use Smaller and Larger for fine steps.
- Press Save calibration. The marks now follow real millimeters.
- Lay the object against the ruler, starting at the zero mark on the left.
Why pixels are not centimeters
CSS defines 1 inch as 96 pixels, but that is a convention, not a measurement of your screen. A phone may fit about 6 CSS pixels in a millimeter while a desktop monitor fits about 3.8. The ruler therefore stores one number, CSS pixels per millimeter, and draws every mark from it. Centimeter rulers have a mark every millimeter; inch rulers have a mark every sixteenth of an inch.
Worked example
A 15.6-inch laptop shows 1920 × 1080 CSS pixels. The diagonal is √(1920² + 1080²) ≈ 2203 pixels and 15.6 in = 396.24 mm, so the scale is 2203 ÷ 396.24 ≈ 5.56 pixels per millimeter. A bank card is then drawn 85.6 × 5.56 ≈ 476 pixels wide.
Tips
- Calibrate on the device you will measure on; the number is different on every screen.
- Keep the card flat against the glass and compare its edge with the edge of the box.
- Small objects are easiest to read when the ruler is at the top of the screen.
Frequently asked questions
Why does a ruler on a screen need calibrating?
A CSS pixel is not a fixed physical length. Phones, laptops and monitors pack different numbers of pixels into an inch, and the browser does not report the real size. Matching a known object, such as a bank card, tells the page how many pixels make a millimeter.
How accurate is it?
As accurate as your match. With a card, expect roughly a millimeter of error if you line up the edges carefully. Using the screen diagonal depends on the stated size being exact and on the picture filling the whole panel, so the card method is usually better.
Do I have to calibrate again after zooming the browser?
The page compensates for browser zoom using the device pixel ratio, so a saved calibration usually stays right. If you move the window to a different monitor, or change the operating system's display scaling, calibrate again.
Where is my calibration stored?
In this browser's local storage under the key tools.ruler. It never leaves your device, and Reset to default removes it.