Typography on the Web is basic and dull. A startup called Typekit will fix it.
Typography on the Web is basic and dull. A startup called Typekit will fix it.
Innovation, the Internet, gadgets, and more.
July 13 2009 5:19 PM

Down With Verdana!

Typography on the Web is basic and dull. A startup called Typekit will fix it.

For typography geeks, the Web is a depressingly drab place. Just look around the page you're reading now: There are only a couple of fonts, Arial and Verdana, used to display most of the text. That would be fine, except that they're the same two fonts you find everywhere else on the Web. Don't blame Slate's design team for the shortfall; blame the people who build Web browsers, the Web's standards bodies, and the companies that sell fonts. The strange reality of the Web is that it's harder to display a novel font than it is to embed a video. In this realm, at least, print media are still way ahead. Flip open your favorite glossy magazine and behold the typographic bounty—the text sizes that range from the microscopic to the gargantuan, the huge variety of font weights and styles, and the thrillingly large universe of different typefaces. Compared with the typical issue of Cosmo, Slate and every other online magazine look like something out of the 1800s.

Typeface designers and font fanciers have new reason for optimism though. The past year has seen a surge of Web-browser innovation. Now, most major browsers—including the latest versions of Internet Explorer, Firefox, Safari, Chrome, and Opera—recognize a CSS rule known as @font-face. What that means, in brief, is that Web developers can now easily embed downloadable fonts in their pages. To see an example, load up Firefox 3.5 or Safari 4 and check out this site. You'll see three new typefaces—Liza, Auto, and Dolly—used in the body text and headlines. If you don't have one of those browsers, you can check out the screenshots below.

The @font-face CSS rule in action (top) vs. a Web page without @font-face support (bottom). Click image to expand.
The @font-face CSS rule in action (top) vs. a Web page without @font-face support (bottom)

If you didn't jump out of your chair and run around the block, you're probably not that into typography. But trust me—that page is revolutionary. While certain browsers allowed font embedding before, there's never been a standard implementation that worked across the entire Web. As a result, Web designers have always been restricted to using the few fonts that they know were already installed on most people's computers. That's why most pages reach for Verdana, Arial, Helvetica, Georgia, and Times New Roman, the fonts that ship with the Windows or Mac operating systems. With @font-face, we'll finally see custom fonts on the Web—fonts designed to convey a specific tone or emotion, to create distinctive publications or styles, just like in print. Joshua Darden, a type designer and professor at the Parsons School of Design, likens the change to the invention of color photography. The Web, he says, has long been stuck in black and white. "It's going to be a real jump forward to finally see real fonts online."

But there's a hitch with @font-face: Your browser has to download new fonts to your hard drive before it can display them. Companies that sell fonts—known as foundries—are understandably wary about that process; they worry that letting their typefaces out on the Web could Napster-ize their industry. So while it's now technically possible to display any font you like on your page, you could be in legal hot water if you actually do so.

Enter Typekit, a startup with designs on revolutionizing Web typography. In May, the company's founder, well-known Web developer Jeffrey Veen, announced that he'd worked out a way to solve @font-face's legal pickle. Think of Typekit as the iTunes Store for fonts. If you're looking for a cool font to include on your site, you'd go to Typekit and browse through its menu—the company has already made deals with dozens of foundries and plans to have several more in place by the time it launches later this summer. Depending on the fonts you choose or the size of your Web site, you'd either get your fonts for free or pay a subscription fee for access. (The company hasn't yet decided what it will charge for its different subscription tiers.) Typekit will give you a bit of code to add to your Web page; then, you'll be able to adorn your site with legal typefaces as easily as you can pictures, videos, and GIF animations of dancing cats. The fonts will work automatically in new browsers; you won't have to download a plug-in or do anything else to see them. If you have an old browser, or if you stop paying the fee, you'll see a default typeface.