How to Measure Pixels on Your Mac Screen

Why you need to measure pixels on screen

Designers verify that the implementation matches the Figma spec. Developers check spacing between elements without switching to browser DevTools. QA testers confirm that a button is exactly 44 pixels tall across viewport sizes. And anyone writing a bug report benefits from saying "the gap is 12px, should be 16px" instead of "looks off."

macOS doesn't ship a dedicated screen ruler app, but there are several ways to measure pixel distances — from a built-in trick that costs zero setup to professional tools that measure in real time across any application.

Method 1: Use Cmd+Shift+4 as a free screen ruler

The fastest way to measure pixels on a Mac is a tool you already have: the screenshot crosshair.

1. Press Cmd+Shift+4 to activate the selection crosshair
2. Click and drag across the area you want to measure
3. Watch the width × height dimensions that appear next to the crosshair as you drag
4. Press Escape to cancel — no screenshot is saved

The crosshair displays the selection size in pixels in real time. If you drag from one edge of a button to the other, the number shown is the pixel width. Press Escape before releasing to cancel without creating a file.

Limitations

This method gives you the size of a rectangular selection, not the distance between two arbitrary points. You also can't measure diagonally or see the coordinates of a specific pixel. And on Retina displays, the values shown are logical points (not physical pixels), so a 100-point measurement equals 200 physical pixels on a 2x display.

Method 2: Use Digital Color Meter for coordinate tracking

Digital Color Meter is a built-in macOS utility (find it in Applications > Utilities) that shows the exact coordinates of any pixel your cursor hovers over.

1. Open Digital Color Meter from Spotlight (Cmd+Space, type "Digital Color Meter")
2. Hover your cursor over any point on screen
3. Read the x, y coordinates displayed in the window
4. Note the coordinates of point A, then move to point B
5. Subtract to get the pixel distance

This is clunky for measuring distances since you need to do math manually. But it's free, built-in, and gives you exact pixel coordinates — useful when you need to report a specific element's position rather than just its size.

Method 3: Shottr's measurement tools (free)

Shottr is a free screenshot app for Mac that includes dedicated measurement features. After capturing a screenshot, you can use its built-in tools to measure distances, spacing, and element sizes.

Measuring spacing in Shottr

1. Take a screenshot with Shottr
2. In the Shottr editor, select the Measure tool (ruler icon)
3. Click a starting point and drag to an ending point
4. Shottr displays the pixel distance as an overlay on the screenshot

Shottr also detects edges automatically. When you hover between two UI elements, it highlights the gap and shows the pixel distance. This is particularly useful for checking padding and margin values without opening DevTools.

Other Shottr measurement features

• Pixel ruler: Draw a line across the screenshot to see its length
• Dimension overlays: Click any element to see its width and height
• Zoom window: A magnified view that shows individual pixels for precise alignment checks

Method 4: PixelSnap for real-time measurement

PixelSnap (by the makers of CleanShot X) is a paid tool that measures distances in real time across any application — not just in screenshots, but on live windows.

How PixelSnap works

1. Activate PixelSnap with a keyboard shortcut
2. Hover over any element on screen — PixelSnap detects its edges automatically
3. The tool displays the element's width, height, and distance to neighboring elements
4. Click to lock a measurement, then hover to another element to see the gap between them

PixelSnap works across any app: your browser, Figma, Slack, Terminal. It uses smart edge detection to identify UI boundaries, so you don't need to line up crosshairs manually. This makes it significantly faster than the screenshot crosshair method for repetitive measurements.

Retina-aware measurements

PixelSnap understands Retina scaling and can display measurements in either physical pixels or logical points. You can toggle between modes, which is critical when comparing a 2x Retina screenshot against a Figma design that uses logical points.

Method 5: xScope for professional design QA

xScope is a professional measurement toolkit that includes a screen ruler, guides, dimension overlays, and alignment tools. It's designed for designers and developers who need pixel-level precision daily.

Key xScope tools

xScope integrates with Xcode through a companion iOS app, letting you overlay Figma designs on top of your running iOS simulator to check alignment pixel by pixel.

Measuring pixels in browser DevTools

If you're measuring web elements specifically, browser DevTools can be faster than any external tool.

Chrome DevTools

1. Right-click any element and select Inspect
2. The element's dimensions appear in the box model diagram (bottom of the Styles pane)
3. Hover over elements in the Elements panel to see their dimensions overlaid on the page
4. Use the Computed tab to see exact pixel values for width, height, margin, padding, and border

Quick CSS measurement trick

In the Console, you can measure the distance between any two elements:

// Get element positions
const a = document.querySelector('.element-a').getBoundingClientRect();
const b = document.querySelector('.element-b').getBoundingClientRect();

// Distance between their top-left corners
console.log(`Horizontal: ${b.left - a.left}px`);
console.log(`Vertical: ${b.top - a.top}px`);

This gives you exact pixel distances in the browser's coordinate system without any external tools.

Retina vs. logical pixels: what the numbers mean

On Retina Macs, every measurement has two values: logical points and physical pixels. Understanding the difference prevents confusion when your measurements don't match your design specs.

Rule of thumb: CSS, SwiftUI, and Figma use logical points. Screenshots and image editors use physical pixels. If you capture a screenshot on a Retina display and measure it in Preview, divide by 2 to get the CSS-equivalent value.

How to check your display's scale factor

1. Open System Settings > Displays
2. Hold Option and click Scaled to reveal all resolution options
3. The native resolution divided by the "looks like" resolution gives you the scale factor

On a 14" MacBook Pro, the native resolution is 3024 × 1964 and the default "looks like" resolution is 1512 × 982 — that's a 2x scale factor.

Quick reference: which tool to use