Online Screen Ruler

An On-Screen Ruler That's Actually the Right Size

Every monitor and phone packs pixels at a different density, so a ruler drawn at a fixed pixel width is rarely accurate out of the box. This tool fixes that with a quick calibration step — either match an on-screen outline to a real bank or ID card (a fixed, known size worldwide), or enter your screen's diagonal size and let it calculate your exact pixels-per-inch. After that, the ruler below is drawn to true physical size in cm, mm, inches, or raw pixels.

How to use it

• Pick a calibration method: hold a bank card, ID card, or driver's license against your screen and drag the slider until the dashed outline matches its width exactly, or enter your screen's diagonal size in inches if you already know it.
• Once calibrated, switch between centimeters, millimeters, inches, and pixels using the unit dropdown — the ruler redraws to scale instantly.
• Keep your browser zoom at 100% while measuring; zooming in or out changes the CSS pixel size and throws off the calibration.

Real-world use cases

Checking whether a small part, screw, or SIM card will fit somewhere before you order it, roughly measuring a scar, mole, or swelling for a telehealth appointment, sizing up a phone case or accessory against your actual device, or quickly estimating an object's length when you don't have a physical ruler nearby.

Frequently asked questions

Why isn't a ruler on screen just "the right size" automatically?

Websites work in CSS pixels, and browsers don't reliably report your monitor's physical size or true pixel density — a 24-inch monitor and a 6-inch phone can both report similar CSS pixel dimensions. Calibration is the only reliable fix.

How accurate is the card-matching method?

Bank cards, ID cards, and driver's licenses are manufactured to a strict global standard (85.6mm × 53.98mm under ISO/IEC 7810), so matching the outline to a real card gets you very close to true scale.

What if I don't have a card handy?

Switch to "Enter screen diagonal size" and type your monitor or phone's advertised screen size (like 15.6" or 6.1") — the tool calculates pixels-per-inch from that plus your detected screen resolution.

Does this work on mobile?

Yes, and it's often more useful there since phone screens vary widely in pixel density — just make sure the page isn't pinch-zoomed in or out when you calibrate.

Can I measure in pixels instead of a physical unit?

Yes, switch the unit dropdown to "Pixels" to see a ruler marked in raw CSS pixels, useful for UI/design work where physical size doesn't matter.