How to use the online ruler
- Choose Both units, Inches or Centimeters. Both units puts inches on the top edge and centimeters on the bottom, like a real 12 inch ruler.
- Press Calibrate. Until you do, the ruler assumes 96 pixels per inch, a software convention rather than your screen's real size.
- Hold a credit card flat against the screen. Pick the Reference edge (long on a monitor, short on a phone), then drag the slider or edit the Pixels per inch (PPI) box until the amber bar matches that edge of the card.
- No card? Type your Screen diagonal (inches) and press Estimate PPI.
- Press Apply, line your object up with a 0 mark and read the other end. Scroll the ruler sideways for the rest.
How the ruler is scaled
A browser draws in CSS pixels, and the CSS standard defines 1 inch as 96 of them whatever your screen is (W3C CSS Values). So the tool needs one number from you: how many CSS pixels fit in a real inch. It draws each inch as that many pixels and each centimeter as that number divided by 2.54, with marks every 1/16 inch and every millimeter. The reference is a credit card because bank cards share the ISO/IEC 7810 ID-1 size of 85.60 by 53.98 millimeters (ISO/IEC 7810). Your setting is saved in this browser only, with the page zoom at that moment, so a later zoom rescales the ruler.
Worked example
On opening, the tool shows 96 pixels per inch: 1 in is 96 px and 1 cm is 37.8 px (96 divided by 2.54). In the calibration panel the long card edge is a 324 px bar. Enter a 15.6 inch laptop that reports 1536 by 864 pixels: the diagonal is 1,762.3 pixels, and dividing by 15.6 gives 113 PPI. The bar grows to 381 px, 1 in becomes 113 px, 1 cm becomes 44.5 px and the 12 inch ruler is 1,356 px long. Hold the card up and nudge the PPI if the ends do not meet.
Limits and edge cases
- A calibration belongs to one screen. Moving the window to another monitor, or plugging in an external display, means calibrating again.
- Estimate PPI uses the screen size your browser reports and ignores the bezel, so enter the advertised diagonal and confirm with a card.
- Convert a reading with the length converter, or look up your pixel dimensions with the screen resolution checker.
Frequently asked questions
How do I make an online ruler show actual size?
Calibrate it. Hold a credit card against the screen, press Calibrate, drag the slider until the amber bar is as long as the card edge, then press Apply. The setting is saved in this browser, so you do it once per screen.
Why is a screen ruler the wrong size without calibration?
Browsers draw in CSS pixels, and CSS defines 1 inch as 96 of them on every screen. A 24 inch 1080p monitor has about 92 pixels per inch, but a 13.3 inch 1080p laptop at 100 percent scaling has about 166, so an uncalibrated inch there is only 0.58 of a real inch.
Can I use the ruler on my phone?
Yes. Choose the short edge as the Reference edge, because a card's long edge is wider than most phone screens held upright. Phones usually land between 150 and 165 pixels per inch. The ruler scrolls sideways.
Does zooming the browser change the ruler?
Zoom changes the size of a pixel, so the tool saves your zoom with the calibration and rescales the ruler when it changes. Calibrate at 100 percent zoom for the best accuracy. Pinch zoom on a phone is not detected.
How accurate is an on-screen ruler?
After calibrating with a card, expect an error of about 1 to 2 percent, which is 1 to 2 mm over 10 cm. That suits everyday jobs such as checking a ring, a screw or a printed photo. For fine work, use calipers.
Sources: W3C, CSS Values and Units Module Level 3 (1in = 96px); ISO/IEC 7810, ID-1 card format.