Shali's Tumbling Thoughts

Back in the day (and I guess still today), typography on the web was limited to these typographic choices:

• Arial, Helvetica, sans-serif;
• Verdana, Geneva, sans-serif;
• ‘Trebuchet MS’, Helvetica, sans-serif;
• ‘Times New Roman’, Times, serif;
• Georgia, serif;
• Tahoma, Geneva, sans-serif;
• ‘MS Sans Serif’, Geneva, sans-serif;
• ‘Lucida Grande’, ‘Lucida Sans Unicode’, sans-serif;
• ‘Courier New’, Courier, monospace;
• ‘Comic Sans MS’, cursive;

(There are some other font families that are debatable to be on the list, but these are the common web-safe families.)

sIFR became a go-to method for displaying cool fonts

Over the years, people found new ways to bring us a way to embed fonts. One of the most popular methods was sIFR (Scalable Inman Flash Replacement) utilizing Javascript and Flash to convert any text you declared to the typeface of your choice. This method was very popular for a couple of years due to it’s cross-browser compatibility, ability to gracefully degrade when Flash or JS wasn’t enabled, and the semantics of your HTML didn’t change much to affect search engine optimization and accessibility. However, it was a bit painful to setup and sometimes would cause performance issues.

Cufon joined the game as a popular method

Then came a slew of other methods that utilized VML and Canvas, one in particular that caught my eye was Cufon. Cufon turned out to be a lot easier to set up than sIFR, it doesn’t require flash, and also degrades gracefully if javascript isn’t detected. Cufon also loads a bit faster. One of the problems with Cufon are the legal issues. When using Cufon, a lot of research has to come into play on determining whether a typeface is legal to use for web embedding. Usually fonts from Adobe or any font that clearly states in liscencing that it’s 100% commercial free to use would be the safest bet. You can find a large library of high quality free fonts at Font Squirrel.

@font-face allowed for the birth of Typekit and @font-face generators

On licensing and legal issues of fonts, it became clear that using Cufon was a bit tough because it takes a lot of time and research to figure out if a font is legal to use. Unfortunately a lot of high quality and popular fonts aren’t legal and require high-cost licensing fees. Typekit offers to solve all these problems by handling all the licensing for you while giving you a large library of typefaces to go wild with for a monthly fee. Typekit offers a large library of fonts even in the personal library. However, an issue for designers is that many of the Typekit fonts cost quite a bit to own a local version of it. This causes a challenge for designers who normally mock up their websites with Photoshop. Another issue is that you do have to rely on Typekit’s servers as all the fonts are hosted there. If they ever go down then your font won’t display on your website. However, you do gain the benefit of it being hosted on a CDN. Another problem is that Typekit doesn’t seem to render perfectly cross-browser. Overall, Typekit is great if you: don’t mind files being hosted on their end, own the Typekit font you plan to use from their library to design with, and want the peace of mind when it comes to legal issues in the font licensing world.

You can also choose to use @font-face where you would host the files yourself. The main thing here is that if you’ve got a font that is free and legal to use, this may be the best method: Paul Irish’s bulletproof @font-face syntax. And you can use Font Squirrel’s generator to get all the various formats.

Conclusion

At the end of the day, sIFR has pretty much been thrown out the window because of all the requirements, pain to setup, and performance issues. The best way today, as I’ve discovered from all this, is to find a free commercial font and use the @font-face generator with Cufon activating as a backup for browsers that do not support @font-face (ala Modernizr). If the font you want to use is available on Typekit, use Typekit. And if your design requires for a commercial font not available from the above, then stick with images for now.