Calibrate four ways
Auto-detect your device, pick it from a list, enter your screen diagonal, or match a credit card on screen. One calibration makes every measurement true to size.
Free · No signup · No download
Your screen, turned into a real ruler .
Calibrate once for your display and this page becomes a measuring tool at true physical size. Hold a coin, a screw, or a swatch against the edge and read it in centimeters, millimeters, inches, or pixels.
Tip: keep browser zoom at 100% while measuring.
Advanced
Toggle the edges above to frame this area with rulers. Hold a small object against a ruler’s highlighted measuring edge and read its size. With Guides on, click anywhere here to drop a guide line; drag a line to move it, double-click it to remove it, Esc clears all guides.
Loading calibration… Keep browser zoom at 100% — zooming rescales the ruler. Press H for the full keyboard shortcut map.
One page, a full measuring bench
Calibrate once, then measure anything on your screen — here is what the page can do.
Rulers on all four edges
Pin a ruler to the top, bottom, left, or right edge — or all four at once — and frame anything on your screen inside a live measuring grid.
cm, mm, inches & pixels
Switch units instantly: metric ticks down to the millimeter, fractional inch marks, or raw CSS pixels for design work. Keyboard shortcuts included.
Guide lines
Drop horizontal and vertical reference lines anywhere, drag them into place, and read distances between them in your current unit.
Crosshair coordinates
A live crosshair follows your cursor and reports its exact X/Y position in the active unit — handy for layouts and alignment checks.
Fullscreen & dark mode
Expand to the full display for edge-to-edge measuring, and switch between light and dark themes. Your preferences are remembered.
How calibration works
Every screen packs a different number of physical pixels into each inch — a phone might hold 460, a desktop monitor closer to 100. Your browser, however, draws the page in CSS pixels, and it never tells websites their true physical size.
Calibration closes that gap. You give the page one trustworthy reference — your device model, your screen’s diagonal, or a credit card held against the display — and it computes exactly how many CSS pixels equal one real inch. From that single number, every tick mark on every ruler is placed at its true position.
-
Auto-detect
We match your device against a built-in display database and apply its factory pixel density.
-
Pick your device
Browse iPhone, iPad, MacBook, Android, and monitor entries and select your exact model.
-
Screen diagonal
Type your screen’s diagonal in inches; we derive the density from your resolution.
-
Credit card
Hold any bank card to the screen and drag a slider until the on-screen outline matches it.
The interactive calibration panel is live — open it from the ruler workspace above to calibrate with auto-detect, device pick, screen diagonal, or the credit-card method.
How to read the ruler
Centimeters
Each numbered line is one centimeter. The ten small ticks between numbers are millimeters — so the 4th small tick past 7 is 7.4 cm.
Inches
Numbered lines are whole inches. Between them, the longest unticked line is ½″, then ¼″ and ¾″, then eighths — just like a wooden ruler.
Pixels
Pixel mode counts raw CSS pixels from zero — the unit designers use for spacing, type sizes, and element dimensions on screen.
For the full treatment, see the dedicated guides: Reading the ruler · Centimeter ruler · Inch ruler · Millimeter ruler · Pixel ruler
Frequently asked questions
Can a screen ruler really be accurate?
Yes — but only after calibration. Your browser draws in CSS pixels, which have no fixed physical size. Calibration teaches the page how many CSS pixels make one real inch on your specific display. Once that number is known, every tick mark lands at its true physical position.
Why do I need to calibrate? Can’t the site just know my screen size?
Browsers deliberately hide your exact physical pixel density for privacy, so no website can measure your screen directly. The site starts from the web-standard guess of 96 pixels per inch; the four calibration methods replace that guess with your display’s real number.
Do I have to calibrate on every visit?
No. Your calibration is saved in your browser and reloaded automatically. Re-calibrate only if you switch monitors, change your display scaling, or notice measurements drifting.
Does browser zoom change the measurements?
Yes. Zooming rescales CSS pixels, so a ruler calibrated at 100% zoom will read wrong at 110%. Keep your browser zoom at 100% while measuring — the app reminds you of this.
What can I actually measure with it?
Anything small enough to hold against your screen: coins, screws, earring backs, SD cards, printed swatches, ring sizes. The longest straight measurement is your screen’s width or height.
Does it work on phones and tablets?
Yes. Open the page in any mobile browser, calibrate with your device model or the credit-card method, and the phone screen becomes a pocket ruler — surprisingly handy for quick checks.
Is my calibration data private?
Completely. Your calibration is stored only in your own browser’s local storage — it is never uploaded, and there is no account to tie it to. Clearing your browser data removes it.
Can I measure something bigger than my screen?
In sections. Measure the first screen-width, drop a guide at the end point, slide the object along, and add up the segments. The guides keep your place so the segments line up.
Why does the ruler look wrong on my second monitor?
Each display has its own pixel density, so a calibration done on your laptop does not transfer to an external monitor. Calibrate once per display, with the browser window on the display you are calibrating.
Which calibration method should I choose?
The credit-card method is the most accurate for most people, because it calibrates against a physical object of a known standard size (85.60 mm). The device picker is equally good when your exact model is listed; auto-detect is the fastest starting point.
Do I need to calibrate for the pixel ruler?
No. Pixel mode counts the browser’s own CSS pixels, which the page knows exactly — calibration only matters for physical units (cm, mm, inches). The trade-off is that pixel readings have no fixed real-world size.
Does it work in fullscreen?
Yes — press F or the Fullscreen button in the toolbar. Fullscreen gives you the longest possible ruler and removes browser chrome that could distract from measuring.