Pixel Ruler

Measuring in pixels, exactly

This is the one tool on the site that needs no calibration, and the reason is worth understanding. Every other tile converts pixels into physical units, and that conversion depends on knowing your display's real pixel density. A pixel ruler skips the conversion altogether. It measures pixels in pixels, so the answer is exact on any screen, at any density, with nothing to set up first.

Drag anywhere on the surface to draw a region and the readouts follow. The rulers along the top and left edges are graduated every 10 px with labels every 100, and the selection extends guide lines into both gutters so you can read a span directly off the scale. Prefer the keyboard? Focus the surface and use the arrow keys, one pixel per press or ten with Shift. Turn on the crosshair for live coordinates, and double-click to drop a guide line wherever you want to check alignment.

CSS pixels, device pixels, and why both matter

A CSS pixel is a layout unit, not a physical dot. On a standard display the two coincide. On any high-density screen a single CSS pixel gets painted using several device pixels, four at 2× and nine at 3×. The device pixel ratio is the number connecting them, and it appears beneath the surface for whatever display you are reading this on.

For front-end work the consequence is simple enough: you lay out in CSS pixels and export raster assets at the device-pixel size. An icon occupying 24 CSS pixels needs 48 px of real image data to look sharp on a 2× display, which is the whole reason srcset and @2x assets exist. Both figures sit side by side here so you are not doing that multiplication in your head.

The viewport percentages serve a related purpose. When you are converting a fixed-width mockup into responsive CSS, knowing an element is 20% of the viewport width is more directly useful than knowing it is 240 px, because it translates straight into vw and vh.

What a browser-based pixel ruler cannot do

It can only measure inside its own page. A web page cannot see other windows, other tabs or your desktop. That isolation is a deliberate and important security boundary rather than a limitation to route around. Measuring a native application's interface, or anything else outside the browser, calls for a desktop screen-ruler app with the right system permissions.

Within those bounds this is exact. For physical units instead of pixels, the online ruler converts using your screen calibration, and the screen size checker reports resolution, pixel ratio and density together in one place.