Web Type in 2012: A Snapshot

You want a website with beautiful, expressive and flexible typography. It’s 2012. What do you use? Adobe’s Typekit – sure, but not if you want Helvetica Neue. You’d go to Monotype’s Fonts.com for that. But you would sooner die than use Helvetica! So how about something by Christian Schwartz or Kris Sowersby? Or perhaps one of the great families from the H&FJ stable? There you might be out of luck.

Despite an almost embarrassing profusion of webfont services that sprung up in the wake of the @font-face CSS declaration, many quality faces are still not available for legal use online. Perhaps you decide to forget legality and throw a print-licensed Gotham onto your web server & blast it at the world via @font-face. Now you’re wondering why it looks so awful, crabbed and blurry. It turns out there are some fairly compelling reasons why many makers of fine type have not rushed online. One of which is the black art of hinting.

In a detailed post over on Typotheque, Peter Biľak goes through the fine points of the process. But the basic problem is mapping the curves and angles of a typeface designed for 1200 dpi output onto a screen that until recently was in the range of 72 – 96 dpi. With Apple driving the industry towards a high-resolution future, things are only going to get better, but even with 326 pixels per inch on the iPhone 4S, pixel size is still a long way from the resolution for which many typefaces are designed.

 

a Helvetica uppercase S mapped onto a coarse pixel grid
figure 1. mapping an uppercase Helvetica S onto a coarse pixel grid

There is also a long & bumpy road from type designer’s intention to rendered pixels. Is the font file TrueType or PostScript in origin? TrueType contains hinting instructions within the file, while PS fonts are hinted by the renderer, so all PS fonts are improved when the renderer is updated. Are you on Mac or Windows? Both systems have different type renderers; OSX has Core Graphics, while PCs have either DirectWrite or GDI, depending on their vintage.

Still with me?

I don’t need to mention the fact that different browsers on Windows can render type in slightly different ways for you to see there are many obstacles to getting great typography on screen.

So where next ?

Monotype just refreshed their Fonts.com last month, and with a huge library of popular faces, they must be considered a major force looking to the future. They recently released a plugin for Indesign that allows font test-driving, though it doesn’t yet work for web fonts. Both Extensis (who make Suitcase and are behind WebINK ) and Fontshop have Photoshop plugins that allow test-driving of typefaces in your mockups, something that Typekit doesn’t yet offer. Many other foundries have libraries of great type, but are likely wondering whether to invest the serious time and money needed to hand-hint all those faces, especially when the move towards hi-res screens mean that potentially less hinting is required for those faces to look good online.

Hoefler & Frere-Jones have been working on their own custom solution for some time, but have yet to bring it to market. At present, their beta webfonts can only be found on just two sites online; Kottke.org which uses a beta of Whitney, and BarackObama.comwhich gets a one-off custom serifed Gotham – there have to be some perks to being Mr President, right ? Given the influence of H&FJ over the world of print typography and their incredible attention to detail, the launch of their webfont service will likely be the next big milestone in great web typography.

Further reading

Type rendering on the web, Typekit blog
Font Hinting by Peter Biľak
Web typography, Wikipedia
Web typography topic on Quora
Fontshop’s PS plugin by Khoi Vinh

Type testdrive plugins

Fontshop
WebINK 
Fontgazer

Leave a Reply

Your email address will not be published. Required fields are marked *