Online Ruler & Calibrator
Measure physical dimensions on your screen in centimeters, inches, or pixels using card-based display density calibration.
Step 1: Calibrate with a Credit Card
Hold a real credit/debit card (or any standard ID-1 card, 85.6 × 53.98 mm) up to the screen rectangle below. Adjust the slider until the visual box matches your card's physical width exactly.
Step 2: Interactive Measure Track
Click & drag along the ruler, or click on the ruler track and use Arrow Keys to fine-tune the width.
How this online ruler works
Every display has a different pixel density, so a fixed number of on-screen pixels doesn't correspond to the same physical size on every device — a 100px box looks bigger on a low-DPI monitor than on a Retina laptop screen. This tool solves that with a one-time visual calibration: drag the slider until the rectangle matches a real credit card (85.6 × 53.98 mm, the standard ISO/IEC 7810 ID-1 size used by all bank cards, driver's licenses, and gift cards). That gives an exact pixels-per-millimeter ratio for your screen at your current browser zoom level, which is then used to draw an accurate ruler and convert your click-and-drag measurements into real centimeters or inches.
Your calibration is saved locally in your browser (localStorage) so you only need to do it once per device — nothing is uploaded or sent anywhere. If you change your browser's zoom level, re-run the calibration since it changes how many real pixels each CSS pixel occupies.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Measuring something on screen in pixels.
- Measuring a physical object against a calibrated on-screen scale.
- Checking a printed layout's dimensions against an on-screen proof.
- Measuring an element's size without devtools.
- Comparing two on-screen distances without opening developer tools.
Frequently Asked Questions
- How can a screen ruler be accurate?
- Only after calibration against a known object — a bank card is the usual reference, since it is a standard 85.6 mm. Without that step the measurement depends entirely on your display's pixel density.
- Why is a CSS pixel not a physical pixel?
- Because it is a reference unit of about 1/96 inch at arm's length, scaled by the device pixel ratio and any browser zoom. Two screens can report the same CSS width at very different physical sizes.
- Does browser zoom affect it?
- Yes, and it invalidates a previous calibration. Anything measured after changing zoom is wrong by that factor, so recalibrate rather than trusting an earlier setting.
- Is this accurate enough for real work?
- For rough checks, yes — a few percent after careful calibration. For anything where the tolerance matters, a physical ruler is both faster and more trustworthy.
Common errors and gotchas
- Using it in physical units without calibrating, where the result depends entirely on the display's DPI.
- Calibrating once and changing display or zoom, which invalidates it silently.
- Assuming browser zoom is at 100%, which changes every measurement.
- Measuring across a multi-monitor setup with different pixel densities.
- Trusting it for anything requiring real precision, where a physical ruler is the right tool.