Pixel Ruler

Why an on-screen ruler needs a calibration step

A pixel ruler measures in pixels, and a pixel has no fixed physical size. The same 600 pixels can cover 4.26 inches at one zoom setting and 12.77 inches at another, on the same screen. Any ruler that claims to show inches without asking about your screen is guessing, and the guess can be off by 50%.

Two things set the physical size of what you see. The first is the screen's pixel density, usually written as PPI, which is how many physical pixels fit in one inch of glass. The second is how the browser and the operating system scale content before it reaches the glass, which is where device pixel ratio and browser zoom come in. A calibrated ruler folds both of those into a single measured number, which is why it beats a PPI lookup.

The calibration step takes about 20 seconds. Hold a bank card against the screen, adjust the on-screen card outline until the two match, and the ruler knows how many pixels make an inch on your display. Everything after that is multiplication.

CSS pixels, device pixels and the 96 per inch rule

Web pages are laid out in CSS pixels, not physical pixels. The CSS specification defines one inch as exactly 96 CSS pixels, so 96 px is nominally an inch and 37.8 px is nominally a centimeter. That definition is a reference, not a promise about your monitor. It exists so a paragraph looks the same size on a 4K screen and a cheap laptop, and it is the reason a 96 px button does not measure one inch on either one.

Device pixels are the real dots on the panel. Device pixel ratio, which you can read in the browser as devicePixelRatio, says how many device pixels each CSS pixel covers. A laptop with a 2x ratio draws 96 CSS pixels as 192 device pixels. On a 141 PPI panel that is 1.36 inches of glass, not 1 inch, which is why the nominal inch is too small on most modern screens.

The CSS Values and Units specification spells out the 96 px rule, and the MDN page on devicePixelRatio explains how the browser reports the ratio. Neither one can tell you the physical size of your panel. Only a measurement can.

Calibrate with a credit card in about 20 seconds

A payment card is the handiest ruler you already own. Under ISO/IEC 7810 ID-1, a bank card, a library card and a driver's license are all 3.370 inches wide and 2.125 inches tall, or 85.60 mm by 53.98 mm. That is a fixed size, printed to a tolerance tighter than most people can see, which makes it a good reference.

To calibrate, put the card flat on the glass and line up its left edge with the zero mark. Then change the card width in the calculator until the on-screen outline matches the real card. Read the number in CSS pixels, type it into the calibration field, and the ruler is set for this screen at this zoom level.

Two notes on doing it well. Measure the long edge, since a longer reference divides the error into smaller pieces. And keep the card away from the edge of the screen, where some panels have a bezel that hides a few pixels. If you do not have a card, a US quarter is 0.955 inches across, which works as a shorter reference.

Worked example: 600 pixels on a 141 PPI laptop

Take a 15.6 inch laptop with a 1920 by 1080 panel. The diagonal in pixels is 2,202.9, and dividing by 15.6 inches gives 141.2 PPI. With the browser at 100% zoom and a device pixel ratio of 2, one CSS pixel is 2 device pixels, so one CSS pixel is 2 / 141.2 = 0.014164 inches wide. That is 70.6 CSS pixels per inch.

Now measure something 600 CSS pixels long. The PPI route gives 600 x 0.014164 = 8.498 inches. The calibration route, with the card measuring 238 CSS pixels, gives 3.370 / 238 = 0.014160 inches per pixel, and 600 x 0.014160 = 8.496 inches, or 21.58 cm. The two answers agree to within 0.2%, which is the point: the card measurement and the spec sheet should land in the same place, and when they do you can trust the ruler.

The spread in that table is the whole problem in one place. An inch is 91.8 pixels on one monitor and 230.7 on a phone at the same scaling, so a ruler built for one screen is wrong by a factor of two and a half on the other.

Browser zoom and system scaling move the ruler

Zoom changes the size of a CSS pixel without changing the number of CSS pixels in the layout. Press Control and plus twice and the page renders at 125%, which means each CSS pixel now covers 2.5 device pixels instead of 2. A ruler calibrated at 100% now reads 20% short, and it will report 8.50 inches for an object that is 10.64 inches wide on the glass.

System scaling does the same thing from the other direction. Windows display scaling at 150% raises the device pixel ratio to 1.5 on a typical laptop, so each CSS pixel covers 1.5 device pixels. The same 600 pixel measurement that read 8.51 inches at 2x now reads 6.38 inches, a 25% drop, with no change to the screen or the page.

This is why the calibration field matters more than the PPI field. A calibrated ruler measured at the current zoom keeps working at that zoom, because the card grows and shrinks with everything else. Change the zoom and you should calibrate again, which takes less time than reading this paragraph.

What the ruler can and cannot measure

On a calibrated screen the ruler is good to about 1% to 2%, which is a sixteenth of an inch over 6 inches. That is fine for checking a photo, sizing a text block, or seeing whether a 6 inch phone will fit in a pocket. It is not fine for anything that has to mate with a machined part.

Three limits are built in. The panel edge is not always where the drawing area ends, so the last few pixels near a bezel can be hidden. Anti glare coatings and screen protectors bend light slightly, which shifts the apparent edge by a pixel or two. And a curved monitor stretches the image near the sides, so a straight ruler drawn on screen is a little short at the edges.

What the ruler does well: comparing two on-screen objects, checking that a layout element is the size you intended, and estimating whether something in a photo is bigger or smaller than a known object. What it does poorly: anything over about 12 inches, anything that needs to be square, and anything where a millimeter changes the fit.

Checking the result against a real ruler

The fastest sanity check is to measure the same object twice, once on screen and once with a physical ruler. Put a card or a phone on the desk, measure its width in the calculator, then measure it with a tape. If the two numbers are within a sixteenth of an inch, the calibration is good. If they are off by more than that, the card width was probably entered wrong, or the page is at a different zoom than when you calibrated.

A second check uses a known screen dimension. A standard 15.6 inch laptop panel is 13.6 inches wide, and a 24 inch monitor is 20.9 inches wide. Measure the full width of the lit area and compare. A result that is 10% off points to a calibration mistake rather than a hardware problem.

One calibration slip is worth knowing about. Enter 233 CSS pixels for a card that measures 238 and the ruler reads 8.68 inches instead of 8.50, which is 2.1% long. At 12 inches that is a quarter inch of error, enough to matter when you are marking a cut. Five pixels sounds small, and at card scale it is about 2% of the reference.

When to skip the screen ruler

Use a tape measure for anything you will cut, drill or hang. A screen ruler cannot see the object, cannot account for the thickness of a frame, and cannot measure around a corner. It is a tool for the screen, not for the room.

Printed output is another case where the screen ruler does not apply. A print is sized in physical units at the printer's resolution, so a 300 DPI print of a 900 pixel image is 3 inches wide no matter what your monitor does. If you need a paper ruler, print one at 100% scale and check it against a card, since most printers shrink to fit by default.

For everything else, the screen ruler earns its place because it is already open. Sizing a screenshot, checking a font size against a design, seeing whether a button is thumb sized on a phone: those are the jobs it does well, and they are the reason to calibrate once and keep the number handy.