Screen Ruler

Pixel measurements are exact. For physical units (mm, cm, inches), accuracy depends on your display's actual PPI. Use the credit card calibration — hold a real credit card against the screen and drag the handle until they match — for accurate real-world measurements. Your calibrated PPI is saved automatically for future visits.

Click the Cal button, hold a real credit card against your screen beside the on-screen card, then drag the right-edge handle until the widths match exactly. A standard credit card is 85.6 mm wide. The ruler recalculates PPI and saves it to your browser.

Press F or click the Fullscreen button to expand the ruler to fill your entire screen. This maximises the measurement length — useful for measuring large elements or using the All Directions layout across the whole viewport.

Click the All button to show four rulers simultaneously — top, bottom, left, and right edges of the screen — each with independent measurements. A centre panel shows all active readouts at once. Best used with Fullscreen for full viewport coverage.

Yes. After dragging a measurement, click Pin to save it. Up to 5 measurements can be pinned with editable labels. Click the restore icon on any pin to bring it back on the ruler. Pinned measurements persist for the session.

Hold Shift and click anywhere on the ruler to move the origin (0 point) to that position. An amber marker shows the zero point. This is useful for measuring relative distances from a specific reference point. Press R to reset.

F = fullscreen, R = reset, + / − = zoom in/out, Arrow keys = nudge end marker 1 px, Shift+Click = set zero point, ? = show shortcut cheatsheet, Esc = exit fullscreen.

Yes. Toggle to Vertical (V) orientation using the button in the toolbar. You can also use the All Directions layout which shows vertical rulers on both sides simultaneously.

Yes. Your selected unit (px, mm, cm, or in) and calibrated PPI are saved to your browser's localStorage and restored automatically on your next visit.