macOS Screenshot Ruler: Measuring Elements on Screen
Measuring the dimensions of UI elements from macOS screenshots is a task that appears simple and turns out to have a meaningful Retina display complexity. A screenshot taken on a Retina display captures at 2× (or more) the logical screen resolution — what the display shows at 100pt becomes 200px in the saved image. Tools that report pixel coordinates in the screenshot file give double the logical point values you'd use in CSS or UI specifications. Getting usable measurements requires understanding which coordinate system a tool is reporting in and compensating correctly. This page covers the native tools available in macOS, the Preview Inspector approach for quick measurements, dedicated ruler utilities, and how to reason about the Retina scaling factor when converting screenshot pixel values to actual display point values. This is part of the how-to section. For macOS file verification and integrity tools, see Verifying macOS Installer Authenticity.
The Retina scaling problem
On a standard 2× Retina display, macOS screenshots are saved at twice the logical resolution. A button that appears 44pt tall on screen captures as 88px in the screenshot file. If you measure that button in an image editor and read "88px," the correct value for CSS or UI specs is 44pt (or 44px at 1× scale). The logical point value is always the screenshot pixel value divided by the display scale factor — typically 2 on Retina MacBook displays, sometimes 1.5 on Pro Display XDR depending on resolution setting.
The scale factor can be confirmed with:
# List displays and their scale factors:
system_profiler SPDisplaysDataType | grep -E 'Resolution|Retina|Scale'
# Or check the screenshot scale from a recently captured file:
mdls ~/Desktop/Screen\ Shot\ *.png 2>/dev/null | grep PixelHeight
# Compare against what you see on screen to determine the factor
Preview's Inspector for quick measurements
macOS Preview has a built-in pixel coordinate Inspector that works well for one-off measurements without installing any additional tools.
Open a screenshot in Preview, then enable the Inspector: Tools → Show Inspector (or ⌘I). The Inspector shows the pixel coordinates of the mouse cursor as you move it over the image. To measure an element:
- Position the cursor at one corner of the element. Note the X and Y coordinates.
- Move to the opposite corner. Note the second X and Y coordinates.
- Subtract: the difference in X is the width in screenshot pixels, difference in Y is the height.
- Divide by the scale factor (typically 2) to get logical point values.
Preview's Inspector reports coordinates in the image's native pixel space, not in logical display points. On a 2× Retina screenshot this means coordinates are doubled compared to what appears on screen. The Inspector does not automatically apply any DPI compensation. This catches most people the first time — the toolbar icon they're measuring reads as 48px in Preview but was designed at 24pt and appears 24pt tall on the actual display.
Selection-based area measurement
For measuring rectangular regions directly, Preview's rectangular selection tool combined with the Inspector gives dimensions without manual subtraction:
- Make a rectangular selection (drag with the rectangle selection tool) around the element.
- The Inspector updates to show the selection width and height in pixels.
- Divide by scale factor.
This is faster than the two-corner coordinate approach for elements you can cleanly select with a rectangle.
Preview resets the selection when you switch to another tool or click outside the selection. If you need to measure multiple elements in sequence, write down each measurement before clicking elsewhere — there is no measurement history or annotation layer in Preview's native Inspector. For batch measurements across a design review, a dedicated tool or a marked-up duplicate image is more practical.
Dedicated ruler tools
For design review work where you're measuring many elements, dedicated tools provide a better workflow. Several macOS utilities overlay a resizable ruler directly on top of any screen content — not just screenshots.
xScope (Iconfactory): The most fully-featured option. Includes rulers, guides, loupe, and screen measurement tools that work over any application. Expensive, oriented toward professional design workflows.
Ruler App (various freeware options in the Mac App Store): Simple overlay rulers at configurable lengths and orientations. Adequate for occasional measurement without needing screenshot capture.
Steuererklärung / ScreenRuler type tools: Several free or low-cost utilities provide a basic pixel ruler overlay. Useful for quick measurements where xScope's breadth is unnecessary.
On Apple Silicon Macs running macOS Ventura and later, screen recording permission is required for tools that overlay on other applications' windows. macOS's privacy model requires explicit permission for screen capture in System Settings → Privacy & Security → Screen Recording. First launch of any overlay ruler tool will prompt for this permission. Without it, the tool may only show its own window rather than overlaying on other content.
Screenshot capture modes and their coordinate implications
macOS provides several screenshot capture modes with different coordinate behaviours:
⌘⇧3 Full screen screenshot (all displays)
⌘⇧4 Drag-select region screenshot
⌘⇧4 then Space Window screenshot (captures window bounds, no desktop)
⌘⇧5 Screenshot panel with mode selection and timer
Window screenshots (⌘⇧4 Space) capture only the window content including the drop shadow. The drop shadow adds padding to the image — typically 20–30px on each side in 2× scale — which affects coordinate measurements if you're working from the edge of the captured image rather than the edge of the window content.
macOS Mojave (10.14) added the screenshot panel (⌘⇧5) which includes options for destination, timer, and whether to include the mouse cursor. The panel also introduced video capture. Prior to Mojave, all screenshot variants required memorising keyboard shortcuts; the panel provides a discoverable alternative. The screenshot utility also gained a floating thumbnail after capture (similar to iOS) that can be clicked to annotate before saving.
Practical workflow
For UI measurement in web or app design contexts: take a screenshot, open in Preview, use the Inspector or selection measurement to get pixel values, divide by scale factor, and note both the raw screenshot pixel value and the calculated logical point value. When communicating measurements to developers or in design specifications, always specify whether a value is in screenshot pixels or logical points, and specify the scale factor assumption — a 44px value with "at 2×" is unambiguous; "44px" alone in a Retina context is not.