Apple introduced the Retina display with the iPhone 4 in 2010. It was a very nice display. Other manufacturers soon adopted Retina resolution in their products. It’s no surprise, since everyone wants to compete with better hardware specifications. However, Retina displays have made a far broader impact, driving interest and demand for products and services in other areas.
Just to recap, the iPhone 4’s Retina display had a pixel density of 326 ppi, which meant the pixels were so small we cannot see them individually. Of course, this depends on the viewing distance, and indeed, the pixel density varies from device to device based on the typical viewing distance applicable for that device.
I first checked out the Retina display fuss when Apple launched the MacBook Pro with Retina display in 2012. I played with a demo unit at a store for a couple of minutes. The display was really nice and crisp. Then, I went over to a non-Retina display MacBook Pro, and immediately noticed the big difference. I joked that the Retina displays are going damage our eyesight, because once your eyes are set on a Retina display, every non-Retina display will become an eyesore.
Subsequently, I started to own many gadgets with Retina type resolutions. I have a 3rd generation iPad, which has a Retina display, and it looked gorgeous. Webpages, magazines, and just about everything just looked so beautiful. It was so comfortable reading text on an iPad. The same can be said for my 2nd generation Nexus 7. The exact same webpage that didn’t look quite so nice on my old desktop monitor, somehow looks so polished on my Nexus 7.
The very high display resolution has made it possible to render text with such clarity, detail, and smoothness, that they pretty much look like printed text.
I’ve been interested in web design. I’m not a web designer, but I know a pretty website when I see one. The visual design on a website isn’t just about elements like layout, spacing and great graphics, but also about the careful selection of fonts. It’s the same in other media. Fonts are important. However, computers had limited display capabilities in the past, and beautiful fonts don’t always make things better. In fact, sometimes beautiful fonts looked worse on a computer display.
Indeed, the limitations of computer displays in the pre-Retina age led web designers to choose fonts based on different criteria. It was most important to choose fonts that were clear and readable on-screen. That’s how some of our modern age fonts came about. Verdana and Georgia, for example, are excellent examples of sans serif and serif fonts, from Microsoft, which were designed for clarity on computer screens.
Retina resolution, however, has moved us forward. The computer screen is almost like a canvas of paper. You can create visual masterpieces for computer screens without worrying about pixels, or having to think about antialiasing, sub-pixel rendering, etc.
In 2010, the only Retina resolution display was on the iPhone 4. At that time, it was difficult to choose to optimise for Retina resolution display when the majority of users still use that sort of display. It’s now 2014, and new gadgets nowadays often have Retina resolution, at least for the flagship devices. You could say that Retina resolution is no longer rare or uncommon.
This has piqued my interest in fonts again. It also helps that recent developments in the web have made web fonts universally supported in all popular web browsers. Web fonts enable websites to deliver custom fonts for rendering in the users’ web browsers.
We now have both the high resolution displays, and the ability to deliver custom fonts over the web. These two developments have opened up new possibilities in our web design.
There has always been a market for selling and buying fonts. Previously, fonts are primarily bought by design professionals whose work will ultimately go into print or other forms of physical manifestation. Now, there is a strong demand from the web for fonts too.
I was pleasantly surprised to discover how big the market is for font business. There are so many companies selling fonts. They’ve developed many selling models. You can pay for a one-time license fee, or you can pay a monthly subscription. Licenses and subscriptions can be limited by views, domains, and other criteria. There are different licenses for desktop, web, Ebooks and applications. Some fonts are free, most good fonts cost money, and there are fonts that can cost an awful lost of money to use.
Most beginners are going to start with Google Fonts. Google’s web fonts are free and easy to use. They have a modest selection of fonts. It’s a great place to start exploring fonts and experimenting with their use on your website. Many people will probably be quite happy with Google Fonts and stay there.
Other people may demand more choices and better choices. You can read Smashing Magazine’s Review of Popular Web Font Embedding Services for a great introduction. Many of these services also offer a selection of free fonts too.
For web designers, there are yet more things to take care of. One important one is about graphic assets. Graphics that were designed for non-Retina resolution displays may look kinda rough on Retina displays. An easy way out is to always provide Retina type resolution for your images, then explicitly set the dimensions of the image in the HTML. It does mean, however, that non-Retina resolution users are going to have to download larger images than necessary.
In a future post, I’ll write more about using web fonts, font services, and font selection. Thanks to Retina resolution displays, we are able to do more and do new things with our screens.
View Comment Policy