Websites have always had to make use of a pretty limited set of fonts and while there’s still no perfect solution, there are alternatives appearing all of the time. Well chosen typefaces can bring a design to life and give a designer another tool to make their creation stand out. Of course, it also works the other way, badly chosen fonts can make text difficult to understand and impact the usability of a site.
In this post I’m going to discuss some of the popular techniques used to allow more flexibility with online fonts as well as newer solutions that could be on the horizon
Web-safe fonts
For reasons both technical and legal, web browsers have really only been able to make use of fonts already installed on a visitor’s computer. That means that for the most part we’re left with the following list of fonts which are common to both Windows and Mac machines (or at least have a close Mac equivalent):
- Arial
- Courier New
- Georgia
- Impact
- Lucida Sans Unicode (or Lucida Grande on the Mac)
- Tahoma (or Geneva on the Mac)
- Times New Roman (or Times on the Mac)
- Trebuchet MS (or Helvetica on the Mac)
- Verdana
Font Stacks
When CSS became the standard for styling your website it brought with it greatly improved tools for defining and transforming text. One of these tools was Font Stacks, a prioritised list of fonts to be used by a particular part of your site. To list multiple fonts in this way you use the “font-family” property, for example:
p
{
font-family:”Times New Roman”,Times,Serif;
}
This would instruct all of the text in your paragraph tags to use Times New Roman, if that font isn’t available on a user’s machine it would check for Times (the Mac equivalent) and if it can’t find either it would fall back to whatever generic “serif” font was available. This also means that designers can be a little more adventurous, for example adding a relatively rare font at the front of the queue, there’s always a fall back option that everyone else could use. The downside to this being that the majority of your visitors will be seeing a different version of the site, something that a lot of clients may not be happy with.
Font Replacement Techniques
If you’re familiar with the web-safe fonts listed above you may be thinking they all look a little tame. They’ve generally been selected because they are easy to read on screen and so work well as the font for your main body text, but what if you’d like to try something a little more adventurous for your headings? Headings are usually going to be just a few words and rendered in a larger font size which means readability becomes less of an issue, they can be the perfect place to inject a bit of creative flare and give some personality to your design. Over the last few years several options have been developed:
sIFR (Scalable Inman Flash Replacement)
sIFR uses Javascript and Flash to convert your plain text into any font you would like. It was first developed in 2005 and has been open sourced so anybody can use it free of charge. You can find out more about it here – http://www.mikeindustries.com/blog/sifr/
Because the switch is made by the Javascript after the page has loaded, you don’t have to make any sacrifices in terms of search engine optimisation or accessibility. The downsides to sIFR are that it requires that both Javascript and Flash being installed, the text may not show up if the visitor is using ad-blocking software and some browsers can have problems with selecting/deselecting sIFR text.
Cufón
Cufón is an alternative to sIFR which doesn’t involve Flash. It uses a specially created font generator which converts standard fonts into the necessary format, then Javascript to render the finished font on the page. You can find out more here – http://cufon.shoqolate.com/generate/
It has the same benefits as sIFR but doesn’t need Flash which means more people will see the results and the page should load slightly quicker. On the other hand there can be more work involved in getting it set up and it doesn’t have complete browser support, there are still problems stopping it from working in some versions of Firefox and Chrome. It also has show-stopping problems in some screen readers which would make your site almost useless to visually impaired visitors.
Typekit
So while there are options out there for swapping more adventurous fonts into your websites, they all come with their own drawbacks which is why they’ve not achieved mainstream success. Typekit is a new service which was announced earlier this year and promised to change the way type is handled on the web. It uses a previously available but underutilised CSS property called @font-face which is starting to be implemented by more browsers.
The Typekit founders have made deals with various typographic foundries to offer hundreds of custom fonts specifically for use on the web. The service launched this week allowing website owners to sign up for one of various payment plans. I’ve been testing the service myself with mixed results, you can take a look here although depending on your browser you may or may not see the results – http://www.wsi-ebizsolutions.biz/typekit/
A comparison of my Typekit test between two modern browsers.
The Typekit founders claim the service works in Internet Explorer and recent versions of Firefox and Safari although I’ve not been able to get it to work under IE. There is no support for Chrome or Opera until those browser manufacturers include support for the @font-face property, however for now these browsers will simply fall back to the next font in the stack.
The service itself is easy to use and the collection of fonts available is impressive. I’d have to recommend against using it on client sites until the browser support improves but it’s definitely a technology to keep your eye on.
There’s definitely a bright future for typography on the web, there are many other companies working on similar products and the amount of buzz around Typekit shows just how much demand is out there for better fonts! Once the bugs are worked out and the browsers catch, up I’d be very surprised if custom typefaces don’t become commonplace on the web.
