Precisely measure pixel distances on screen with multi-unit display
Zero Dependencies Β· Works OfflineβοΈ Settings
π‘ Tip: Place a card of known size on screen, adjust DPI until measurement matches actual size
π Measurement Area
Click and drag in the area below to measure
What Can the Screen Ruler Do?
The Screen Ruler is a free online tool that helps you precisely measure pixel distances on your screen. Click and drag in the measurement area to measure the distance between two points, with simultaneous display in pixels, centimeters, inches, and millimeters. Supports custom DPI calibration for accurate physical unit measurements. All computation happens on your device β Screen DPI, Measurement Mode and other inputs stay in your browser.
Key Features
- Drag to Measure: Click and drag in the measurement area for real-time distance display
- Multi-Unit Display: Simultaneous display in pixels (px), centimeters (cm), inches (in), millimeters (mm)
- DPI Calibration: Custom DPI value with physical ruler calibration for accuracy
- Measurement Modes: Free, horizontal-only, and vertical-only modes
- Scale Rulers: Horizontal and vertical scale rulers for positioning
- Copy Results: One-click copy of measurement results
Use Cases
Case 1: UI Design Measurement
Measure spacing and dimensions between elements in design mockups for precise implementation.
Case 2: Web Development
Measure actual pixel dimensions of web page elements for CSS layout debugging.
Case 3: Screen Size Verification
Verify that on-screen elements match expected physical dimensions, such as print previews.
Extended Knowledge
DPI (Dots Per Inch) is a key screen resolution metric indicating pixels per inch. Standard desktop displays are typically 96 DPI, while high-resolution (Retina) displays can reach 192-326 DPI. Pixel to physical unit conversion: centimeters = pixels / DPI Γ 2.54, inches = pixels / DPI. DPI calibration method: display a line of known length (e.g., 5 cm) on screen, adjust the DPI value until the measurement matches the actual length.
FAQ
How to use the screen ruler?
Click and drag in the measurement area to measure the pixel distance between two points.
How to set DPI?
Enter your screen's DPI value (default 96). Calibrate by aligning with a physical ruler and adjusting DPI until they match.
How accurate is the measurement?
Pixel-level accuracy. Physical unit accuracy depends on correct DPI settings. Calibrate DPI first.
Is my data uploaded?
No. This tool uses pure frontend technology. All measurements are done locally in your browser.
What measurement units are supported?
Supports pixels (px), centimeters (cm), inches (in), and millimeters (mm) with real-time conversion.