A New Era in Web Typography
April 25, 2010 03:34 AM - by Walter Reel
Arial, Times New Roman, Georgia, Verdana, Impact, Comic Sans, Trebuchet MS, Courier New and Lucida Console.
That's more or less what web designers have had to work with in the type department for years. Sure you could even try to reach for Tahoma, Andale Mono, and Lucida Grande but whether or not the person viewing your page on God-knows-what type of machine is a crap-shoot. That scenario has been taken as a given for so long that font-family strings can be recited from memory from the pool of type above. Yet in a world where the amount of available type seems boundless we have unwittingly boxed ourselves in with the Helvetica, Arial, sans-serif mantra.
Applications Have Got Your Back
But the world, or at least the font world, has progressed. Major applications have started bundling font sets to the point where the relative rarity of fonts like Tahoma can just about be considered a standard (although the persistent use of Tahoma for copy type makes me resent this from time to time). Take for instance the ClearType Collection. A very fine set of typefaces available for free with the download of Power Point Viewer 2007. Or if you have a recent Office suite I'm sure that you have them already. Bitstream Vera with its offshoot DejaVu are very popular in the Open Source world like Open Office and Lucida Grande makes appearances in Safari applications (but Apple being Apple doesn't actually install it into the system, it just holds it as a resource for only Safari, tsk tsk Apple). So with a prevalence of fonts that piggy-back popular applications you can cross your fingers and chances are that most people will in fact see that heading in the Corbel typeface.
BYOT: Bring Your Own Type
But we can do one better. Enter the @font-face. A once heady standards specifications has become a widely available browser implementation. Now we can name a true-type file just like any other resource and have it properly render in your div tag just like any other font without fancy plug-ins. Joy! But there's a twist. Is it really legal to just host any old font file for Joe-Schmoe to download like any other file. Not technically. This has people paying more attention to font EULA files than they ever had before. This fact causes sites like www.webfonts.info to suddenly exist. Font foundries are apprehensive right now and are waiting for WOFF format support before considering permissive licensing. But Ascender is getting into the game with an interesting model. You buy a license to serve a font to site visitors for a yearly fee dependent on the bandwidth. So you get to offload some bandwidth and a you have a selection of professional typefaces to design your site with. I'm not sure how far that business model will go but it doesn't hurt to try. The other options would be for businesses to pay monstrous sums for "Web Embedding" licensing or they'll just damn the torpedoes and host the fonts without regard to licensing. I believe in compensating designers if they ask for it.
Designing with a Budget
But sometimes they don't ask for it. Altruistic people or organizations where typography is a means to an end may produce fonts that are of quality without restrictive licensing. The League of Moveable Type, Font Squirrel and the previously mentioned www.webfonts.info specialize in fonts ready for @font-face use. Other organizations will create fonts for wide-spread use with lenient licensing. There are also designers taking that tact that the web font is free but the commercial print font is the money maker. DejaWeb follows this scheme and with all honesty I've been happy with this typeface. Chances are that you're reading this post in DejaWeb right now.
A Brave New World... of Type
We are certainly not out of the woods quite yet when it comes to typeface in web design but the progress made so far is absolutely reassuring. I hope that you feel you can start exercising your new found freedom in web based type to develop your own unique voice.
Examples
Web fonts in Gentium
Web fonts in Droid Serif
Web fonts in DejaWeb
Web fonts in Raleway Thin