Screen Ruler

How to use the Screen Ruler

1. Select a measurement mode: line for single distances or box for rectangular dimensions.
2. Click and drag on the canvas to draw your measurement.
3. Read the measurement displayed in your chosen unit (pixels, centimeters, or inches).
4. Optionally adjust the DPI setting for accurate physical measurements on your monitor.
5. Click "Clear" to reset the canvas and start a new measurement.

CSS pixels vs. physical/device pixels

A "pixel" measured on screen with a tool like this refers to CSS pixels (also called logical pixels), the unit web layouts and design specs use, not the physical pixels of your display panel. On a high-DPI screen (most modern laptops and phones), one CSS pixel maps to two, three, or more physical pixels. This distinction matters if you're cross-checking a measurement against a design tool like Figma, which also works in CSS/logical pixel units. The numbers should match directly.

Frequently asked questions

Does it measure in pixels only, or other units too?

Pixels by default, matching how most design and CSS specs express measurements. This is the unit that maps directly to what you'd set in a stylesheet.

Will the measurement match what I see in browser DevTools?

Yes, it's measuring the same logical/CSS pixel space that browser inspector tools report.

Can I measure something across two monitors?

Measurements are confined to the browser window on a single display. For cross-monitor measurement you'd need OS-level tooling rather than a browser-based ruler.