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.

The rulers along the top and left edges are graduated every 10 px with labels every 100, and a selection extends guide lines into both gutters so you can read a span directly off the scale. There are four ways to work with it:

• Drag anywhere on the surface to draw a region, and the readouts follow.
• Focus the surface and use the arrow keys, one pixel per press or ten with Shift.
• Turn on the crosshair for live coordinates.
• 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. The reason that conversion needs a calibration step at all, rather than a fixed formula, is explained in why two on-screen rulers never agree.

What a pixel ruler gets used for

Almost always the same handful of jobs, and all of them are comparisons rather than absolute measurements:

• Checking spacing is consistent. Design systems run on a scale, usually multiples of 4 or 8. A gap that measures 14 px in a layout built on eights is a mistake, and it is far easier to see with a ruler over it than by reading the code.
• Comparing a build against a mockup. Measure the same element in both. A heading that should sit 32 px from the edge and sits at 28 is the sort of drift that accumulates quietly through a page.
• Sizing an asset before exporting it. Measure the space the image will occupy, then export at that size times the device pixel ratio you are targeting.
• Settling an argument about a screenshot. Drop a guide line on an edge and the question of whether two things line up stops being a matter of opinion.

Why zoom changes the answer

Browser zoom does not magnify the finished page like a lens. It changes what a CSS pixel is worth, and the page is then laid out again at the new size. At 125 % zoom one CSS pixel is painted with 1.25 device pixels, so this surface still reports honest CSS pixels while everything on screen is physically larger.

That is the right behaviour, because CSS pixels are the unit you write styles in. It does mean that if you are comparing a measurement against a design file, both should be at 100 %. Ctrl+0 resets it, or Cmd+0 on a Mac. The device pixel ratio shown beneath the surface moves when you zoom, which makes it a quick way to check whether you are at 100 without hunting through a menu.

Guides, the crosshair and the keyboard

A double-click drops a dashed guide wherever you click, and guides stay put while you drag a selection around them, which is what makes checking alignment across a wide area practical. The crosshair reports live coordinates, useful when you want a position rather than a distance.

The keyboard is the part people miss. Focus the surface and the arrow keys resize the selection a pixel at a time, or ten at a time with Shift held. Dragging with a mouse is fine for getting close; the arrows are how you land on an exact figure, and they do not slip at the last moment the way a trackpad does.