The history of Web fonts Dec 8th '09

Web designers have struggled with fonts on the Web since, well, people began designing websites. We have never had a large selection of native fonts that work across most platforms and the inconsistencies between the ones we do have are huge. However there is a faint light at the end of the tunnel, which should hopefully solve many of today’s issues.

The limitations of fonts today

I count four fonts that can realistically be used for text on websites without causing usability issues: Arial, Georgia, Times New Roman and Verdana. To the untrained eye Arial and Verdana look very similar and Georgia and Times New Roman look very similar. That’s not to say it’s a bad thing. It creates consistency across the Web. But when you have a project where you want to let your creative juices flow you are somewhat up the proverbial creek.

The World Wide Web was initially designed to share ideas and papers amongst physicists, a long way from the Web we have all come to use and love. And that’s why people have created workarounds, some work wonders whilst others have significant flaws.

If this font doesn’t exist then use that one

It sounds like an obvious solution to the problem. If a font isn’t installed on the users machine then it falls back to the next font on the list, and if the user doesn’t have that font either, then the next font, and so on. The problem with this is that you have to specify one size for all the fonts. Your amazing font that you want the whole world to see might have a tiny typeface which means you need to increase the size to 20 to make it readable. But if the user doesn’t have the font then it could make the alternate font massive. And that’s not good.

Okay, then why not use an image instead?

For a start it’s not great for Search Engine Optimisation, even though you can specify an alternate text. It also increases the page load time and whilst you wait the alternate text will be displayed instead. For people on slow connections, who disable images, they might never even see it, so all of your hard work is wasted. It’s also harder to maintain, every time you want to change a title you need to open Photoshop back up, change the text, re-save, re-optimise the image for the Web and finally upload. It’s not the most time efficient and it ends up being expensive for the client.

Dynamic text replacement

We then moved to technologies such as sIFR and Cufón. Both of which are still widely used today. However there are still many problems with these:

1. Scripts need to be downloaded before the required font is seen, increasing the load time of the page.
2. The user might not have Flash installed
3. They may have Flash blocked by default
4. The user may have Javascript disabled
5. In some cases copy and paste of the text is disabled
6. Limited selection of legally available fonts

The faint light at the end of the tunnel

There has recently been an influx of sites such as Typekit which allow you to legally use a large library of fonts for a monthly fee. Of course there are again obvious disadvantages in that some of the files are really quite large (just under 300KB for their site (that’s quite a lot for a Web page!)) and also a monthly fee. That’s quite a high price for a slightly nicer font, but necessary in some cases.

All these methods act as a stop-gap whilst we wait for all browsers to allow embedding of custom fonts through @font-face (hint: we’re mainly waiting on Microsoft Internet Explorer), and for a look at what will soon be possible you can watch a great video from Mozilla titled new font control features for designers.

In conclusion

The font you choose on a website is a key decision in the web design process. Previously to ensure consistency across a design, a compromise had to be made. With sites such as Typekit emerging we no longer have to make a compromise with the design, however it comes with a cost whilst we wait for browser standardisation.

Written by Christopher Hill

---

Comments so far

Reply to our blog post, why not?

Name
Email (not published)
Your website
Your comment   Submit comment

How can I get in contact with you?

To send us an email complete the form below. If you would like us to become part of your team and develop your next Web application, then please download and complete our project planner sheet on the right and email it to us at hello@centation.com or by completing the form below.

Name
Email address
Telephone number
Project Planner I want to attach my completed Project Planner.
Enquiry
  Send email