Online Ruler
How far the ruler runs.
Calibrate below if you do not know it.
- 96
- PPI in use
- 37.8
- Pixels per cm
- 96
- Pixels per inch
Hold a real ruler or a bank card against the screen. A standard payment card is 85.60 mm wide, exactly 8.56 cm. Adjust the PPI until the card matches the ruler, then the measurements are correct for this screen.
Browser zoom breaks this
The ruler is drawn in CSS pixels, and zooming changes how many device pixels one CSS pixel covers. Reset zoom to 100% before measuring, and recalibrate if you change display scaling.
The ruler below is drawn at actual size in centimetres or inches. It only measures correctly once you tell it your display density, so there is a calibration step using a bank card. Every card in the world is the same size, which makes it the reference object almost everyone has to hand.
How it works
A browser draws in CSS pixels, and the CSS specification defines one inch as 96 CSS pixels regardless of the real display. On a screen whose true density is 96 pixels per inch a ruler drawn at that ratio is life size; on any other screen it is wrong by the ratio between the two.
pixels per centimetre = display PPI ÷ 2.54
- display PPI
- the real pixel density of your screen, in pixels per inch
- 2.54
- centimetres per inch, an exact definition rather than an approximation
- A standard payment card is 85.60 by 53.98 mm, the ID-1 size fixed by ISO/IEC 7810. Every credit and debit card matches it.
- Hold a card against the dashed outline and adjust the PPI until the two agree. The ruler is then correct for this screen.
- Centimetres are divided into ten, with a longer tick at the half. Inches are divided into eighths, which is the convention on a physical imperial rule.
- The presets cover common displays, but a preset is a starting point. Two 27-inch monitors at different resolutions have very different densities.
Browser zoom breaks the calibration completely, because zooming changes how many device pixels one CSS pixel covers. Reset zoom to 100% before measuring, and recalibrate after changing display scaling in your operating system.
Examples
A standard desktop monitor
Display
1920 × 1080 at 24 inches
Result
92 PPI · 36.2 pixels per centimetre
Close to the 96 the CSS specification assumes, so an uncalibrated ruler is only about 4% out on this screen, small enough to miss and large enough to matter over 20 cm.
A high-density laptop
Display
MacBook Air 13-inch Retina
Result
224 PPI · 88.2 pixels per centimetre
More than twice the assumed density. Without calibration the ruler would read less than half the true length.
Calibrating with a card
Reference
A payment card, 85.60 mm wide
Result
Adjust PPI until the card matches the outline
A card is more reliable than a coin, since coin sizes differ by country, and more precise than a sheet of paper, whose size differs between A4 and Letter.
Frequently asked questions
Why do I need to calibrate it at all?
Because a browser has no way to know your screen's physical size. CSS defines an inch as 96 pixels no matter what the display actually is, so on a high-density screen an uncalibrated ruler can be less than half life size. Calibration supplies the one fact the browser is missing.
Why use a bank card as the reference?
Because its size is fixed worldwide by ISO/IEC 7810 at 85.60 by 53.98 mm, and nearly everyone has one within reach. Coins vary by country and paper varies between A4 and Letter, so both are worse references.
How accurate is it once calibrated?
Within about a millimetre over 10 cm, which is enough for checking a size before ordering or measuring something small. It is not a substitute for a real rule where precision matters, since it depends on how carefully you matched the card.
Why did my ruler stop being accurate?
Browser zoom or a change in operating system display scaling. Both change how many device pixels a CSS pixel covers, which shifts everything drawn on the page. Reset zoom to 100% and calibrate again.
Is the ruler usable on a phone screen?
Yes, and calibration matters more there. Phone displays run from about 300 to over 500 PPI, so an uncalibrated ruler is badly wrong. The card trick works the same way, and the screen may be too narrow to show more than about 6 cm at once.
How is this different from the PPI calculator?
The PPI calculator works out a display's density from its resolution and diagonal size. Use it to find the number to enter here. This uses that number to draw something at actual size.