Web designers, front-end developers, graphic illustrators, and quality assurance testers frequently need to measure pixel dimensions across desktop applications. Verifying whether a button margin matches a design spec, measuring padding between UI elements, or checking an image’s pixel dimensions traditionally required taking a screen capture, pasting it into Photoshop or Paint, and counting pixels manually with marquee tools.
To streamline on-screen spatial measurements, Microsoft developed Screen Ruler as part of the official Microsoft PowerToys suite for Windows 11. Screen Ruler overlays an interactive measurement HUD directly on top of your desktop, automatically snapping to image edges, buttons, and text boundaries. Here is how to configure and use Screen Ruler.
Core Capabilities of Screen Ruler
Screen Ruler provides four specialised measuring tools designed for distinct spatial auditing tasks:
- Bounding Box Bounds: Click and drag a custom rectangular marquee to measure exact pixel width, height, and diagonal aspect ratio.
- Horizontal Spacing: Automatically projects an invisible horizontal ray from your cursor, snapping to neighbouring UI edges and measuring pixel spacing between elements.
- Vertical Spacing: Projects a vertical ray from your cursor, detecting header, paragraph, and footer margins automatically.
- Crosshair Tracking: Displays continuous coordinates and distances simultaneously along both the X and Y axes.
- Edge Detection Algorithms: Uses real-time edge-detection computer vision to identify contrasting UI borders, buttons, and dividers automatically.
Installing and Enabling Screen Ruler
Screen Ruler is built into Microsoft PowerToys:
- Install Microsoft PowerToys from the Microsoft Store or via Windows Package Manager:
winget install Microsoft.PowerToys --source winget - Open the PowerToys settings dashboard.
- In the left sidebar, click Screen Ruler.
- Ensure the toggle switch next to Enable Screen Ruler is set to On.
- Note the activation shortcut (default is Windows key + Shift + M).
How to Measure Elements on Your Screen
Using Screen Ruler across any active window takes just seconds:
- Open the website, application, or graphic layout you wish to inspect.
- Press the shortcut: Windows key + Shift + M.
- A compact control bar appears at the top centre of your primary display showing four measurement icons.
- Select your desired measurement tool:
- Bounds (Square icon): Click and drag a box around any UI element to see its width and height in pixels.
- Spacing (Horizontal line): Hover your cursor between two elements. Screen Ruler automatically detects the left and right borders and displays the exact pixel gap.
- Spacing (Vertical line): Hover above or below an element to see vertical margin distances.
- Cross (Crosshair): Hover anywhere to project simultaneous horizontal and vertical distance guides.
- To freeze a measurement on screen so you can copy the values, click once.
- Press Esc to exit Screen Ruler and return to normal desktop operation.
| Measurement Mode | Trigger Icon | Best Used For |
|---|---|---|
| Bounds | Dotted rectangle | Measuring custom graphic cards, logos, and banners |
| Horizontal Spacing | Horizontal arrows | Checking column gutters, button padding, and gaps |
| Vertical Spacing | Vertical arrows | Verifying line heights, section padding, and margins |
| Crosshair | Crosshair symbol | Full spatial coordinate positioning on screen |
Fine-Tuning Edge Detection Tolerance
Inside PowerToys Settings > Screen Ruler, you can adjust the edge-detection sensitivity:
- Pixel Tolerance: Determines how sharply colour contrast must differ before Screen Ruler registers a boundary. Lower values detect subtle light-grey borders, while higher values focus only on bold dividers.
- Line Colour: Customise the overlay guide colour (e.g., High-contrast Magenta, Neon Green, or Cyan) to ensure visibility against varied app themes.