The web design industry is still in it's teens, it's amazing to think how rapidly it has progressed in merely 20 years. In comparison, the film industry would still in the silent era.

There are limitations to web design that do not affect other disciplines such as print. Web designers have always been limited to a certain number of web safe fonts. If the visitor doesn't have the font installed, they will not see it.

This article highlights the problems caused by these limitations, the solutions that have been developed and the benefits of such typographic freedom on the web.

The Problem

In 1996 Microsoft commissioned a project to establish a core set of fonts for the web. The typefaces included in this pack included Arial, Times New Roman, Verdana, Georgia and Comic Sans.

Due to the popularity of the Windows OS, these fonts are now installed on over 97% of computers all over the world. Apple continually licences these fonts from Microsoft to include in OSX to ensure their a seamless browsing experience for their users.

Of course, this was a great package for web designers, who could specify fonts for websites in the knowledge that they would look the same on almost every computer that views it.

Fifteen years later, the web has moved on. The core web fonts are overused to the point of clichè. Unlike print, which has access to thousands of different typefaces, sites start to lose their branding and message when the typography all looks the same.

Frustrated by the lack of options, web designers and developers started look for ways to include custom typefaces in their client's sites.

Previous Solutions to Web Fonts

CSS Background Images

This technique is fairly simple using CSS, you hide the text and display an image in the background that shows the text in the desired typeface.

The downside of this is you have change the image every time you want to change the text which makes for a time consuming process that does not lend itself well to a client friendly CMS. This also prevents the text from scaling, causing accessibility issues for people with poor eyesight.

Dynamic Text Replacement, using Flash and Javascript

These highly technical solutions, such as sIFR or Cufón, use javascript programming that runs on every page, identifying the text and replacing it letter by letter using Flash.

Although this is a very robust solution, it does obviously require that visitors have javascript and flash enabled; not completely uncommon with the rise of the iPhone and the newly released iPad.

It's also a legal grey area, most font licenses do not include copyright clauses for distribution via the web browser.

@font-face

@font-face has been widely discussed technique now that the the majority of modern browsers support it. It requires no javascript or flash, allowing developers to insert custom fonts quickly and gracefully.

Many members of the web design community see this as a leap forward for typography on the web, giving more freedom for designs which means richer content for visitors of the site.

Unfortunately @font-face suffers from the same legal uncertainties as the above techniques, the commonly used print typefaces are worth a lot to the font foundries, who must be quaking in their boots at the idea of their intellectual property being freely distributed to all visitors of the site.

It didn't take long for the market to catch up with the technology.

The Future of Web Fonts

Less than a year ago, just around the time major browsers started to released support for @font-face, Typekit launched.

Typekit is a subscription based service for embedding fonts on web pages based on the @font-face property. Developers sign up, choose what fonts they want to include on their site, insert the generated code and then style the text as they normally would.

And Typekit isn't the only player, fontdeck, font.com webfonts are rolling out of private beta and making classic fonts like Helvectica and Frutiger legally available to web designers for the first time.

The new kid on the web fonts block is google, who have started providing a free font embedding service for open source fonts, although the quality of some of these fonts have already been questioned.

The Payoff

By this point, it should be clear why web designers would want to pay for this service, greater freedom to explore the possibilities of typography on the web.

From the perspective of  the client, why would you willing to pay extra for an annual subscription just to add a few extra fonts to the site? Surely the current selection of fonts have served websites well for the past 20 years and are still just as adequate.

Stronger Branding

By creating unified branding on and off the web, customers will subconsciously bring all their positive feelings built up in the physical world to cyberspace when they visit your site.

Stand out aesthetics

The web is far from quiet, when 99% of sites use the same fonts, you can really stand out from the crowd with a beatiful typeface. Readers may not recognise the font or even realise consciously something has changed, the site will speak to the user differently, with a different tone.

Typefaces can make words seem laidback, formal, friendly, serious, vintage or modern. When 95% of your content is text, it's probably a worthwhile investment.

It's very easy to integrate Typekit and other font embedding services with Drupal, to talk to us about a custom theme or design, contact us now.