choosing & using fonts on the web

Fonts lend so much personality to the messages they convey. That’s why designers and their clients have long sought to move beyond the ubiquitous standard fonts – Verdana, Arial, Helvetica. Making unique font choices also sets a web site apart from others. But the problem with specifying anything that wasn’t already in use on a majority of web sites was that it likely also wasn’t installed on the majority of visitors’ PCs. And until recently, that meant that the headline you wanted rendered in an über-cool retro font would probably appear in Times New Roman, or worse.

While font replacement techniques – Cufón or sIFR, for example – have been around for several years, all had various shortcomings that made them impractical or undesirable for the majority of web sites. Designers intent on having at least their headlines or navigation look as intended often chose to create images for each bit of text. In addition to the initial drawback of the labor-intensive process of building these items, changes to text images take significantly more time than changes to real text, all of which add to the cost of a project. An equally objectionable downside is that to search engines, text contained in images isn’t indexed like live text, so its use would likely negatively impact search engine visibility.

Thankfully, web browsers have evolved tremendously just within the last two years, especially when it comes to displaying more than run-of-the-mill fonts. One technique that allows more creative font choices – font embedding – is now supported by virtually all modern browsers. A very basic explanation of font embedding is that it allows a web site to display text in a chosen font by linking to the font file, so a visitor doesn’t need to have the font installed to see the web site as intended.

Not all fonts can be embedded, however – at least, not legally. Some fonts require a special license for web use, which can be quite costly and typically must be renewed as you continue to use the font. Other fonts are completely unavailable for web use, as font foundries fear their creations would be spread around the web with no compensation to their creators. If there’s a font you think you can’t live without, be prepared to either shell out the big bucks or be disappointed altogether.

If you’re not married to a specific font, however, you’re in luck. Options like low-cost Fontspring and free Font Squirrel offer hundreds of fonts from which to choose. One client I worked with loved the Gotham font. Even if he could have spent what would likely be hundreds of dollars per year to license it, the font was illegal for web use. I solved the problem by creating only the masthead in Gotham using Photoshop, and creating all page headings, navigation elements and content area headings using CartoGothic Standard from Font Squirrel. It’s not the same font, but it paired quite nicely.

With other sites I’ve designed from scratch, I was able to choose fonts to embed based on the best fit for the particular look and feel of a site. I chose the Walkway font for headings on the iEnforce Fitness site,  and used the Sling font throughout the Ott Gun Works site. Both Walkway and Sling are available via Font Squirrel.

Font embedding isn’t without its downside, but if you can be a little flexible it will open up a world of typographic possibilities.

For further reading, see the Web Typography page on Wikipedia.