HOME / technology: The future and what to do about it.

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.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."

Print This ArticlePRINTEmail to a FriendE-MAILShare This ArticleRECOMMEND...Get Slate RSS FeedsRSS
Farhad Manjoo is Slate's technology columnist and the author of True Enough: Learning To Live in a Post-Fact Society. You can e-mail him at and follow him on Twitter.
Images courtesy of TypeKit.
COMMENTS

Web pages are suggestions.

It is up the browser to render the page as appropriate to the device (computer, phone, pda, ...). If the device doesn't support multiple fonts, the web page is displayed without fonts. When the page is resized, the browser adjusts the text and images. Browsers even lets the user set the default font. That is the beauty of the server/browser approach. A product has arisen for those who demand control and elimination of browser variability - Adobe Acrobat.

New browser features that add usability, like tabbed windows, are fine with me. But if the feature requires a change in the web content, not just user actions, then any benefit will be outweighed by the Balkanization of the browser marketplace. Any web page that says "to view this page correctly you need to run browser x and version y" probably isn't worth viewing.

-- drwisdom
(To reply,
click here)

I understand your theory, but I don't see how fonts would violate it. When you visit Slate or any other site your Web browser downloads all kinds of images and Flash. You can tell your browser not to do so. But the default is for it to display these items.

Fonts would be no different. Your browser would download fonts to display them, but, like everything else, you could turn them off.

-- Farhad Manjoo
(To reply,
click here)

What did you think of this article?
Join The Fray: Our Reader Discussion Forum
POST A MESSAGE | READ MESSAGES
TODAY'S PICTURES
TODAY'S CARTOONS
DOONESBURY FLASHBACK
TODAY'S VIDEO
Window shopping.23/091130_TP.jpg
Cartoonists' take on taxes.41/091130_TC.jpg
Toggle plugs in.13/091130_TD.jpg