Web Typography: A State of Affairs

With TypeCon2009 wrapping up this past weekend there has been much talk about the future of typography on the web. Historically, displaying type on web pages has been fairly lackluster. Designers have been limited to a set of web safe type for a majority of their content. Typefaces such as Arial, Verdana, Times New Roman, Georgia, or (shudder) Comic sans have been the primary option for displaying accessible, readable and user friendly type on the web. While these fonts serve their intended purpose, there isn’t much originality if 99% of pages are using the same faces. Users get bored and individuality is lost.

Seed Conference Site, using Times New Roman

seedconference

A Little History Lesson

Up until now there has been few options for type variety beyond web safe fonts. CSS image replacement, or more recently, type replacement techniques using JavaScript/Flash such as Cufón or sIFR are the few that come to mind. While these methods work quite well, allowing the designer to choose his type at will, they are hacks. Coming at the cost of accessibility, download time or both. With many aspects of CSS3 now being implemented in modern browsers such as Safari 3+ and Firefox 3.5 designers are now able to display any typeface in an accessible and individual way using the @font-face property. Hooray! we can all sleep well now, right?

For all of @font-face‘s strengths there lies one weakness; ensuring legal usage of typefaces. There little stopping users of sites from simply downloading any font they like the same way we can download any JPG, GIF or PNG. While some type foundries are willing to allow complete usage of their fonts on the web, most want to ensure that they are used only by licensed users. This is where headaches for designers, foundries and potentially nasty DRMs come into play.

Solutions?

In 2007 Microsoft proposed Embeded OpenType (EOT) as a way to license fonts to web designers. While this is beneficial to the foundries, by ensuring type files are bound to specific sites via the URL. The designer is required to license said font EVERY time they want to use it, a real pain, and not fair to the designer using the font. Luckily, wheels are now in motion to ensure the designer has free usage of their legally owned fonts and the foundry’s property are protected.

EOT Lite, proposed by Ascender Corporation aims to give more freedom by easing URL binding. However, many are reluctant to jump headfirst into this option due to its association with the EOT. For more on EOT Lite check out what Zeldman has been saying.

Most recently, two type designers, Tal Leming & Erik van Blokland have proposed the .webfont. This particular solution has gained a lot of support by designers and foundries. It uses standard font files (.TTF or OTF) so foundries don’t need to amend their fonts to get them to work properly. An XML file is used, by the browser, to determine if font is legally licensed to the site and display it. This is still in the proposal stage currently and browsers will have to be updated for .webfont to work. However, with the support behind it, being a clean & simple solution that pleases everyone, .webfont may be the way of the future.

Here and Now

But what is the savvy web designer to do right now? Well, start by using @font-face! There are many typefaces that you can use (free of charge!) with @font-face to improve the visual appeal of your site. For a full list check out Web Fonts Wiki, I am also a fan of Exljbris Font Foundry who licenses many of their fonts specifically for @font-face. Right On!

Also, we now have Kernest and in the near future, Typekit. With Jeffery Veen and Jason Santa Maria backing it up, Typekit has alot of clout behind it. Kernest curently offers up freely licensed fonts from a number of foundries including Ascender Corp., Chank, and The League of Moveable Type. Both services work by allowing direct licensing of typefaces for use on the web. Embed a JavaScript file to the head of your page, and fonts are imported from their servers. To get a sense of how well this works check out Nice Web Type, cool stuff! These promise to be a great services and if .webfont doesn’t come around soon this model may well be how all web fonts are handled.

Nice Web Type and the power of @font-face

nicewebtype

And So…

Get excited! It’s a great time for the typophile on the internet, new technologies and services are making type more accessible on the web every day. Start using @font-face on your site. Enjoy the freedoms it allows you as a designer! If I have made any mistakes, please forgive me, I will correct any errors found.

Tags: