Culture news site Boing Boing recently tried a daring experiment -- redesign its immensely popular website using some largely untested tools of the open web.
Unfortunately for Boing Boing, its ambitious plan resulted in a small disaster.
The team decided to use CSS3's @font-face rule in its recent site redesign, which would enable it to use a custom font to display its text. However, far from delivering the look BoingBoing was going for, @font-face fell flat on its face; when the changes went live Tuesday, not only were the fonts Boing Boing wanted to use not legally available for the web, the font it settled on -- specifically BPreplay -- ended up looking terrible for most users.
The result was hordes of angry Boing Boing fans complaining that the new headline font was "ugly," "an abomination" and "plain nasty." Of course, the culprit wasn't really the font, but rather how different it looked depending on which browser and operating system the viewer was using.
Web designers have long been pining for open source tools that would afford them more control over site designs, including the ability to create animations, complex layouts and -- probably the biggest wish-list item -- the ability to use original typefaces and proprietary fonts in their designs. Many of these things are currently being written into into HTML5 and CSS3, two next-generation open standards for building well-formed web pages. We've even praised CSS3's font-face rule and talked about how you can legally use it today.
The problem is that while modern browsers, like the latest versions of Safari, Firefox, Opera and Google Chrome, all support @font-face, the Windows XP operating system often doesn't have anti-aliasing turned on by default. The rule, which is still part of CSS3's draft specification, is also not supported by any version of Internet Explorer. So, as cool as your font might look when properly anti-aliased, on Windows XP it looks, as Rob Beschizza, head of Boing Boing's redesign puts it, "like ass."
Beschizza, who like many Boing Boing contributors used to work for Wired.com, spoke to Webmonkey over e-mail shortly after the redesign launched and after the feedback started pouring in.
For those using Windows Vista or Mac OS X, Boing Boing's redesigned headline fonts looked just fine. Indeed much of the experimentation so far with @font-face is happening on designers' blogs and portfolios -- sites where the audience is likely to be using a modern browser and a modern OS.
If your audience is limited to people who live on the web's cutting edge, then @font-face works pretty well.
However, for sites like Boing Boing, which has much broader audience, Windows XP and older browsers are still a significant portion of daily traffic. And while browsers that don't understand @font-face (such as Internet Explorer) were fed a typical web font, in this case Verdana, the combination of modern browser and older OS proved disastrous.
But even practical issues like improper font rendering weren't the only problem Boing Boing faced trying to use @font-face.
The font BoingBoing ended up using, BPreplay by the design group backpacker, wasn't its first choice, but rather, because of licensing issues, its only legal choice.
"Our first pick for that headline font was VAG Rounded, which Mark (Frauenfelder, co-founder of Boing Boing) had used in his first mock-ups for the design," says Beschizza, but the foundry didn't offer a license for web display.
In fact the design team went through a whole list of font choices before they found one that was legal and fit their design.
Given the outcome, it isn't hard to see why some foundries don't want to license their fonts. Forget about @font-face making the actual font files available for download -- if the fonts look terrible, no one will want them anyway. In fact, the foundry that makes one font Boing Boing tried to license cited appearance as the main reason they were declining to license the font.
So does that mean there isn't going to be a way to use @font-face until Windows XP is a dim memory? Well you could always use JavaScript to detect the operating system and selectively applying @font-face to an OS that can render it. That (among other things, like licensing complexities) is one of the potential problems startups like the TypeKit project are hoping to solve.
Of course there's always another option -- just ignore Windows XP users. For smaller sites that may be a viable option, but for sites the size of Boing Boing the only real alternative is to do what Boing Boing did -- revert to good old Helvetica and call it day.
Eventually web fonts will work, but for now they remain well out on the cutting edge. So, if you're working on a large site, tread with care.
Photo: healthserviceglasses/Flickr
See Also:
