Leaving Verdana and Tahoma and Georgia Behind: How to Bring Real Typography to the Web

Imagine having only 4 fonts in your operating system. Silly, is it? But almost by accident that’s what happened to the web. The best web fonts were Verdana, Tahoma and Georgia. What is special about these fonts is that they are designed to look particularly good on screen rather than in print.

Verdana, Tahoma and Georgia. Safe but oh so boring…

Unfortunately for designers, working with three or four fonts is no fun. Even for end users, we are all getting tired of looking at the same typefaces. But until now there’s been no solid working solution for using alternate typefaces. Those that did exist either did not work properly across all important browsers or they slowed down the display of your website.

First tools were moving into wrong directions. They were either transforming text into images or into Flash. Which makes the text basicaly unusable. Nice, but still unusable. Now the situation has improved. There are online tools, which still render text, but the output is text again. To list a few of them:

TYPEKIT

Pros

• Online check for multiple browsers
• Paid license for a large number of fonts

Contras

• Font are only usable on the web, that means you cannot take them to Photoshop or other software, design a web and show it to your client. Well, you can, but you have to buy it. But that doesn’t make sense, since you paying already in the Typekit license.

CUFON

Pros

• Is free
• You are not limited to the number of offered fonts like in Typekit

Contras

• Various bugs
• Problems with styling the rendered output

The new old solution

What if there would be another solution. Much more easier and much more older. Well, there is. Using pure CSS. We are not talking about CSS3 which is yet to come, but good old CSS2. And we are talking about a solution, which is supported long time by Internet Explorer. The @font-face property.

Wouldn’t it be nice to use more fonts…

Pros

• All valid CSS, no JavaScript
• You are not limited to the number of fonts offered as in Typekit
• Works in 5 major browsers (Safari 3+, Opera 10+, Firefox 3.5+, Chrome 5+, IE6 +)
• Microsoft want to sponsor this new web fonts standard.

Contras

• You have to sort out the licenses, to be able to use the custom fonts on your website. Or just use free ones.

Now having Microsoft and Mozilla supporting this new old standard, there is a strong chance, that this is going to be a consistently supported property in modern browsers. And if we count, that a lot of effort is put into @font-face rendering SWF fonts, then we get iPhone and iPad support as well.

After all the child-illnesses web fonts had until now we have come to the conclusion, that the time is now. Start using (not misusing) the new possibility and find good use for it in modern webdesign.

What others think about the topic:
http://news.cnet.com/8301-30685_3-20002919-264.html
http://www.alistapart.com/articles/fonts-at-the-crossing/
 

Viktor Klimo

Viktor comes from Bratislava. During his university studies of Journalism and German language he moved to Nitra. After his studies he spent nearly 3 years in Sydney. Apart from fatherhood and design, he is passionate about food and coffee. He maintains one of the oldest Slovak foodblogs at delikatesy.sk.