Online Screen Ruler

Sometimes you only need to know how big something is: a sticker on screen, a shape in a mock-up, a photo you plan to print. A physical ruler held against the display works, but angles and thickness make it awkward. A ruler drawn on the screen would be perfect if the browser knew the real size of a pixel, and it does not. This page works around that by asking you to compare a rectangle against a bank card, then drawing a scale that matches.

Why browsers cannot know

A CSS pixel is defined as 1/96 inch, but only on paper. On screens the browser maps CSS pixels to device pixels using a scale factor, and the physical size of a device pixel depends on the panel, which the browser rarely reports accurately. Two laptops with the same resolution can have different screen sizes, and an external monitor connected over a cable may report a default. The result is that a “centimetre” in CSS can be visibly longer or shorter than a real one. Calibration against a known object removes that error for one screen.

A worked example

Press Sample to reset to the CSS default of 3.78 pixels per millimetre. The page shows “Not calibrated yet” and draws a ruler with centimetre numbers on top and inches below. At that scale a 30 cm ruler would be 1134 pixels wide, which is more than the window on most phones, so the page cuts the ruler to fit, at most 300 mm and fewer on a narrow screen. Now hold a bank card against the screen. A standard credit, debit or ID card is 85.6 by 53.98 mm. Drag the slider until the blue rectangle has exactly the size of the card, edges and corners lined up. The number beside the slider is the new scale, in pixels per millimetre.

Reading the ruler

Top scale: every millimetre has a short tick, every fifth has a longer one and every tenth, a centimetre, is the longest and is numbered. Bottom scale: inches in sixteenths. The longest tick is the whole inch and is numbered, then the half inch, quarter inch, eighth inch and the sixteenths. Switch the direction to vertical to measure heights; that ruler is 200 mm. Turn off the second scale if you want only centimetres, which gives a slimmer ruler.

Getting the best accuracy

Calibrate on the device where you will measure, with the browser at 100% zoom, and the window on the screen you will use. Compare the rectangle with a card using the left edge and the top edge, not the middle, and view the screen straight on to avoid parallax. After calibrating, check with a second object of known size, such as a coin or a printed ruler. The setting is saved in your browser, so you do not repeat the calibration on the next visit unless the screen changes.

Edge cases

Moving the window to another monitor breaks the calibration, because each monitor maps pixels differently. Phones and tablets scale web pages, so calibrate on the one you hold. Screen protectors, thick bezels and curved panels make no difference to the scale, but viewing angle does. Pinch-zooming also changes the scale, as does the operating-system display scaling setting; recalibrate after changing it.

Limits

A screen ruler is fine for sizing a sticker, comparing shapes or checking a template, but it is not an instrument. Do not use it for engineering, medical or legal measurement. The ruler reaches at most 300 mm horizontally and 200 mm vertically, and the accuracy is limited by how well you match the card on screen.

Related tools

• CSS Unit Converter shows how px, mm and inches relate in CSS.
• Print Bleed Calculator gives sizes in millimetres and inches for printing.
• Aspect Ratio Calculator works out the physical size of a screen.
• Placeholder Image Generator creates test images of exact pixel sizes.