Pixels Are Not What You Think
When a designer says "make this button 200 pixels wide," which pixels do they mean? On a standard display, 200 CSS pixels equals 200 physical pixels. On a Retina display with 2x scaling, 200 CSS pixels equals 400 physical pixels. On a 4K monitor at 150% scaling, the relationship is different again.
This distinction matters because what you see on your screen and what gets measured depends on which type of pixel you are counting.
CSS Pixels vs Device Pixels
CSS pixels (also called logical pixels or device-independent pixels) are the units used in web development. When you write width: 200px in CSS, you are specifying CSS pixels. These are abstract units that scale with the display's device pixel ratio.
Device pixels (also called physical pixels) are the actual light-emitting elements on the screen. A 4K display has 3840 × 2160 physical pixels regardless of how the operating system scales the interface.
Device pixel ratio (DPR) is the multiplier between CSS pixels and device pixels. A 2x Retina display has a DPR of 2 — each CSS pixel maps to a 2×2 grid of physical pixels. A standard display has a DPR of 1.
This is why a screenshot on a Retina display is twice the dimensions you would expect. The browser renders at CSS pixel dimensions but captures at device pixel dimensions.
When You Need to Measure On-Screen Elements
Reviewing designs. When implementing a design from a mockup, you need to verify that spacing, font sizes, and element dimensions match the specification.
Debugging layout issues. An element is not the size you expect. Measuring it on screen confirms whether the issue is in your CSS or in your expectations.
Screenshot documentation. When preparing documentation or marketing materials, you need consistent dimensions and spacing.
Responsive testing. Checking that elements are the right size at different viewport widths and zoom levels.
Physical Dimensions vs Pixel Dimensions
Measuring physical dimensions (inches, centimeters) on a screen is inherently imprecise because it depends on the display's pixel density (PPI — pixels per inch).
A 24-inch monitor at 1920×1080 has approximately 92 PPI. A 27-inch monitor at 2560×1440 has approximately 109 PPI. A 5.8-inch phone at 2436×1125 has approximately 458 PPI. The same 200-pixel element appears at a different physical size on each screen.
Browser-based measurement tools can estimate physical dimensions using the display's reported PPI, but this is approximate. For precise physical measurement, a physical ruler is still the only reliable option.
How to Use the Toobits Screen Ruler
The screen ruler overlays a measurement tool on your browser window. Drag to measure the pixel dimensions of any on-screen element. The ruler displays measurements in CSS pixels, accounting for your browser's zoom level. Use it to verify element sizing during development, compare spacing in designs, or measure screenshots. Everything runs in your browser with no installation required.