Web Design

Webfonts: The Next Generation

Edit: I was all excited about this awesome new way of doing advanced typography online.  Turns out it doesn't work.  :-(

Here's the problem: computers are primitive.  Software is an endless struggle of trying to do amazing things with hardware that can't really support it.  Go to a library some time and take a look at the books on the shelves.  Never mind reading anything, although that's a more rewarding experience too.  Simply gaze at the covers, the spines.  Open one up and look at the ink upon the paper.  The beautiful fonts, the perfectly proportioned kerning, spacing, and margins.  Walk outside and look up at bilboards and advertisements.  Open a magazine or newspaper and gaze upon the pageant of typography.

Now visit a website and weep.

Until recently, none of those things were possible on a web page.  There are lots of ways in which web design is slowly catching up to print media.  We've got colors and structure.  We can even do fancy things like rich media (sound, videos, maps).  But typography is one very important way in which web design has seriously lagged behind print media.  Font selection has been an important aspect of print for 500 years; modern designers are still influenced heavily by the works of 16th-century designer Claude Garamond.

If you've ever heard me speak, you probably already know how excited I am about webfonts.  It's not just a way of making websites prettier.  It's the single most important way in which web design still lags behind print media.  Even the current standard of web fonts is lacking.  You can render a font, and even support variants for bold and italics, but all you get are the basic letters.  Advanced typography, such as ligatures, flares, and fractions, are impossible.

Until now?

Fonts.com recently upgraded their technology to support advanced OpenType features, including ligatures, old style numbers, and fractions.  Does it work?  Sadly, no.

I've switched fonts on Koplowicz & Sons, for the third time now.  My first choice was Monticello, which has an amazing history - including a deep connection to Thomas Jefferson.  The version I used was a modern revival by the same guy who did Georgia and Verdana.  I hit some technical difficulties with Fonts.com, and in the mean time I used Frutiger Serif, a modern typeface designed by one of the greatest font designers of the 20th Century.

Even with OpenType support, finding a good webfont still presents challenges.  Not all fonts have OpenType support.  In other words, type designers are sometimes lazy and not every font comes with full variants for bold, italic, ligatures, etc.  I was going to use Sabon Next, a phenomenal modern font from Adobe.  They've even released multiple renderings for different sizes, so your font will look great whether it's a giant header or tiny caption.  And it has full OpenType support.  Unfortunately, its italic and bold variants don't.  I finally landed on Janson Text, a font with a delicious history, and full OT support in bold and italic.  Sadly, it didn't work.  Instead, it crashed my entire website.  I could spend hours troubleshooting it.  I could also email Fonts.com tech support, although last time I did that I literally waited weeks for a reply.  At some point I'll take another stab at this, but right now I have paid clients that are waiting for me to do useful things.

Why is all this important?  Because I yearn for the day where there is no functional difference between what you can do on a piece of paper, and what you can do on a web page.  Today I thought for a moment that maybe we were getting close.

Comments

Pages

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Refresh Type the characters you see in this picture.
Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.

clever girl