Mac external displays for designers and developers

If you’re considering an external display for your Mac, there’s a few important decisions to make. Apple doesn’t sell external displays any more, so you can’t just default to their wisdom. That’s an issue, because not all displays are well suited for Macs.

I can’t really help you with this one. It’ll likely be set by your budget, desk space and personal preference. The factors below will play a role, too.

Retina or non-Retina? #

Thunderbolt 2 and DisplayPort 1.2 have a maximum resolution of 3840×2160 at 60FPS, which means non-Retina resolutions up to about 40-inch are supported by most current Macs. But, that only covers Retina displays up to 20-inch. Thunderbolt 3 equiped Macs, like the 2016 MacBook Pros, can run 27-inch Retina displays though.

There is another issue to contend with. Apple’s interface design in macOS is set up so it is comfortable for most people at a density of about 110 pixels per inch for non-Retina, and about 220 pixels per inch for Retina — text is readable and button targets are easy to hit at a normal viewing distance. Using a display that isn’t close to 110PPI or 220PPI means text and interface elements will either be too big, or too small.

The Display pane in System Preferences includes “larger text” and “more space” options. These can be used as a solution, but if you do, macOS will render the entire screen to a virtual canvas, then bitmap scale it up or down to the desired size. The result is blurry pixels, higher memory usage, more work for the GPU to do, and shorter battery life for laptops. You want to use the “default for this display” setting, if you can. It’s better quality, faster, and gives longer battery life.

Blurry pixels and a scaled display make it very difficult for designers and developers to see if elements are where they need to be. Elements that animate will appear to shimmer as they move. For me, “default for this display” is the only way to go.

The divider above shows the shimmering — it’s a 1pt or 2 Retina pixel line, but when the display is scaled down by a fractional amount (72%), those pixels don’t map directly to pixels on the display. As the list scrolls, the divider shimmers as the scaling represents the line differently.

You won’t need to choose a display that is exactly 110PPI or 220PPI. A slightly lower value will mean text and interface elements are larger. A slightly higher value will mean text and interface elements are smaller. You can use Sven Neuhaus’s PPI calculator to work out the pixel density of any display you’re interested in. Here’s a list of common external displays, with the 110PPI and 220PPI zones indicated.

Buying a display with a pixel density in the red zone usually isn’t a good choice, if you want to run “default for this display”. For example, 160PPI will show non-Retina UI too small, but Retina UI too large (it’s worth noting this can be used to buy a display that shows larger text and UI for those who need or prefer it).

The 4K iMac, 5K iMac and Surface Studio are listed as points of comparison, and can’t really be used as external displays. The Surface Studio’s 193PPI display is actually perfect for Windows, where the non-Retina (1×) UI scale is 96PPI, and the Retina (2×) UI scale is 192PPI. If I could buy a Surface Studio as an external display for my Mac, I think I would.

Wide gamut support? #

Wide colour gamut support — displays that use the Adobe RGB, Display P3, or DCI-P3 colour spaces — are great for photo editing, if your source material is created in those colour spaces.

But, the majority of web design, iOS apps, Android apps and game design is in the sRGB colour space. If that’s your line of work, you probably only need and want sRGB support (and an IPS LED display). Incorrectly set up, a wide gamut display used with non-colour managed software will produce overly saturated colours, and those colours won’t match how the final product is seen.

It’s often possible to put wide gamut displays into an sRGB emulation mode, or to calibrate them to sRGB. But, not always. I am unaware of a way to calibrate an 5K iMac to use sRGB (if you know, please get in touch). “99% coverage of the sRGB spectrum” or similar message in the marketing text is usually a good sign, and what you’ll want to look for if buying a display for web or app development.

There is another significant issue with wide colour gamut support — wider colour gamut stretches the same value range, 0-255 for 8bit per channel colour, over a larger range of absolute colours. The number of available steps is the same, and each step becomes bigger. Using a wide gamut display with colour management aware software also typically requires conversion to and from the display’s profile once, twice or more times for everything displayed. Doing so can result in rounding errors, which are presented as gradient banding or noise.

That’s all fixable by using more colour precision. The 5K iMac uses 16bit per channel for the macOS window manager and it sends 10bit per channel to the display. That’s a great fix, but it requires double the GPU memory, double the GPU memory bandwidth, and 25% more port bandwidth. That’s the likely future, but we’re just not there yet for the majority of displays.

In short, if you only need sRGB, buy an sRGB only display.