Typography

How to use real fonts on the Web. Really.

by Michael Aron on March 30, 2010

For the last several years programmers and typographers have been struggling to create a way to use real fonts like Perpetua for example, not just web-optimized fonts like Times, on public Websites. While the challenges are great, many have succeeded. The trouble is, there is really no standard yet and the lion’s share of solutions so far do not adequately deal with the font licensing issue.

That’s about to change.

Arondesign.com display font Tallys

Tallys, the display font used on Arondesign.com as rendered by Cufon

I attended a seminar at the Type Directors Club last month featuring the recent work by the magazine designer Roger Black and the font design consultancy Ascender Corporation.

Both agreed that a universal web typography solution is almost within our grasp, however all of sudden the iPad came on the scene, diverting resources and attention from the issues surrounding fonts on the web.

Roger Black is working on a solution with his typography partner David Berlow of the Font Bureau. He demonstrated several terrific solutions, including a new MIT newsletter done in ITC Franklin Gothic. It looked smashing. They are spending a lot of time creating custom-hinted fonts for the web. Additionally he is developing a browser called Treesaver, which will essentially port magazines and newspapers over to the iPad or similar e-readers. About time.

StudioGramercy.com using the font ChunkFive and Cufon

StudioGramercy.com using the font ChunkFive and Cufon

Ascender, designers of many popular web fonts including Verdana, has their own proprietary fee-based web type solution. It’s inexpensive and technologically awesome, but the current font choices are limited. I hope they expand the library to include a wider range.

While this debate rages on, I decided to use JavaScript based Cufón. It is a variation on sIFR, the most popular Web font solution to date. I’m not concerned with the backend of it, I just know that it works. It renders incredibly fast, looks great, handles all kinds of glyphs, and is not a bandwidth hog. It requires no plugin, does not use Flash, and the user experience is seamless. If viewed on a mobile device, it flips back to a default web font you specify in CSS. Perfect.

The New York Times Skimmer

The New York Times Skimmer using Typekit and their signature font Cheltenham

One important note: do not use Cufón to render all of the text or most of the text on a page. Limit the use to a few key headlines. I am using Tobias Battenberg’s wp-Cufón plugin for WordPress. It was a snap to install and use.

I opted for Cufón over Typekit because I like the idea of hosting the font on my server vs hosting the font on their server. I know that The New York Times uses Typekit for the recent release of Times Skimmer so it can’t be all bad. Your choice really.

Typekit Font

The font Bad Dog, offered by Typekit. I'm not kidding. Should be called Bad Font.

For the display type on AronDesign.com I have chosen the font Tallys, designed by Jos Buivenga’s Exljbris Font Foundry. It looks a bit like Perpetua, if you cut it out with a pair of scissors. I like it a lot. He explicitly allows his font to be used by individuals with no licensing restrictions.

{ 0 comments }