Scanning lines of type as we read is so natural we rarely think about it. For designers, guiding the reading experience through typography is a precise skill combining the tight control of typesetting with the expressiveness of font selection. As publications move online, this sense of control can be thrown out the window (or browser, as it were), as how something looks often depends on the end user.
Of course, print has had hundred of years to evolve in a way that works best for readers. By comparison, online typography has had to play a hasty game of technological catch-up as publications and readers have quickly moved online, new generations of screens have higher resolutions, and type designers have had to find ways of making new fonts accessible, but not stealable. It’s no wonder the physicality of letterpress has made a comeback.
When type designed for print is converted to pixels, letterforms can lose their subtleties, especially at low resolution. (Think of the look of italics on screen.) Backlit type also loses small details in the glare of a screen. While reading our eyes make up for some of this, filling in missing bits of letters. At the same time, lines of text are often too long on web pages; our eyes get tired of scanning, and looking at a backlit screen can cause more eyestrain than reading from paper. Recent innovations in screen technology help fight this fatigue, upping resolution and finding a luminescence that approximates ambient lighting. (Apple’s Retina Display on the latest iPads, iPhones and laptops is designed so eyes won’t notice pixelation; Microsoft’s coming Windows 8 Pro model of the Surface tablet uses a ClearType HD display.)
More pixels allow for more legibility, but design for the web is created for the widest possible audience, which often means the lowest common denominator—low screen resolution. Bitmapped fonts are designed to thrive in these lower resolutions. Pixels are arranged on a grid, and bitmapped fonts find their curves through anti-aliasing and hinting, a digital nip and tuck that turns some pixels “on” and others “off” to shape the forms.
In the past, for complete control over the reading experience, designers were limited to web-safe fonts that were part of the operating systems found on Windows and Macs, including Arial, Helvetica, Georgia, Verdana, Times New Roman and the dreaded Comic Sans. Designers could venture outside these collections and specify pretty much any font they wanted, but end users would need to have the font loaded or the type would appear as a default web-safe font. Alternately, designers could turn any font into an image, but the resulting text is not searchable and required extra load time.
Occasionally fonts designed for print do look like themselves on screen, especially at larger sizes, for display or headlines. “The diversity of typefaces is broad; it follows that some of them will work on screen. But most of them won’t,” says Khoi Vinh, former design director of NYTimes.com, who helped translate the experience of one of world’s most familiar print publications to the web.
The best fonts for screen reading are created specifically for the medium. Two of the earliest, Verdana and Georgia, were designed by Matthew Carter and originally commissioned by Microsoft for its Core fonts for the web collection in 1996. Conceived as bitmaps rather than outlines, the fonts were designed to be legible at small sizes, with larger open spaces that won’t fill in and a taller lowercase x-height that makes the letters appear slightly bigger. The spacing of the fonts is also wider, so letters don’t appear to touch and blur together. Last year Carter released updated versions of the two fonts, called Georgia Pro and Verdana Pro, with added character sets and weights for more precise control and scaling in smaller screens and mobile devices.
Redesigning NYTimes.com in 2006, Vinh and his team made a high-profile switch to Georgia from Times New Roman. “At the time there were only a handful of viable typefaces for the Web, so it was really a decision based on availability rather than ease of reading,” says Vinh. “But we did like Georgia for its readability; it strikes a nice balance between large, open characters and serifed authority.”
The launch of Typekit in 2008 has made web fonts more accessible, resulting in an explosion of custom typefaces designed specifically for the screen. Essentially a cloud-hosted web font delivery service, Typekit makes custom fonts available to designers and sites, licensing them on a subscription basis, serving them to the sites and managing any differences between browsers. Other web font services include Google Web Fonts, Font Squirrel, Webtype, and Fontspring. As an added bonus, these fonts easily carry over to mobile devices, where many publications are now headed.
At Li’l Robin our work is a mix of print and digital, and when we were designing our own website we wanted to capture the same look and feel as our identity. We looked for alternatives for our identity fonts—Miller Display and Trade Gothic—on Typekit and Google Fonts. We ended up replacing the Trade Gothic with Helvetica, but didn’t like any of the alternatives for Miller Display—none of the serifs had the same elegance. Ultimately we purchased web use of Miller Display at Webtype from the Font Bureau, a subscription-based model. Here as well you license the font, receive a piece of code and your site calls up the font during loading.
A strategy for web typography is increasingly an important element of a comprehensive identity system. A brand or publication needs a consistent look and feel across print, websites, apps and e-books, and designers and their clients need to find a solution that balances cross-platform consistency, readability, cost and easy management of web fonts. In the end, the reader benefits with a smoother experience of type on screen.