"Retina" has become a household term. It's used to describe high resolution monitors & displays. But what is it really? How does it affect designers and creatives, and what does it mean for fonts?

In the last few years, Apple have been pushing the industry to higher resolution screens, which they’ve called Retina, and defined (loosely) as “pixels too small to see”, at least at a typical viewing distance. Many others are catching up, though, so what does it mean for you? Read on to find out.

What is resolution anyway?

In very simple terms, resolution is usually measured in PPI or DPI (pixels or dots per inch) and defines how tightly the pixels that make up an image are packed. While most designers have had “300 DPI for print” drummed into their heads early on, it’s a little fuzzier than that.

Here’s what a nice smooth blue sky looks like in print.

Because the offset printing process isn’t actually printing in a predictable square grid like a computer display, an image output at anything above 250 DPI is probably OK.

I absolutely don’t care what the resolution is here, because I’ll resize it in InDesign later.

So does the resolution in Photoshop matter?

Not as much as most people think. The only time it matters is if you place an image into InDesign (or other layout package) and don’t resize the image at all. Making an image smaller on the page increases the effective resolution, and making it larger decreases it. At the end of the day, it’s all about how many real pixels you’re trying to cram into a certain amount of space.

Plenty pixels to print this panorama at A4 size.

History

In the days of the original Mac, that screen was 72 DPI, as were many that followed it. That rough rule has stuck fast, with many claiming that “screen resolution is 72 DPI”. But the web has never cared about resolution settings, only about the number of pixels in an image. And screens aren’t even 72 DPI any more!

How many virtual pixels would you like to use today?

Today and beyond

These days, a regular PC display might be 80-90 DPI, a high-res 15” laptop even more. A Mac’s Retina display could be 250 DPI; an iPhone, iPad or modern Android device may well be over 300 DPI. The displays are still quite small, however, so providing a double-sized image for higher-resolution screens is usually all that’s needed to make a website look good on all modern devices. (For a quick fix, you can just double the image’s width and height, but keep the original HTML sizes. More comprehensive solutions are also available.)

This 5K Retina iMac 27” display is around 218 DPI, and it looks glorious.

Text for everyone

For text, using webfonts is a great idea. They work everywhere, text written with them is accessible, and because fonts are vector-based, your titles (and even icons if you use a custom dingbat font) will be drawn at the resolution of the output device. I’ve written about that here: Using Webfonts For Terrific Type Online.

Font Squirrel has long-provided free web fonts.

Moving images on big screens

We’re quite close to our computer displays and can see the detail in photos and videos quite clearly. But TVs are seen at a distance, and unless you sit close to a large TV, most of us are pushed to tell the difference between full HD and 4K images. That doesn’t stop me wanting a 4K image—the detail is all there on my Retina 5K iMac—but there’s more to an image than just resolution. Most of the time, I’ll happily take a high-quality HD picture over an average-looking compressed 4K image.

This 1080p 55” TV is only about 40 DPI, but I can’t see the pixels from the couch.

Conclusion

Even if 4K doesn’t take off in the way TV manufacturers would like, detail in an image is still valuable. For video production, even at HD, it lets you stabilize unruly footage without quality loss. For stills, it lets you see every pixel in your images, often more clearly than you’ll ever see them in print. For displays that you sit close to, it’s amazing: beautiful text and richly detailed stills.

So, then: if you’re a designer who doesn’t use a Retina display yet, you need to get your hands on one. Once you’ve tried it, you won’t go back, and you won’t want to use websites that aren’t Retina-ready either. As we move into a Retina-only world, you owe it to your eyes (and your clients!) to get across the new way to work—with more pixels than ever before. Enjoy!

Iain Anderson is an editor, animator, designer, developer and Apple Certified Trainer based in Brisbane, Australia. He has taught privately and in tertiary institutions, and has freelanced for Microsoft and the Queensland Government.
Comfortable with anything from Quartz Composer to Second Life and Final Cut Pro to Adobe Creative Suite, he has laid out books, booklets, brochures and business cards; retouched magazine covers and product packaging, shot and edited short films and animated for HD broadcast TV, film festivals and for the web.

macProVideo.com is an online education community for creative computer users. Our courses focus on artistic skills like Making Music, Video Editing, Graphic Design, 3D Modelling & Game Dev, Photography, and Web/Computer Programming. Created by artists, for artists, macProVideo.com is dedicated to helping YOU realize your dreams by learning new & inspiring computer skills.