PSST, Your Fonts Are Showing!

When embarking on a new website design, there are a thousand potential pitfalls. As a client, you have to be able to trust your team of strategists, project managers, and especially designers to offer the best advice possible. Then, designers and implementers must tie it all together and make the magic happen.

Seasoned web designers and implementers aren't just talented people with a good set of eyes. They're also the kind of people who can appreciate the cut of a great ligature (hello, ampersand!). They are the people who wake up at 2:00 a.m. and have revelations about why their JQuery shadow solution isn't working right. They worry about when a new browser is coming out, and how it will change the game. Most of all, they make it their mission to dig deep into the details that can make a website succeed -- from color theory, to spatial relations, browser limitations, and typography. And these days, typography is where designers are finding something new and tasty to chew on. The key for you, as a client, is to make sure your designer is experienced enough in their fontography skills to wield them effectively. After all, you don't really want to wind up with Chank Diesel's Saucy Millionaire font on your website -- or do you?

Avatar. What were you thinking?

You need a font on your website to speak with your organization’s voice, and the wrong choice can prompt some pretty visceral reactions. As a designer, I was amused to hear that a Groundwire client objected to seeing the new movie, "Avatar", because it abused the font family Lithos in the logo. I know I felt the same way. But what do you do when your choices are limited?

Since the dawn of web design, font choices have been limited to only a few core offerings. You know them as Arial, Helvetica, Verdana, Georgia, Trebuchet, Times New Roman, and the oft-loathed Comic Sans. After 15 years, these fonts can feel hackneyed, especially to a designer who works with them daily. Even though embedded fonts beyond these have technically been a reality for many years, browser support has been so uneven or even nonexistent that the reality of a website looking great across all browsers has been compared to flying cars and trips to Jupiter.

Halfway to Jupiter

People have tried to solve the problem of fonts on the web across browsers by providing various options for embedding fonts, often with obscure acronyms that look like word soup: @font-face, WOFF, EOT, SVG, OTF, PFR, FLIR, sIFR, Cufón, and so on. Not surprisingly, there are problems with all of these solutions: legal issues, browser incompatibility problems, rendering issues, complexity, flashing on page load, and so on.

Out of all of these, Groundwire has primarily supported the use of sIFR, but after some research, siFR has proven to be a time-suck to implement and introduces licensing and maintenance issues, among other things. Imagine 40 websites, all with embedded fonts, and you get a logistical nightmare in terms of tracking and re-upping licensing agreements.

@font-face is also a very popular technique Groundwire has liked, though again, there are issues with browser support and even more issues with filetypes. At first blush, embedding fonts looks as simple as adding a couple of lines of code. First, you define it:

@font-face {
 font-family: Saucy;
 src: url(SaucyMillionaire.ttf) format("truetype");
}

Then, you use it:

h3 { font-family: Saucy, serif; }

Browsers that support @font-face will render text using Saucy Millionaire while older browsers will render text using the default serif face. But it's not so simple: You probably need to convert the font to a different format readable by other browsers, and you also have to do some hacking to make sure it works in other browsers. After all of the digging into EULAs (end user licensing agreements), file conversions, and workarounds, suddenly @font-face starts to feel yet another web standards rabbit-hole.

Happily, many foundries and browsers have finally begun working together to make the @font-face construct work legally and without the crazy hoop-jumping.

A New Era For Web Fonts

In December 2009, an exciting new method of getting new fonts on the web stepped onto the stage: hosted, downloadable web fonts. You basically embed a scrap of javascript into your page, add a single @font-face declaration through a control panel, and presto, it works.

Downloadable fonts were all the buzz this year at SXSW in Austin, Texas, and the conversation has just gotten noisier since. Not everyone is in favor of it, but the exchanges are spirited and insightful, and most of all, hopeful.

In a nutshell, you rent fonts from companies such as TypeKit, Kernest, FontDeck, and Typotheque, they host the fonts and deal with the foundries, and you get a choice of tons of new, quality fonts. Although you still have to do cross-browser testing, it’s pretty much a one-step process across all browsers. Downloadable fonts are not a magic bullet, though, and the risks are important and real:

• No one knows if the hosted fonts model will work and if billing / licensing will go smoothly
• If the hosting server goes down and there aren't proper fallbacks, your fonts disappear and degrade to one of the standard core fonts
• You don't own your fonts
• You don't always get a font to use locally during the design phase, which means you may have to buy a copy of the font in addition to renting the hosting delivery system
• It takes time to identify fonts that will look good for a given group; many fonts that are currently available are too whimsical for more serious types
• Not all fonts are “well-hinted” and may not look good on all browsers. Font hinting is the use of mathematical instructions to adjust the display of an outline font so that it lines up with a rasterized grid. At small screen sizes, with or without antialiasing, hinting is critical for producing a clear, legible text for human readers. This means that you may be limited to a set of “workhorse” fonts that are proven to be well-hinted and work across browsers, and it can take time to find and test these fonts.

This last one sounds like a very minor detail, but it is, as noted by web standards aficionado Jeffrey Zeldman, the elephant in the room. It takes a lot of time to locate a font you like, but the real work starts when you have to find out if it will work in all browsers or not. Sadly, the vast majority of fonts do not, but with some effort, it is indeed possible for designers to isolate a  few good workhorse fonts that you can choose from.

The other good news? TypeKit, the only foundry of those mentioned above, is working to identify fonts that are well-hinted, such as Web FontFonts from FontFont foundry. That doesn't mean TypeKit is the vendor of choice, but it bodes well. After all, their service has been good enough for the New York Times! Conversely, Typotheque and Ascender are the only two foundries that let you work with a font locally during the design phase. Score one for Typotheque and Ascender, minus one for TypeKit. And this is just the beginning of the ways in which the font services differ.

Check you later, Comic Sans

As you can see, it's a complex situation, fraught with legal, logistical, and legibility considerations, and the situation is still shaking out. However, Groundwire clients can still benefit from these new developments if they have a little extra budget to spend and an adventurous spirit. The future of web fonts is still not completely known, but you'd better start packing your bags for that trip to Jupiter.