I got the memo a little late. "Drop everything," it read: "fancy fonts are the new rounded corners and must be used now. Everywhere."
Easily one of the most noticeable trends in web design over the past several months is a surge in the use of non-standard fonts. Time was, non-standard meant Comic Sans. In hot pink.
But thanks to font embedding, via the now widespread implementation of the CSS3 @fontface declaration, typographic creativity is now limited only by the designer’s imagination. After a slow start, fancy fonts are everywhere.
Before we get into the "what" and "how," let’s start with the "why?" I hate to be that person, but still: if you can’t think of a compelling design reason not to use the familiar font staples (the Arials and Helveticas of this world) you probably don’t need font embedding. Just like we don’t need to round corners and give subtle drop shadows to anything and everything. Just like we don’t need to breathe.
Sometimes things are just too cool to ignore (for example, you’re reading this blog aren’t you?). So, since everyone’s doing it, here are some more good reasons to use font embedding:
Use font embedding if:
- It is necessary that your page looks like it was typeset in 1743
- You have a bunch of awful text-as-image headings on your site because they just had to be in that odd niche font the Marketing folks picked at random from the depths of Adobe’s vault. Embed the font and replace them once and for all.
- You want to create a font to use in place of display elements. Why not create icons as font characters and use these in lightweight designs (especially for mobile)? Why not embed the corporate tagline font instead of creating multiple image representations of it?
- Your typography needs to be pixel perfect and anti-aliased.
Now you’ve rationalized the use of a fancy font, let’s put it on the page. This is where the fun – as in “headaches are fun” – begins.
I said that creativity is limited only by the designer’s imagination, which isn’t quite the full story. There are several options for getting fancy fonts on your page. Here are a few of the most prominent ones, including a heads up on some of the likely issues:
TypeKit. If you want to use an Adobe font, you’ll need TypeKit. On the upside, the variety of fonts is second to none, including familiar selections such as Myriad and Trajan as well as wild and wonderful fonts from Adobe’s partners. The fonts are also hosted by TypeKit. The main upside is that these are high quality, commercial fonts hosted externally on fast, reliable servers. The main downside is that they are priced as such. But $99 per year for a medium-to-large web site (costs are based on number of page views) is a small price to pay for such flexibility.
Google Webfonts. Free and open source. Undoubtedly, this is a huge selling point and the selection is growing all the time. A word of caution though. If your corporate brand guide calls for, say, Myriad you might find a font that looks kind of like Myriad to the untrained eye. But it won’t be Myriad. At which point – why not just use Arial? Try not
Conclusion: typography is firmly on the radar of web design and font embedding can produce awesome results. But as your mom told you: just because you can doesn’t always mean you should.