Typography on the Web, Part 3

Posted October 24, 2011 in Website Design & Development
Tags: web design

In the last two sections I outlined the expressive potential of typography in general (part 1) and the historic dearth of fonts on the web (part 2). In this section I will attempt to outline some historic approaches to solving these problems and to summarize how the @font-face attribute can be used to open a range of typographic possibilities online.

There have been a number of attempts at making type render online, but the results have always been mixed. Scalable Inman Flash Replacement (sIFR) is a technique that was developed some years ago that uses JavaScript to actually convert text into Flash elements, which could then render on a page as text. Despite being able to deliver rich typography, this method had its drawbacks. First, you needed to have Flash installed; otherwise you’d revert back to whichever typeface was specified in the CSS. Secondly, it had some significant page load issues that made it inadvisable for using on anything other than headline text. Next, please.

You may have heard of Cufón, which is another technique that has been used to bring more type options to the web. Some of the big advantages that it has over the sIFR technique are that it’s easier to implement, it doesn’t require Flash, and it doesn’t have the impact on page load that the sIFR or other, older image replacement techniques have had. (For those who are interested, it works by converting font paths to vector graphics). You simply go to the Cufón site, upload the fonts you want to use and you’re in business. Easy, right?

Not so fast.

Something that a lot of people forget is that typefaces aren’t free. They are owned by the foundries that created (or bought) them, and they are available for license, which means designers and developers don’t (and can’t) ever really own them in any kind of legal sense. So even if you did “buy” the font that you’re trying to convert through Cufón (yeah, sure you did), you probably aren’t licensed to convert it. This makes the application of Cufón at the enterprise/commercial level more or less a losing prospect.

Fortunately there are a couple of options that tackle the licensing issue a bit more straight on, and may very well point the direction to rich typography on the web. Google Web Fonts was recently released by the search giant, which allows users to select from an ever-growing selection of open-source fonts, all for free. It doesn’t require any plugins, either.

The other option represents a slightly different model. Typekit (recently acquired by Adobe), Fontspring, or any number of other services make premium web fonts available to you under a range of different pricing models and hosting scenarios. The big difference between these and Google, however, is that you get what you pay for. If you’ve ever browsed for fonts online (and who hasn’t?), the difference between 1001 free fonts and Hoefler & Frere-Jones is immediately obvious. These differences aren’t quite so stark when it comes to web fonts (Fontsquirrel in particular has some great free web fonts), but the difference isn’t insignificant when it comes to what’s available.

All of these services exist because of the existence of the @font-face CSS attribute, the latest editions of the most popular web browsers that support it, and the work of typographers who have painstakingly designed high-quality fonts that render well on-screen. As web design professionals, the ball is now in our court. Sure, it can be a hassle figuring out how to set web fonts in a comp, and we still need to develop better ways for presenting them to clients at the concept stage. But, these are short-term challenges - merely bumps in the road on our way to making the web as rich a design canvas as anything else out there. Web typography is about to get a lot more interesting.

What do you think?  
Indicates a required field