Pixel Ruler

By Calxy · Calculation methodology

Measure on your screen in pixels, centimeters or inches. Pixel readings are exact; for true physical centimeters and inches, calibrate against a bank card or your display's PPI.

Printed from Calxy · https://www.calxy.net/tech/pixel-ruler

Check your inputs—Complete valid inputs to calculate a current result.
100200300400500
Ruler units

Calibration only matters for cm and inches.

Ruler length on this screen

600 px

  • Pointer positionMove over the ruler
  • CSS pixels per inch used96
  • CSS pixels per centimeter used37.795
  • Device pixel ratio1
  • Ruler width in physical pixels600

How this was calculated

CSS fixes 1 inch = 96 CSS pixels and 1 cm = 96 ÷ 2.54 ≈ 37.80 CSS pixels. Whether that is a real inch depends on your screen, scaling and zoom, so uncalibrated cm and inch readings are approximate.

Pixel readings are exact CSS pixels. Browser zoom changes how many screen pixels a CSS pixel uses; recalibrate after zooming.

How screen units relate

CSS defines fixed ratios between its units: 1 inch = 96 CSS pixels and 1 cm = 96 ÷ 2.54 ≈ 37.80 CSS pixels. A browser draws a CSS inch as 96 × device pixel ratio physical pixels.

That is only a real inch if the device's scaling happens to match its true pixel density, which is rare. Phones, laptops and external monitors all differ, and browser zoom changes the result, so an uncalibrated ruler in cm or inches is an approximation.

Calibrating for real-world size

Bank-card method: a standard payment or ID card (ISO/IEC 7810 ID-1) is 85.60 mm wide. Adjust the outline until it matches a real card held against the screen. If the match is 320 CSS pixels, then 1 inch = 320 ÷ 85.6 × 25.4 ≈ 94.95 CSS pixels.

PPI method: if you know your screen's physical pixels per inch (from its specification or the PPI calculator), CSS pixels per inch = PPI ÷ device pixel ratio. A 326 PPI phone at DPR 2 draws an inch as 163 CSS pixels.

Default CSS scale
UnitCSS pixels
1 inch96
1 cm37.795
1 mm3.780
1/16 inch6

Using the ruler

Move the pointer over the ruler to read the position. Pixel mode marks every 10 px with labels every 100 px; centimeter mode marks millimeters; inch mode marks sixteenths.

Calibration is not saved and applies only while the page is open. Recalibrate after zooming or moving to another screen.

References

Frequently asked questions

Is the on-screen ruler actual size?

Only after calibration. Without it, the ruler uses the CSS standard of 96 pixels per inch, which usually differs from your screen's real size. Match a bank card or enter your PPI for real-world accuracy.

How many pixels is 1 cm?

In CSS, 1 cm is 37.795 pixels. On a physical screen it depends on pixel density: at 96 PPI it is 37.8 pixels, at 326 PPI it is about 128 physical pixels.

Why is my ruler a different length after I zoom?

Browser zoom changes the device pixel ratio, so each CSS pixel covers more or fewer screen pixels. Recalibrate at the zoom level you will use.

Last updated . Results are estimates for informational purposes only.