How a screen ruler works
Understand CSS pixels, display density, and the scale value that turns browser coordinates into physical units.
How to calibrate your screen
Use a known physical reference and check zoom and display scaling before relying on physical measurements.
DPI vs PPI
Learn what the terms mean and why panel pixel density is different from CSS pixel coordinates.
Browser zoom & display scaling
See how browser zoom and operating-system scaling can change the apparent physical size of a page.
How to measure an object on screen
A practical process for aligning an object, reading the ruler, and deciding when calibration is necessary.
How to measure screen size
Measure the visible display area correctly and understand diagonal screen-size measurements.
Accuracy & limitations
Understand what the tool can estimate, what physical calibration verifies, and when a physical instrument is better.
The measurement model
Think of an online ruler as a conversion pipeline, not physical hardware. A browser supplies a coordinate system measured in CSS pixels. The application maps those coordinates to a physical-unit scale, while the physical display determines how large those coordinates appear in the real world.
That distinction explains why a ruler can be mathematically consistent and still be physically wrong on a particular display. Calibration closes the gap by comparing the rendered scale with something whose real-world length is known.
Start with the tool, then verify the physical scale.
Open the ruler, choose cm, mm, inches, or pixels, and use the calibration workflow whenever physical size matters. For browser-layout work, pixel coordinates may be the relevant measurement; for a physical object, verify the scale against a known reference.