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)

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.

How will Typekit block unlicensed font access? Veen says the company will use several Web-server obfuscation technologies to make sure that only those customers who’ve signed up for a font can use it. He’s careful to note that this is not technically “digital rights management,” and that some very determined crooks might be able to get around this security system. But Typekit’s solution will eliminate “casual misuse,” he says. The system will work much like YouTube—it will allow font companies to send their typefaces far and wide online but will still let them control their proliferation and keep detailed statistics on how their typefaces are getting used. John Allsopp, a Web developer and blogger who has consulted with Typekit, says that we might see fonts go “viral” in the same way that pictures and videos fly about the Web now. When one MySpace user finds the best emo gore font, others will follow.

Typekit is not the only startup working to make fonts widely available online; two other firms, FontDeck and Kernest, have announced similar tools. Typekit, though, has attracted the most buzz among Web designers, and it recently announced that it has raised cash from some of Silicon Valley’s bright lights, including the founders of Twitter, Flickr, and Wordpress.

How will something like Typekit change the Web? For starters, pages will load faster, and they’ll be much more accessible. If they want to use an exotic font, designers now must embed it in Flash or an image file. Slate’s logo, for instance, is rendered in a custom font; in order to get it to display correctly in all browsers, our designers had to use something like Photoshop to render the text, then save it as an image file. Not only do these images take a lot of time to produce, they also use a lot of bandwidth coming down the pipe, and they can’t be read by search engines or screen readers used by the blind. Using real fonts on the Web will eliminate these hassles.

Ultimately, technologies like Typekit offer designers a promise that the Web may one day replicate the astonishing graphical possibilities of paper. “It’s kind of sad to contemplate the death of paper,” says Joshua Darden. “Digital typography has quite a lot to live up to. And it needs to catch up as soon as possible.”