About Face

Increasingly, the new big thing in web design is the inclusion of @font-face in CSS3 and most modern browsers.  Why is @font-face such a big deal?  To understand that, you must first understand the limitations of web design in the past as it applies to typefaces.  To that end, a personal anecdote:

Like thousands of others, my first websites were hosted on GeoCities.  Back then, a cool URL didn’t matter (and was more or less unattainable by non-corporate types anyway), and there wasn’t such a thing as “Googling”.  So, while today it sounds quaint, a network hosting thousands of websites for free, in specialized “districts” based on your interests (or the topic of the site), that you could then explore and browse to see your neighbors was pretty cool.  Much like MySpace, GeoCities gave you the tools to design your website by hand or pick from one of several different templates (and, also like MySpace, this had the result of creating a lot of truly hideous websites).  The best part of GeoCities, for me, was it became a sandbox to learn and play with HTML.  One thing I liked to experiment with was using different fonts I found online on my site.  This was generally as simple as saying <font face=”NameOfFont”> in the source code of the page.  Once I put the right font name in there, that site would have some pretty cool (or, alternately, really gaudy-but-I-thought-it-was-cool-at-the-time) titles or headings.  However, once I went to another computer, my fantastic fonts I spent so long hunting down and embedding would be gone.

The reason for this is because when you declare a font on a webpage, your browser looks through the installed fonts on  your computer for the appropriate font.  If it doesn’t find it, it goes back to the backup font, or, lacking that, some browser- or Operating System-specific default font.  And this is what web designers have been fighting with since the beginning of time (or at least, the Internet).  We’re faced with using the lesser of the evils, choosing a font that looks more or less the same on all computers, or using a fantastic font that only a small handful of people can see.

There are a number of ways to get around this, most of them aren’t fantastic.  You can use images to render your graphical fonts.  This is great from a design standpoint, but not so good from a search engine optimization standpoint — images are meaningless to search engines which only scan a page for text.  There are several methods for converting your font into an embedded Flash object (i.e. sIFR) or rendering it with javascript (Cufon), both of which take time to run the script, and therefore slow down your site.  Then there’s the copyright implications.  Some fonts were designed by hobbyists or designers who do other things primarily and are given away for fee.  Some fonts specifically say “free, but for personal use only.” And some fonts are strictly corporate and cannot be shared without purchasing a license.  Thus we are relegated to using a small handful of fonts that are safe for all Operating Systems, and various means of faking it for other fonts that we think are cool.

@font-face changes that.  Sort of.  What it does is enable designers to embed a font into the stylesheet of the site.  This means that when the page loads, the font downloads to the viewer’s computer the same as any other image on the site.  This kind of font embedding isn’t really all that new — in fact, it’s been around for a while (although not all browsers have supported it).  But increasingly, font designers and foundries are finding methods to make their fonts available for public use — either by going through a membership-based system like TypeKit – or by joining in a growing movement for openness and “free as in beer” fonts.

This is exciting for people like us, who have lamented the lack of choice for typefaces in web design, and have used a variety of methods for faking it in the sites we build (Arcane Palette, itself, uses a “hack” of sorts — we use a WordPress plugin called TTFTitles which converts letters into images and renders the words as transparent pngs).  Now we don’t have to fake it — assuming the font was released with a non-restrictive license, we can use the real thing, decreasing loading times and eliminating the need for javascript or Flash or any other sort of third-party software to render the font correctly.  Or, through a service like TypeKit, designers can choose from a huge collection of premium, professional fonts that they are free to use on their site (according to the terms of their membership plan).  In those cases, the font designers get credit and compensation for the work they put in to creating the font (not a small undertaking), and designers have the freedom to choose the best font face for the site they are building without limitation.

In an upcoming post, I will share the method for using @font-face in web design that we use, as well as some great free resources we’ve found along the way.  The future of the web is exciting, and you can expect more and more complexity and creativity in design in the coming months and years.

___________________

Chris Reynolds is one half of Arcane Palette and writes the majority of the blog posts on this site. He also has a personal blog, jazzsequence, where he shares links, videos, thoughts about music, technology and gaming, and posts various personal music and writing projects.