Introduction

You may have noticed something’s a little bit different on our site today.

These words you’re reading right now, these nice little letters, are being broadcast to your eyes via the seductive letter-forms of a font called Merriweather.

Chances are you won’t have heard of Merriweather, and that’s understandable. We’re not used to a broad variety of fonts on the web, and that’s because, well, displaying any font we want on the web is a bit of a headache.

Up until recently, we were pretty much restricted to a handful of ‘web safe’ fonts, that is fonts that are deemed safe to use on the web because the majority of computers come with them installed, meaning when we write something in Impact or Verdana, it looks the same on 99% of PCs and Macs.

This is all very well and good. These fonts have served us well, and are some of the best fonts to use because they’re designed specifically for the screen which means they’re easier to read than those designed to be used in print.

In 2011, we brave, bold craftsmen of the Internet shouldn’t have to be limited to the measly palette of safe fonts. Typography adds richness, communication, clarity and expression to design, and to be so constrained is frustrating.

These constraints needn’t be necessary, there’s a few options for us to provide more interesting web design but it’s a complex subject, so let’s take a quick look at where all this crazy talk of custom fonts came from.

Microsoft led the way… seriously.

Way back in the cold winter of 1997, Microsoft released Internet Explorer 4 which would become infamous for embroiling the company in their legal battle with the United States government concerning IE’s bundling with the Windows operating system and the resulting antitrust issues surrounding this.

Monopolistic aspirations aside, IE 4 quietly introduced one of the cornerstones of web typography, the Embedded OpenType format (EOT), and was the first browser to innovate in the arena of fonts on the web outside of the rather limiting core system fonts.

Despite Internet Explorer’s enormous popularity, EOT never really caught on with developers, in all probability due to it’s proprietary format and incompatibility with the rival du jour, Netscape.

Moreover, the complexity concerned in actually making an EOT file (I know what you’re thinking, Microsoft product, complex!?) and the lack of any real demand for interesting typography on the web at the time compounded the fate of EOT to lie dormant for the next few years.

SIFR and the arrival of practical fonts on the web

By 2004, the cold, unforgiving landscape of the web had changed; Firefox (or Firebird as it was named at the time) had just been released which would reignite competition between browser developers and challenge the slow pace at which the web was evolving.

As designers began to experiment more with bigger and bolder design for the web, there was a clear gap in the usability of typography on the web. Despite Microsoft’s best intentions of seven years previous, designers in 2004 were still no closer to using real typography in their designs.

That was, until, that same year Mike Davidson released SIFR (Scalable Inman Flash Replacement) an open source font replacement technology embracing the ubiquity of Adobe’s Flash plugin. SIFR seemed like a great solution at the time. At last, designers could break free from the (probably weak) shackles of Verdana, Arial et al. Davidson said at the time;

SIFR was a great proof of concept, but it wasn’t without it’s drawbacks. The dependance on JavaScript and Flash, the lag as the plugin was loaded, as well as the very high memory usage when replacing anything other than a few words on a page, meant that SIFR wasn’t a practical solution for typography on the web.

In 2009, a similar solution called Cufon was released. Cufon was implemented solely using JavaScript (no Flash, yay!) and using custom fonts became a more realistic reality as it provided a more natural experience for users and is still one of the most attractive options for web developers. But, again, it’s not ideal. Cufon rendered text cannot be copied and pasted by users, and does not support the full array of CSS styling options such as text shadow and gradients natively.

Web developers began looking for a standard, defined by the body that control the development of HTML and CSS, the W3C.

The problems facing us, and the lessons to be learnt from the music industry

The fiery competition between browser manufacturers that started with the rise of Firefox doesn’t seem to show any signs of growing friendlier anytime soon. In the last couple of years, the browser ecosystem has gone from a couple of key players to a whole spectrum of popular and innovative software; namely the emergence of Google Chrome, popularity of Webkit and the unprecedented increase of mobile devices.

With all of these big egos and proprietary technologies involved, various formats for delivering fonts via CSS have been proposed and adopted to variable extents. Let’s quickly look at this mystifying array;

• Embedded OpenType – The first format, introduced by Microsoft with compatibility strictly restricted to IE4 and upwards

• TruDoc – Netscape’s answer to Internet Explorer’s EOT, discontinued by Mozilla due to ownership issues of the code

• Scalable Vector Graphics – A format in which fonts are rendered as SVG documents. Supported by Safari 3 initially, Webkit and Opera 8+, however, each of these support different specifications of the format.

• TrueType / OpenType – The most widely supported option but with the most licensing problems. Supported by Firefox, Safari, Chrome, Opera and Internet Explorer 9. Font Foundries want to steer clear of this format because there is no control over the distribution of the font, making it the MP3 of font formats.

• Web Open Font Format – Developed in 2009, making it the most modern format, and looking like the most desirable standard. Supported by Firefox, Chrome, Opera and Internet Explorer 9, but interestingly (or, perhaps, frustratingly) not Safari, making these fonts also inaccessible on the iPad/iPhone.

These technical problems serve as a barrier to a simple solution for serving web fonts, but they’re coupled with a larger problem that’s the elephant in the room: licensing.

The situation facing font foundries at the moment isn’t dissimilar to the situation the music industry found itself in a few years ago. Let’s look at how history is repeating itself;

Once upon a time, record companies (font foundries) controlled their industry and made a tidy profit from selling music (fonts) to customers. Customers paid for a very physical product that they could use themselves with very few restrictions.

Then, the Internet came along and ruined everything for everyone. Suddenly, it was incredibly easy to share music with friends and strangers alike and the convenience of illegal distribution (as well as the relative anonymity) meant that sales of music fell in favour of piracy.

The record industry, slow to react, didn’t look at making a legal platform to engage customers through convenience, but instead opted to lock down further the products they sold. We’re seeing this in relation to font foundries at the moment with defensive licenses concerning web usage, but slow evolution towards ways to make it convenient for designers and developers to legally use their fonts in their projects.

Meanwhile, whilst the record companies tried to lock down their media, young startups like Spotify, Pandora and LastFM, and more established businesses like Apple, Amazon and Nokia were clamouring to provide a better experience for consuming music by tailoring to the demands of users for convenience.

When these services started out, they had a hard time negotiating with record companies who were still nervous about losing control over a core product, but after they grew and began signing up millions of users worldwide, it was the service providers who would usurp the dominant stance.

Where are we now?

The web font equivalents of these services have only recently started to gain traction, and we’re seeing a similar pattern of several startups jostling to become the market leader in the business of licensing and legally distributing fonts for the web.

As of yet, no major players have yet to fully enter this market with the exception of Google who have opted to avoid the licensing problem by only distributing fonts that are specifically open source.

At the moment, we have some very appealing services that are already well established and serving some of the most popular sites on the net. Here’s some of what’s available to use real fonts in a semantic, legal way on the web;

Summing up…

Things are looking very promising for the web development scene at the moment, and the arrival of viable services to provide custom typography are only adding to this.

It’ll be interesting to see how foundries evolve to cope with the potentially huge change to their businesses as well as how the array of services currently available compete with each other to become the most convenient solution for designers and developers.

The nature of the web means that success, influence and control can be ephemeral and the best solution is probably still to come but the offerings available to us right now are definitely a big leap forward from the darker days of image replacement and Flash based alternatives. We’ll probably just have to wait on our twitter-feeds and see.

Further reading

• Developing with web standards – John Allsopp.
• Introducing SIFR – Mike Davidson.
• Ampersand Conference (we’re going!).

Afterword