New Face of Web Typography
Web fonts: what's the deal with them, and why should we care about the recent progress? Simple questions, with lengthy answers. Web fonts are, simply as they sound, typographic faces that have been designed specifically for use on the web, and in many different sizes, resolutions, and monitor types. Sounds pretty complicated right? Well it definitely is. And, that's the main reason (perhaps aside from copyright/monetary issues) that the web has been so hand-cuffed for so long in terms of what was available for users of the web. But, a few years ago, a [few] teams of typeophiles got together to try to change this stale state of affairs.
Enter Typekit
This San Fran based startup had had enough of the status quo; and finally decided that our sIFR and Cufon implementations just weren't cutting it as well as they should/could be for expanding web typography. And we're all very lucky now that they did. Slowly, but surely, they built a simple (from the client's end) service that serves specific typefaces you choose onto your website. It sounds relatively simple, but it's definitely not. It it, however, quite fun to play around with and find faces that suit your needs. Ideally, this process would be done before the design process, or at least in conjunction with it.
Swell, Sounds Easy Peasy, Right?
The best part about the Typekit guys, well maybe not the best, they seem like swell chaps, is that they work aggressively with type makers and foundries to produce the best possible faces for the internet. They work on everything you can think of about a particular face: hinting, letting, kerning, etc. And this is no small task. Sure, the browser wars are over (for all intense purposes), but this doesn't mean it's any easier to provide good, quality, readable faces for all the browsers, all the operating systems AND all the devices. Of course this is an impossible task, so not all fonts look like you'd expect on all these different devices, so when you find a face you like, take it with a grain of salt; and test it out first. I've made the mistake before of finding an awesome face on a Mac implementing it, then when I viewed it in IE, it looked like grainy barf. And that's not a slight to either Typekit or the face maker, it's just something we have to deal with given the many, many different rendering engines in place today.
Alright, Not Easy, But Perfect
Now that we know it's not easy to do what they're doing, we must also face that it's not perfect either. The main drawback to using this route of custom typography is that it adds in extra JavaScript to your page (so extra page weight and an extra http call). How much JavaScript is up to you however. When choosing your face, you can also pick with weights and styles you'd like to include in there, and thus you do have a good amount of control over whether you're loading an extra 150kb or 750kb -- if you don't need the thin italic, then do not include it. You're also depending on a third-party service to ensure your faces are served properly, but as far as I can tell they're pretty great at up time, even with the free account. When you first load your page(s), you might notice a flash of web-safe copy converting into the Typekit-served fonts, but this is A) minor, and B) can be dealt with a bit of JavaScript, as they've detailed on their blog.
And, most importantly, they may not have the exact typeface you want to use, so that's always something to consider as well. More on this in a bit though…
Some Good, Some Bad – What Else Is There?
So now we know the ups and downs, what other options are there? Good ol' Google to the rescue. Sometime in mid 2010, Google announced it's Web Fonts offering. This is an ever growing collection of free typefaces that they've gotten permission to host and serve from the creators. Their interface is different form Typekit, but is also quite fun to play around with to try and find your match. One main difference here vs Typekit is that Google allows you to download the faces so you can install them for design work purposes. This is a huge benefit, for me at least, as we can show our clients how the face might really look and feel when surrounded by actual content and other faces on a given web page. Google also gives you an easy way to add these to your site, either via CSS or JavaScript. So here still, you're adding some page weight and an extra http call.
FontSquirrel??
Odd sounding for sure, but there is one other mainstream option we have for adding custom faces to a web page. Funny enough, it was Internet Explorer that first debuted the @font-face rules in CSS that allowed you to load custom faces off your own server. The problem was not enough users who own custom typefaces knew how to do this, or they lacked the proper formats to do so. Now, FontSquirrel takes care of this *. All you need to do is go to the site, upload the typeface(s) you want to convert, and convert them. When it's done creating the proper formats, it spits out a zipped file that includes the faces and some example code of how to call these on your site. Sounds great, right? It is, except you're kind of taking your design life in your own hands here. Most faces that are loaded up here are probably not designed specifically for the web, and therefore can get wonky at certain sizes and in certain browsers/on certain operating systems. So, if you're comfortable with your choice, then have at it with FontSquirrel.
I should say that this method also adds page weight and http requests, just like the others, but you're not depending on a third-party service and you can use almost any face you want.
Off Into the Wonderful World of Web Type
Even in 2012, Web Typography has a loooooooooong way to go to catch up to it's print brethren, but thanks to a few very smart and talented people, we're all a bit closer.
Just a word of warning however, from the movie Spiderman: "With great power, comes great responsibility." By this, I mean, just because you CAN use any typeface, does not mean you SHOULD. Always consider your audience and their needs first of course.
****
* You must have the proper licenses for the fonts you want to use here, FontSquirrel uses the honor system, but it's really on you.
Mused on February 21, 2012