How to measure pixels on screen in Windows

Short answer: Windows has no on-screen ruler. DevTools measure inside the browser, image editors inside their canvas — for everything else, use a free tool like Screen Ruler: align the zero edge, drag the marker, read the distance in pixels, ghost the window over the interface you are measuring.

Why you'd want to measure on screen

• Writing CSS: is that sidebar 320 px or 300 px? Measure instead of guessing, then set the breakpoint correctly.
• Accessibility: touch targets should be at least 44×44 px — a ruler verifies both dimensions in seconds.
• Design QA: comparing spacing in a mock-up against the live page, at the pixel level designers argue about.
• Presentations and print: checking what area an image can occupy at the projector's resolution.
• Curiosity with consequences: “how wide is this window actually?” before scripting something for it.

Method 1: the browser tools (inside the browser only)

F12 → Inspect → hover any element to see its box model. Perfect for the DOM — useless for a video player, a desktop app, a screenshot in an image viewer, or your own window.

Method 2: Screen Ruler — measure anything, anywhere

Download free — ScreenRuler-Setup.exe

1. Align zero. Put the ruler's left edge (horizontal mode) or top edge (vertical mode) where measuring starts.
2. Drag the marker line to the other end; polish with arrow keys — 1 px per press, Shift for ×10. A reset button snaps back to zero.
3. Ghost it: opacity slider down to 40% + Keep on top puts the translucent ruler straight over the element in question. Read the big value — ≈ 482 px.

Accuracy notes

One ruler unit is one screen pixel — the same px CSS speaks — when display scaling is 100%. At higher Windows scaling everything on screen, including your measurements, is in scaled pixels; if you need unscaled numbers, compare at 100%. Zooming a browser changes what you measure: measure at 100% zoom.

FAQ

Can I measure a diagonal distance?

No — measure the bounding box instead (width in horizontal mode, height in vertical): that is what layout systems use anyway.

Does it work on any monitor or scaling?

The window moves to any monitor and measures that screen's pixels; scaling behaves as described above.

What's the difference from a screenshot + editor route?

Speed and truth: no capture step, no zoom errors — you measure the live screen exactly as it renders right now.