Screen Ruler

How to use

1. Match the credit-card reference or adjust the PPI slider.
2. Choose horizontal or vertical orientation.
3. Measure against the labeled centimeter and millimeter marks.

About this tool

A screen ruler measures layout distances directly against your display in centimeters and inches. Browser pixels are not automatically physical millimeters: operating-system scaling, browser zoom, monitor density, and the viewing device all affect the relationship. This ruler therefore includes an explicit calibration control rather than claiming that a default CSS pixel is physically accurate. Move the PPI slider until a known object, such as a standard credit card, matches its real width of 85.6 millimeters. The ruler then derives its tick spacing from pixels per inch: one inch is PPI pixels and one centimeter is PPI divided by 2.54. Horizontal and vertical orientations make it useful for checking widths, heights, spacing, print previews, and responsive mockups. Optional screen diagonal and width and height inputs provide a calibration hint for any display resolution. Calibration is saved in local storage so the ruler keeps its setting on the same browser and device. It is not a substitute for a physical measuring instrument when manufacturing precision matters; use it for design inspection and approximate on-screen comparisons. Keep browser zoom at a known value and calibrate again after moving to another monitor. The compact minor marks represent millimeters, while the labeled major marks represent centimeters. Everything is rendered locally, with no camera, network request, or external measurement service.

Frequently asked questions

Related tools