the bloggard

I’ve recently come across a couple of sites that really impressed me with their clean design and striking presentation. At these times I’ll often view the source of the page to get a better feel for how the page or site has been put together and see what type of libraries they are using, particularly if there’s an interesting widget or user interaction on the page. I consider it part of the ongoing educational experience and also as a means of staying up to date with the cutting edge of web technologies.

The third time viewing the source for these sites, I noticed that they all had one thing in common: the use of a little snippet of JavaScript referring to a website called TypeKit (www.typekit.com). I didn’t think much of it initially …as it was very subtle and I put it down to some additional analytics that the content publishing was leveraging. After the third time seeing it however, it piqued my curiosity and after visiting the website it became immediately obvious that this little snippet of JavaScript was a large reason why these sites were looking so remarkable. TypeKit was allowing the authors of the site to use a font or fonts, which would not be otherwise available to them and as such present end-users of the site with a very striking presentation and one subtly different from what users would experience during their typical web browsing.

For what it’s worth, the sites that caught my eye were:

• Sofa
• Obvious Corporation
• Fast Company Design
• I Love Typography

People familiar with web publishing will know that the set of fonts that are available to a publisher by default is quite small. Publishers have available to them the smallest common denominator of the default fonts installed across the operating systems that are used to browse their web pages. A list of these default fonts for Windows and Mac can be found here.

These can be considered browser safe fonts, in that using these fonts will result in the best chance of the browser rendering the page as designed by the publisher. To take it a step further, publishers can specify a hierarchy of fonts to use so that if the first preference font is not available the browser will fall back onto the second font specified in the hierarchy and so on until the entire hierarchy has been traversed at which point the browser will render with it’s default font. The following css snippet illustrates this technique:

font-family: Helvetica, Arial, Geneva, sans-serif;

The reality is that none of the default fonts are adequate for publishing more than a basic web page. Publishers have traditionally overcome this limitation by create images with the desired fonts and stylistic expressions and then embedding these images in a web page. For instance, most company logos are presented to end-users as images embedded in web pages as they will most often use fonts that would not otherwise be available on an end-users computer. The downside to this approach is that there is much more overhead associated with making updates to the site and whole different set of skills required, coupled with the fact that text embedded in images is not easily indexed by search engines such as Google or Bing.

An alternative option is for web publishers to distribute the fonts themselves with their web pages as they are loaded. Fonts distributed in this way are downloaded and installed on a users computer the first time the web page is requested and available to render any web pages that may use this font in the future. Assuming the font is license free and can be freely distributed by the web publisher, the only downside to this approach is the additional download time required to download and install the font when the web page is first requested.

The reality however is that most fonts that a publisher would consider using on their web page, require a license to use. Naively, this came as a surprise to me when I first became of aware of it. I had taken for granted the fonts and type face being presented to me, where in reality the fonts we have all become accustomed to have been either made freely available by their authors or are licensed by the application makers or operating system makers such as Apple and Microsoft. Taking this even further, you need only look at the excellent documentary titled “Helvetica” to see the passion and focus of the people who consider themselves fonts designers.

Considering all of this it’s no wonder that most of the sites we visit have a vague underlying familiarity between them. This, due to the use of the fonts from the same set of default fonts that are available with the difference in the site designs being brought out by the graphic design and color scheme chosen. Only when presented with a font, noticeably distinct from the standard set of fonts, did I appreciate the difference and how striking it was and as it turns out provided as a service by TypeKit.

TypeKit is the first service that I have come across, which markets itself as a Font as a Service (FaaS) provider, in that for a monthly fee a web publisher can have access to any of the fonts TypeKit has available to them and use them in their web pages freely with only a few lines of JavaScript required. This, to me, seems like an ingenious idea for its time; Web technologies are continuing to evolve very quickly and we’ve been stuck by the same set of fonts for many years; With the rapid adoption of tablet computing driving commercial publishers to provide a more refined browsing experience, publishers have the option to use a distinguishing type face to further define their brand.

One need only to look at the pricing model and subscription plans provided by TypeKit to see the potential market. At such reasonable prices it’s only a matter of time before most sites leverage this or a similar service. I can foresee many sites offering such a service model and it’s interesting to think about how each will distinguish itself. Ultimately it will come down to the fonts on offer as part of the service but the challenge I see enrolling non-designers, like myself, is how they might distinguish one font from another among potentially hundreds or thousands of similar fonts. It might be similar to bring presented a thousand similar shirts and having to chose one.

The good news for the frugal among us (and the developers) is that there is of course an open source alternative already, which will likely meet most of our requirements. Google, once again, is providing it’s own Font as a Service, or the Google Font API as it’s better known, providing a large number of license free fonts for use on the web. I remembered this being announced at Google I/O 2010 as part of the push for HTML 5, of which web fonts is a large part, but it didn’t resonate much with me at the time.

It’ll be interesting to see how quickly these offerings take off (let me know if you come across any more) but an interesting thing to keep in mind as you browse the web in the future. Maybe you’ll start to notice more and more sites with a striking distinctiveness beyond the graphic design.