Calibration guide
How to Calibrate an Online Ruler
By OG Online Ruler team · Updated: September 30, 2026
Why calibration changes the result
A web page draws its interface in CSS pixels. A CSS pixel is a visual reference unit, not a promise that one browser pixel has a fixed physical width. Two displays can both be described as 1920 pixels wide while having very different physical widths. Browser zoom and operating-system scaling can change the relationship again.
Calibration finds the number of displayed pixels that correspond to one physical inch. Once that pixels-per-inch value is known, the ruler can convert centimeters, millimeters, and inches into an on-screen length. Without calibration, OG Online Ruler starts with a 96 PPI estimate. That is a useful interface default, but it should not be treated as an actual measurement of your screen.
Method 1: known device profile
- Open OG Online Ruler and select Calibrate.
- Choose the device method and search for the exact model.
- Check the model name, screen size, and resolution before applying the profile.
- Place a physical ruler against the displayed scale and compare a span of at least 5 cm or 2 inches.
This method is quick when the exact display configuration is known. It can be wrong when a product name has several screen options, when the operating system is using unusual scaling, or when the browser reports a viewport that does not match the catalogue profile. Treat automatic device detection as a suggestion and verify it with a physical reference.
Method 2: screen diagonal
If you know the physical diagonal and the pixel resolution, the pixel density can be calculated. The tool uses the Pythagorean relationship between the horizontal and vertical pixel counts:
PPI = √(pixel width² + pixel height²) ÷ diagonal inches
For example, a 1920 × 1080 display with a 24-inch diagonal has about 91.8 pixels per inch before browser and operating-system scaling are considered. The diagonal printed in a product specification usually describes the display panel, not the entire device or bezel. Enter the panel diagonal only.
This method works best on a conventional monitor at native resolution. It becomes less dependable if display scaling, browser zoom, mirroring, remote desktop software, or a non-native resolution changes the effective browser geometry. Always perform a physical comparison after applying the result.
Method 3: standard bank card
A standard ID-1 payment card measures 85.60 × 53.98 mm. In the card calibration panel, place a rigid card over the outline and adjust the slider until the long and short edges match. Use an undamaged card with square alignment; avoid flexible cards, embossed edges, phone images, or photocopies that may have been resized.
- Clean the screen and card so they sit flat without pressure.
- Use the long 85.60 mm edge because a longer reference reduces the proportional effect of a one-pixel alignment error.
- View the screen straight on. Looking from an angle creates parallax between the card edge and screen outline.
- Adjust slowly until both ends agree, apply the calibration, and then verify a separate 5 cm or 2 inch span.
How to verify the calibration
Verification should use a different reference from the one used to calibrate. If you calibrated with a card, compare against a physical ruler. Align the zero edge carefully and compare over a longer span. A 1 mm mismatch over 10 cm is easier to notice and interpret than the same mismatch over 1 cm.
| Observed result | Likely cause | What to do |
|---|---|---|
| Every length is too large or too small | Incorrect PPI, zoom, or display scaling | Return zoom to 100% and recalibrate. |
| Horizontal and vertical checks disagree | Reference alignment, browser transform, or unusual display geometry | Repeat with the object flat and test another browser. |
| Calibration changes after moving the window | The monitors have different physical pixel densities | Calibrate separately on the active monitor. |
| Only very short objects disagree | Alignment and endpoint-reading error | Use guides, magnify visually, and repeat the reading. |
Diagnose the result before measuring
If the scale remains too large or small, work through the zoom and scaling troubleshooting steps. For touchscreens, the phone measurement examples explain screen-fit and endpoint errors.
Accuracy limits
The displayed scale can be mathematically consistent while a physical reading still varies. The screen surface may sit above the pixels, the object may be thick or rounded, and the viewer may not be perpendicular to the display. Touchscreens can also introduce accidental scrolling or zooming. Use the nearest ruler edge, keep the object flat, avoid pressing on the display, and repeat the measurement.
Technical references: the W3C CSS Values specification explains CSS absolute units and reference pixels; MDN documents devicePixelRatio and page zoom; the card dimensions are defined by ISO/IEC 7810 ID-1.