The problem with measuring things on screen
When you need to measure a UI element, a design mockup, or a physical object held against your monitor, guessing the pixel count and converting manually is error-prone. The Online Ruler at /design-css/templates/online-ruler solves this by providing a live, interactive measuring surface with horizontal and vertical axes. You pick your unit (cm, mm, inch, or pixel), calibrate the DPI to match your physical screen, and move your cursor to read x and y coordinates in real time. No screenshots, no image editors, no estimation.
The key insight is that screen measurement accuracy depends entirely on knowing your display's actual pixel density. A 24-inch monitor at 1920 by 1080 has roughly 92 DPI. A 27-inch 4K display has about 163 DPI. If the ruler assumes the wrong DPI, every centimeter and inch reading will be proportionally off.
Understanding DPI and why calibration matters
DPI stands for dots per inch, which in the context of screens means pixels per physical inch. The CSS standard assumes 96 DPI, which was accurate for CRT monitors in the 1990s but is wrong for virtually every modern display. A 13-inch MacBook with Retina display runs at 227 DPI. A typical 24-inch office monitor runs around 92 DPI. If the Online Ruler uses 96 DPI but your screen is actually 92 DPI, a reading of 10 centimeters on screen would correspond to about 10.43 physical centimeters, an error of over 4 millimeters.
Calibration closes this gap. You set the DPI field in the tool to your screen's actual value, and the ruler recalculates all physical-unit markings accordingly. For the most accurate result, hold a physical ruler against the on-screen ruler and adjust the DPI value until the markings align.
Supported units and when to use each
Centimeters (cm): best for measuring physical objects held against the screen or comparing on-screen layouts to print dimensions.
Millimeters (mm): useful for fine detail work like checking icon sizes, padding, or small component dimensions.
Inches (in): preferred when working with US-standard print sizes or imperial-specification parts.
Pixels (px): the native unit for web and UI development. No calibration needed since pixels are absolute screen units.
Switching between units is instant. The cursor coordinates update in the selected unit in real time as you move the mouse over the ruler stage.
How to find your screen's actual DPI
| Method | Steps |
|---|---|
| Manufacturer spec | Look up your monitor model online and find its pixel density in the specs sheet |
| Physical ruler test | Hold a ruler against the Online Ruler and adjust the DPI field until markings match |
| OS-reported value | On Windows, Settings then System then Display shows a scale percentage; on macOS, displays the logical resolution |
| Calculation | Divide horizontal resolution in pixels by the screen width in inches (e.g. 1920 / 24.5 = 78.4 DPI) |
Step-by-step: measuring with the Online Ruler
Select your preferred unit using the unit toggle buttons (cm, mm, in, or px).
Enter your screen's DPI in the calibration field. Start with 96 if unsure.
Move your cursor over the ruler stage and read the x and y coordinates in real time.
For greater accuracy, hold a physical ruler against the on-screen ruler and fine-tune the DPI value.
Use the horizontal axis for width measurements and the vertical axis for height measurements.
Mobile support and touch considerations
The Online Ruler works on mobile devices, but mobile DPI varies far more than desktop monitors. A phone screen might be 300 to 450 DPI, and tablet screens range from 150 to 260 DPI. The calibration step is even more critical on mobile. Since mobile browsers do not expose the physical DPI reliably through JavaScript, the most reliable approach is the physical ruler test: hold a real ruler against the screen and adjust the DPI value until the markings match. Touch events are supported, so you can tap and drag to measure instead of using a cursor.
Use cases beyond simple measurement
Web developers checking that a button is exactly 44 by 44 pixels for touch-target accessibility compliance. Designers verifying that a layout mockup matches intended print dimensions before sending files to production. Makers and engineers measuring a reference object on screen to reverse-engineer a part dimension. Students measuring diagrams in online textbooks when a printed copy is unavailable. The real-time cursor tracking makes the tool feel more like a physical measuring instrument than a static overlay. For related design tools, see the /blog/color-picker-tool, /blog/clamp-calculator, /blog/media-query-generator, and /blog/flexbox-playground. Learn more at /about.
Frequently asked questions
Q: How do I calibrate the ruler for accuracy?
A: Set the DPI field to your screen's actual pixel density. Most office monitors are around 96 DPI, while Retina displays are typically 144 to 192 DPI.
Q: What units are supported?
A: Centimeters, millimeters, inches, and pixels. Switch between them with the unit buttons.
Q: Why does the on-screen ruler not match my physical ruler?
A: The DPI calibration is likely incorrect. Measure a known physical length on screen and adjust the DPI value until the readings align.
Q: Does it work on mobile devices?
A: Yes, but mobile DPI varies widely. Calibrate carefully using a physical ruler for the best accuracy on phones and tablets.
