Web-Safe Fonts

This is an age-old problem. Very basically, your web-browser (Internet Explorer, Firefox, etc...) uses the fonts that you have on your computer to render text on a website. So if the text is set in Arial, your browser uses your version of Arial to show you the text in Arial.

If I set the font on a website to be in Myriad Condensed Italic, and you don’t have Myriad Condensed Italic (which is a very nice font), you’re not going to see the text on the website as I intended it.

To counter this, web designers and developers have a list of web-safe fonts. These are fonts that are pre-installed with most versions of Windows and MacOS. This short and unhappy list is as follows:

Arial, Tahoma, Verdana, Century Gothic, Trebuchet, Courier New, Georgia, Palatino and Times New Roman.

There are some others, and some variations, but even the most generous list of websafe fonts* doesn’t hold any nuggets of typographical joy. It’s a small selection of not very astounding fonts. But at least they will come out as intended no matter who looks at the website, or which browser they use.

Not good enough

Luckily, enough clever people out there on the web feel that this is just not good enough. There are a number of solutions to allowing designers to use much nicer fonts on the web, either because the standard fonts aren’t lovely enough, or because a brand has a specific font that needs to be carried through onto the website. We use a system called Cufon – simple Javascript that replaces certain styles on a website with specially chosen fonts. Typekit is fast becoming the most popular way of rendering non-websafe fonts – it has the added advantage of being associated with the major font foundries, so you can choose from new and awesome fonts.

[caption id="attachment_373" align="aligncenter" width="490" caption="This is a special header on the RubberStampSA.co.za website’s Contact Us page. “SERVICE WITH A SMILE” is set in Trade Gothic Bold Condensed."][/caption]

[caption id="attachment_371" align="aligncenter" width="490" caption="FTHK.co.za uses Cufon to render the menu items in Letterbox – a nice, rough, hand-drawn font."][/caption]

Dos and Just Don’ts

• Don’t use non-websafe font methods to set paragraphs of text. These methods are geared towards styling headings and menus – main elements, not paragraphs of text.
• Do use it to give your site a bit more character, or to create brand consistency.
• Don’t use if download speed on the website is very important. Every time you use a service like Typekit, or a font-replacement like Cufon, your browser has to call for the script. If you’re on a slow internet connection, using these methods is going to slow the website down (just a little bit, but sometimes every bit counts).
• Do use it even if SEO is important. Google can still read text set in special fonts – SEO is key on RubberStampSA.co.za, so it’s important that even though we want to use Trade Gothic Condensed Bold, that Google can read it.
• Do use it instead of setting headers and menu items as images – fonts set using these methods can be edited using a Content Management System –just like other text on a page. If you set a header as an image, and you make a spelling mistake, you have to go back into Photoshop to retype the word, and then upload the new image. Those images are also not SEO friendly.

A good designer never blames his tools

Font-replacement methods are great, but that’s not to say that the standard web-safe fonts can’t look good: A List Apart use only web-safe fonts, and makes good use of the basic elements of typography. If you know how to, you can even make Century Gothic look good: Bronwen Vaughan-Evans’ site is set in Century Gothic from top to tail – and it looks great.

*Most lists of web-safe fonts include Comic Sans – but you didn’t hear that from us...