Webfonts: An Introduction

This is the first part of a series of posts on webfonts.  See also Part II and Part III.

I may be late to the game; people were talking about webfonts three years ago, even before I worked at PCF, and it's been supported by Internet Explorer for over ten years (amazingly).  But it seems that the practice still isn't common.  Not only should it be more common, but it will be.  Not because of me, certainly; as A List Apart puts it, doesn’t need to have a future, it is the future.

What are webfonts?  Well, they're fonts.  On web pages.  Ever notice how all web pages kinda look the same?  That's because, until recently, a web designer could only use a font that he knew was going to be on the viewer's computer.  That means every page uses Times New Roman and Arial.  Maybe Georgia and Verdana, if you're lucky.  Those are very nice fonts--in fact, Georgia and Verdana were designed to be displayed on web pages--but it's like only singing in one note.  Print media is still far beyond where web design is, but this is a huge piece of the puzzle.

So how do webfonts work?  Well, the font is stored on the server and sent to the visitor as he views the web page.  All major browsers support webfonts now, even my smartphone.  That's only happened in the last few years and that's why webfonts are such a big deal now.

So, what's the difference?  Well, I'll show you.  I just changed the title font for Koplowicz.com.  I wanted something bold and modern, but also thick and stable, with just a little bit of a "human" element and just a tad zany.  In a nutshell, me.  Here's what my front page looked like before:

And here's what it looks like now:

For an ever starker contrast, take a look at 69thnewyork.com after its font facelift.  Since it's an historical page, I wanted to use fonts that actually existed in the 1860's.  Here's the before, using Georgia:

And here's the after:

I was shocked to discover that 18th- and 19th-century fonts look surprisingly modern.  In fact, some are still very popular today, like Bookman and Garamond.  For my title font I chose Clarendon, which was invented in 1845.  I hesitated to use it because it was invented in London and this is a site that portays people who were involved in the failed Irish rebellion of 1848.  But in 1863, they carried British-made muskets, so it's kind of hard to avoid the influence of England.  And the font is so perfect.  It conveys a perfect old-timey feel, but is still very readable, and attractive to boot.

The body text is Caslon, which is actually quite older--1722--and also from England.  Nevertheless, it was the most popular font in America in the mid-19th century, and quite appropriate for the site.  It also carries an old fashioned feel, and yet is easy to read and beautiful to look at.  The site's visual theme is actually grunge, which did not exist as a style in 1860, but is a perfect look and feel for portraying "Camp and Outpost Duty for Infantry," as Dan Butterfield would have put it.

See, now you understand why I'm so excited about webfonts.  Font design is about conveying feeling and there's an incredible richness and depth to it.  I'm not exagerating when I say this is going to transform web design.

 J<

This is the first part of a series of posts on webfonts.  See also Part II and Part III.