On-Screen Pixel Ruler - Measure Anything on Your Screen

What is a pixel ruler?

An on-screen pixel ruler lets you measure distances on your screen in pixels, inches, centimetres, or millimetres. Move your cursor over the ruler to read the position in your chosen unit.

DPI and physical accuracy

Browsers work in CSS pixels, which are abstract units. One CSS pixel does not always equal one physical pixel. The physical size of a CSS pixel depends on the screen's DPI (dots per inch). The ruler uses your browser's devicePixelRatio to estimate DPI, but for accurate physical measurements you should enter your monitor's actual DPI.

How to find your screen DPI

Look up your monitor's model number and find its native resolution and physical size. Use this formula:

DPI = sqrt(H² + V²) / diagonal_inches

where H and V are the horizontal and vertical pixel counts and diagonal_inches is the measured screen diagonal.

devicePixelRatio explained

Modern high-DPI (Retina) displays use a devicePixelRatio greater than 1. A ratio of 2 means 2 physical pixels make up each CSS pixel, which makes text and images appear sharper but means the browser operates in a coordinate space half the physical pixel count.

A 4K monitor (3840 × 2160 physical pixels) running at 100% OS scale has a devicePixelRatio of 1 - CSS pixels align with physical pixels. Running the same monitor at 200% scale gives a devicePixelRatio of 2, and the browser behaves as if the screen is 1920 × 1080 CSS pixels. This is why the DPI estimate from the browser may not match the monitor's spec sheet DPI: the spec sheet reports physical pixels per inch, while the browser measures CSS pixels per inch.

Calibration guide

To calibrate the ruler for accurate physical measurements:

1. Find your monitor's native resolution (e.g., 2560 × 1440) and physical diagonal size (e.g., 27 inches) from the spec sheet.
2. Calculate true DPI using the formula above: sqrt(2560² + 1440²) / 27 ≈ 109 DPI.
3. Enter this value in the ruler's DPI input field.
4. Verify calibration by holding a physical ruler against the screen - the 10 cm mark on the physical ruler should align with 10 cm on the digital ruler.

Use cases

• Design QA: verify that a mockup renders at the correct physical size before production.
• UI spacing measurement: measure the pixel distance between elements in a design to verify spacing matches specification.
• Print sizing: confirm that an image or document will print at the intended physical size by measuring its on-screen representation at 100% zoom.