How to measure an object with an online screen ruler.

Step 1 — Decide what you are measuring

For a flat object, choose the dimension you need: length, width, or another straight-line distance. Keep the object close to the screen edge where the ruler begins so that alignment is obvious.

Step 2 — Choose the unit

Use centimeters for everyday dimensions, millimeters for small parts, inches where the object is specified in imperial units, or pixels when you are measuring a purely digital layout.

Remember that a pixel measurement and a physical measurement answer different questions. A 200 CSS-pixel gap can be useful for design work even when its physical length is not known.

Step 3 — Align to zero

Place one edge of the object against the ruler's zero point. Avoid using the browser window edge as an improvised zero if the ruler has its own origin. Click or place a measurement guide at the opposite edge and read the displayed value.

Step 4 — Decide whether calibration is required

For a rough comparison inside a webpage, a default estimate can be enough. For a physical object where the result needs to correspond to centimeters or millimeters in the real world, calibrate the display first using a known reference.

Calibration is especially important when using an unfamiliar monitor, a high-density phone, an external display, or a browser whose zoom level is not known.