We Are Communication Architects

Building brand awareness through content creation and community engagement.

July 6th, 2010

Web Typography: 3 Choices

For all of the advancements in web design and development, one problem has remained: the inability to easily incorporate real fonts into websites. It’s frustrating for designers because they want to make a visually inspiring site and don’t want to be shackled by the ‘web-friendly’ fonts such as Arial, Verdana, Times New Roman, Courier, Comic Sans and Impact. Helvetica and Georgia are also common fonts that are widely accepted across browsers.Let’s face it, you can only do so much with these fonts.

In most cases designers will use fancy fonts for navigation items, special graphics and some headlines. Developers cut these up into images or even combine them into image sprites and integrate them into the web site template. This is fine for items that don’t change often but really limits flexibility. What if you want your blog post titles to have a cool font? You can’t use images for dynamically generated content. So what do you do?

sIFR (scalable Inman Flash replacement)

For a while sIFR was the best option around. This method requires using JavaScript and a Flash plugin installed in the user’s browser. It would take the text you specified and use Javascript and Flash to replace it with a font you include in a directory. I had mixed results using sIFR. Sometimes I could get it integrated fairly easily while other times I never could quite get it looking right. It’s been a while now since I used it because I got turned off by the hassle of getting it integrated and then trying to tweak it to look right. I’ve seen that there is a WordPress plugin available for it now, so it’s possible that it has gotten more streamlined since I’ve stopped using it.

TypeKit

TypeKit is a subscription-based service for linking high-quality fonts into your website. Instead of having to include the font file in one of your directories, TypeKit uses two JavaScript calls and a line of CSS to pull in the font from their servers. Because TypeKit uses commercial fonts, there are different subscription levels available based on how much traffic your site gets and which font(s) you want to use. They even have a Trial subscription that is free. Their font library is ever expanding and the ease of use is great. They have a WordPress plugin as well. So far I’ve enjoyed working with TypeKit. eBay Ink is an example of a site we use it on.

Google Fonts

Google had a feeling that TypeKit is on to something so they jumped right into the font-linking method that TypeKit uses. They have some simple documentation that shows you just how easy it is to include their fonts, as little as one line of JavaScript and one line of CSS (similar to TypeKit). Unlike TypeKit, the Google Font Directory is available under an open source license. This means it’s free! There are no subscriptions or license fees, but the font selection is pretty small at this point (18 font families). My hope/assumption is that their font library will continue to grow and this is just their starting point. You can even download the fonts and host them on your server. This is helpful for including them in designs or in the event you think your server is more reliable than having them hosted on Google’s servers.

Obviously I prefer either TypeKit or the Google Font Library over sIFR. They’ve both made it very easy to integrate and each have their pros and cons versus the other. Both are relatively new so it will be interesting to see how well they do. These are the tools I’ve used most frequently, but there are many more out there like Cufón, Typeface and AnyFont. Which is your favorite?

About the Author
Pete Schiebel is the lead front-end developer for the Platforms team, described by some here as the "front end MacGyver" for how he works to make sure client projects look and function as advertised. Follow him on Twitter @sneakepete.

Filed in CSS, Design, Development, WordPress

Comments are closed.