Since the beginning of web design time, HTML coders and graphics designers have butted heads over fonts. The battle may soon be over, and both sides will win.
Graphics designers and programmers are completely different animals. Without painting everyone with the same brush, we can grossly qualify people according to their job titles. Programmers tend to be more pragmatic, where graphic designers are often more idealistic. Obviously there are many exception to this “rule”, and not everyone fits the analytic versus artistic mold. And a fortunate few excel at using both their left and right brains.
Still, anyone who's ever worked in a larger web design company (not freelancing) where everyone has a clear role, you've certainly seen these distinct personalities clash. A frequent point of contention revolves around typography. The first problem is the limited array of web-safe fonts available in web browsers across platforms. The second is the dreadfully bad rendering offered by most browsers.
Such a battle has taken place here at Adeo recently over the menus at the top of the page. The complaints voiced were “They don't look like the comp” and “they're too pixelated”. To which a programmer would respond “So what? This is the web, not Photoshop.”. So we decided to fix it as soon as possible.
Now if this were any other text on the page, it wouldn't be a huge problem. One could simply compromise, and create an image containing the text in Photoshop. But this is database driven text from the content management system, so it has to be dynamic. And there lies a challenge to which no ideal solution exists. However, the future looks bright as browsers continue to improve typography support. Here is a table of solutions that are currently possible.
Solution | Pros | Cons |
Server side dynamic image generation. |
|
|
@font-face CSS |
|
|
HTML 5 canvas rendering / VML |
|
|
Winner: HTML 5 canvas rendering / VML – it just offers better compatibility in more browsers. It looks fantastic with beautifully anti-aliased fonts of any type. The two best libraries for achieving this technique are:
Typeface.js
Recommended for free fonts
Typekit
Offers a way around licensing issues... for an additional fee
Losers: Server side generation is just a bad hack. And although @font-face is definitely future, it's part of the CSS3 specification . It isn't properly supported, so you really need a modern browser.
But what about that pesky “licensing issue”? Well, you definitely need to be careful. You can't simply start grabbing and converting any font off your computer. Although technically possible, you are almost certainly infringing on copyright.
In time, licenses will catchup and be more specific about web use, but for now stick to open source fonts. Do this, and you just might make all web designers happy!
