Using macOS’ screenshot tool as a screen ruler

Using built-in tools on the Mac as a screen ruler to check design alignment and measure distances on the screen.

You can select a region of the screen by pressing Command–Shift–4 and then holding the cursor pressed while dragging it around. Without releasing the cursor, it makes for a convenient screen ruler that can be opened quickly up at any time. By releasing it you will take a screenshot or you can dismiss it by pressing the Escape key.

Screen ruler demonstration video

There are a bunch of third-party dedicated screen ruler applications. These do not work in OS X’s full screen mode, many cause problems with high-resolution Retina screens, and tend to be hard to use as they have too may features. These apps are priced at 22 Euro on average in the Mac App Store. Using the method I have described, however, will work on any Mac out of the box, is free of charge, and do not have any of the issues the other apps have.

Getting up close

You can zoom in on any area of the screen—even while using the screenshot utility—by holding the Control key and scrolling (wheel or finger gesture). This must first be enable through the System Preferences: Accessibility: Zoom: Use scroll gesture with modifier keys to zoom setting. After enabling it, you can zoom up close on the area of the screen where the cursor is resting.

The screenshot/selection tool and the zoom tool together allowing for some high precious work. Neat when you need to check if something is actually vertically and horizontally aligned in your designs.

Taking measurements

This method is not really suited for counting the distance between two points on the screen in pixels. There is a little pixel counter next to the cursor while dragging. However, it can be hard to position it exactly between the two points. When you need exact measurements, select the region and click to take a screenshot instead of dismissing the tool. The file will be created on your Desktop. Open it in Preview where you can drag, select, and then drag again to reposition the selection. This will allow you to do more precise alignments and measurements x.

Keep in mind that these rulers will measure in device pixels.