fonts

Did you know only 9 fonts are considered “web safe,” since they are the only ones installed by default on both Windows and Mac computers?

The good news is you now have a reason to quit arguing with your design team about what obscure fonts to use on your website. The bad news is that, in most cases, you are limited to these 9 fonts:

1. Arial
2. Arial Black
3. Comic Sans MS
4. Courier New
5. Georgia
6. Impact
7. Times New Roman
8. Trebuchet MS
9. Verdana

That basically leaves you with 8 accessible fonts, since you should never use Comic Sans.

Why be “web safe”?

If you desperately want to use a font that is not widely available across operating systems, there are workarounds, which I don’t generally recommend:

• You can create an image in Photoshop using your font of choice, and then place the image in your design.
• You can use sIFR to replace text using Flash.

Embedding text in images

Although using an image would ensure your text is seen by most people, this method has a major shortcoming: it makes the text invisible to Google. Considering search engines are the online starting point for most people, you don’t want to make it difficult for Google and the others to “understand” the ins and outs of your site.

If you choose to embed text in an image anyway, make sure to add an

alt="your image description"

inside the IMG tags. This will help search engines index the site and it will help make your site accessible to screen readers used by the visually impaired.

sIFR

Although the sIFR technology is a well executed idea, and renders text that can be indexed by search engines, it can present some problems for your site. What sIFR does is use JavaScript to convert what you write into a Flash element that then displays the text in your chosen font. The problem is this requires tedious JavaScript code and can bog down the loading time of your site, since sIFR has to request JavaScript, Flash and CSS files in order to render on the page.

So unless you’ve got a good reason, your best bet is to stick to the fonts I listed above.

Basic typography tips for the web

As a general rule, I use sans-serif fonts for headlines and serif fonts for body text.

If you want a standard sans-serif font that is web safe, your choices are Arial, Trebuchet and Verdana. For serifs, your options are Courier New, Georgia and Times New Roman. Use Arial Black and Impact sparingly, and Comic Sans never.

You can still implement a non-web-safe font into your design, but it will be visible only to those readers who have the font installed on their computers. The best practice is to list fonts in your CSS stylesheet in order of priority via the font-family attribute, and your visitor’s browser will display the first available font.

e.g. font-family:Futura, Verdana, Arial;

You can adjust the font’s tracking (the spacing between letters) using the CSS letter-spacing property in the stylesheet if you want to give a particular heading a more airy or condensed feel. You can also adjust the whitespace between words using the word-spacing property.

What else?

You could talk for hours about the anatomy of a letterform, but these are the very basics. Typography is a topic that spans hundreds of books. Jason Beaird warns in his book The Principles of Beautiful Web Design that typography can be addictive:

After studying typography for some time, you’ll never look at a billboard, brochure, or book the same way again. You might start snapping pictures of ride signage at theme parks, rather than your kids. Pondering whether the entrees in a restaurant menu are set in Cantoria or Meyer 2 may become more interesting than choosing between the entrees themselves.

When it pertains to the web, though, your choices are limited. Designer Andrei Michael Herasimchuk had a suggestion in 2006 for expanding the arsenal of web safe fonts. Herasimchuk wrote an open letter to John Warnock, Adobe cofounder, asking him to encourage Adobe to release some of its core fonts into the public domain, so Microsoft and Apple would install them in their systems:

Please consider releasing eight to twelve core fonts into the public domain. The amount of revenue lost from a small core set of fonts surely can’t have a significant impact on Adobe’s bottom line. And the gesture of releasing such a set into the public domain would have many positive ripple effects for years to come.

Adobe has not yet released any fonts into the public domain, so for now: In the interests of usability, accessibility and search engine visibility, you’d do well most of the time to stick to only those fonts that are web safe — minus, like I said, Comic Sans.