How to use it
- Calibrate first. Press Calibrate with a card. Hold a bank, credit or ID card flat against the screen with one corner in the top left corner of the ruler. Drag on the ruler, or use the slider or the plus and minus buttons, until the blue outline lines up with the card's edge. Press Save. No card? Choose Screen size and enter your screen's diagonal instead.
- Pick cm and mm, Inches or Pixels. The second scale on the bottom and right edges shows the other unit.
- Put the object against the screen with one end at the zero corner and read the scale. Or drag across the ruler: Line measures a distance, Box measures a width and height. Drag either end to adjust it, and hold Shift to keep a line straight.
- Press Full screen or F to use the whole display. Press Esc or Exit to leave.
The readout under the ruler gives every measurement in millimeters, centimeters, inches and pixels at once. With a keyboard, click the ruler and use the arrow keys to move the end of the line one pixel at a time, or ten with Shift.
Why an online ruler has to be calibrated
A web page cannot find out how big your screen really is. Browsers lay pages out in CSS pixels, and the CSS standard defines an inch as 96 of them, but that is a convention, not a measurement: the same 96 CSS pixels can be less than 2 cm wide on a phone and about 3 cm on a large monitor. An online ruler that claims to be actual size without asking you anything is guessing. Until you calibrate, the corner of this ruler says GUESS.
You can calibrate in one of two ways:
- Bank card (most accurate). Bank, credit and debit cards use the ID-1 size from the ISO/IEC 7810 standard: 85.60 mm by 53.98 mm. Most driver's licenses and ID cards use the same size. Matching the outline to a real card tells the ruler exactly how many pixels make a millimeter on your screen.
- Screen size. Pixels per inch = the square root of (width squared + height squared), divided by the diagonal in inches. The page fills in the resolution as your screen's width and height times the device pixel ratio the browser reports. That is only right when the browser zoom is at 100%, and the diagonal has to be the visible screen from the maker's specifications. On a Mac set to a scaled resolution ("More Space"), the reported resolution is not the panel's native one, so use the card method there.
The calibration is saved in this browser only and belongs to one screen. On another monitor, or on your phone, calibrate again.
Zoom breaks the calibration
Browser zoom (Ctrl and plus or minus, or Cmd on a Mac) changes the size of everything on the page, including the ruler. Pinch zoom on a phone or trackpad does the same. So the ruler remembers the device pixel ratio at the moment you calibrated. If that ratio changes, because you zoomed or moved the window to another monitor, the corner shows ZOOM and a message asks you to set the zoom back or calibrate again. Pinch zoom shows the same warning.
Not every browser reports zoom changes to the page, so the simplest rule is: calibrate at the zoom you normally use, usually 100%, and leave it there. Ctrl and 0 (Cmd and 0 on a Mac) resets the zoom to 100% in most browsers.
Accuracy tips and what to measure
- Line up both edges. When calibrating, check the card's long edge and its short edge. If the outline matches one but not the other, your screen or browser is scaling the page unevenly, and a physical ruler is the better choice.
- Look straight at the screen. Screen glass puts a small gap between the object and the pixels, so looking from an angle shifts the reading. Keep your eye directly above the point you read.
- Press flat, gently. Hold objects flat against the glass without pressing hard, especially on a laptop lid or an LCD monitor.
- Good uses: screws, nails and bolts, buttons and beads, jewelry, small parts for a repair, the size of a printed photo or label, or whether something fits a box.
- Not for: anything that must be exact, like parts for machining or medical use. The screen is only as good as its calibration: use a physical ruler or calipers for those.
Pixel ruler: CSS pixels and device pixels
Choose Pixels to use it as a pixel ruler for web and design work. It counts CSS pixels, the unit that web pages and most design tools use for layout, and pixel mode needs no calibration. On a high density screen each CSS pixel is drawn with several device pixels: with a device pixel ratio of 2, a 100 px line covers 200 physical pixels. The readout under the ruler shows both, and the Screen size calibration panel shows your device pixel ratio.
Questions
Is this online ruler actual size?
It is once you calibrate it. Before that it uses the CSS standard of 96 pixels per inch, which is rarely the real size on a screen. Calibrate with a bank card or your screen's diagonal and the ruler shows real centimeters and inches.
What size is a bank card?
Bank, credit and debit cards use the ID-1 size from ISO/IEC 7810: 85.60 mm by 53.98 mm, about 3.37 by 2.13 inches. Most driver's licenses and ID cards use the same size, so any of them works for calibration.
How accurate is it?
It is as accurate as your calibration and the way you read it. The outline changes in half pixel steps, which is a small fraction of a millimeter on most screens, so the limit is how carefully you line it up with the card. For anything that has to be exact, use a physical ruler.
Why does it ask me to calibrate again?
The browser zoom or the display changed since you calibrated, which changes the size of the ruler on screen. Set the zoom back to where it was, or calibrate again. A different monitor or device always needs its own calibration.
Can I measure something in pixels on my screen?
Yes. Choose Pixels and drag a line or a box between two points. The readout shows CSS pixels and device pixels.
Does it work on a phone?
Yes, in either orientation. Open full screen, calibrate with the card held upright or sideways to match the screen, then drag with your finger to measure. Avoid pinch zoom, which changes the scale.