The Future of Web Typography

When a computer displays text, it uses fonts to display different styles of typeface. There are standard fonts such as Arial and Verdana, however, there are huge lists of fonts available to web developers and designers which don’t come pre-installed onto your computer, these are non-standard fonts.

If you looked at a website that had one of these non-standard fonts, and the font was not already on your computer, it is quite possible the text would refer back to a default font (Arial) meaning the site would not be displayed in the way the designer wanted it to be received.

So what can a designer do to ensure all users see the site in the way they intended? Where there was once limited flexibility, there are now many options to implementing these non-standard fonts.

Google Web Fonts API

The Google Web Fonts API is a favourite for many designers, as it is easy to implement and new fonts are added to the directory on a very regular basis. It uses a content delivery network (CDN) to host the font files, but where other applications further in this article rely on JavaScript to render the fonts, this API uses CSS.

There is an extensive list of fonts to be found at google.com/webfonts and implementing the font has been made easy.

Upon choosing the font you are given a line of code to be placed on the site, then all that is needed is to add the name of the font to the font-family attribute in the CSS, in the same way that you would for a standard font.

The advantage to using the Google API over others is in the speed at which content is delivered to the end user, making for a better user experience, but at the same time the designer is only limited to the fonts hosted on the CDN.

CSS3

Instead of using a content delivery network to host the fonts, it is possible to dost them on the same server as your website. This process uses the CSS3 attribute @font-face, this can then be linked to within the font-family attribute to specify which ids, classes and tags are going to use the font.

The trouble with using this technique, is that for the font to render correctly in all the different browsers, the @font-face attribute needs to link to four different file types, this can limit the choice of fonts, but sites such as fontsquirrel.com/fontface have a huge collection of already packaged fonts.

This techniques is fairly new, but as more people start to realise the benefits of having these lightweight fonts in the CSS, more and more fonts will start to have all four types. What would have been better is if all browsers used the same file type in the first place.

Typekit

Typekit from Adobe allows developers to include fonts that are hosted on their CDN in a similar manner to the Google Webfonts, but involves setting up an account and specifying which domains they are to be used on. You will then be sent two JavaScript files to include on your site.

The obvious problem is that not all users will have JavaScript enabled for it to work properly, and as the process is quite lengthy, it can result in a barrier for the beginner, and is far from being a free service.

Cufon

This is a technique using JavaScript and vector graphics. The process involves them writing fonts from a font file to the browser. This technique means you can use any font available by visiting cufon.shoqolate.com/generate and selecting which font to use and in turn this tool will generate the relevant JavaScript for your site.

You will need to include the files onto your site, along with the Cufon JavaScript framework. With the amount of calls to JavaScript that this technique uses, it can increase the time it takes for the site to load, so what you gain in flexibility, you lose in site speed.