Fungible Convictions

This is a depressingly short section. Why? Because despite the web’s having been around for two decades, we as website designers are still (practically speaking) limited to half a dozen “web-safe” typefaces supported by the majority of web browsers:

• Arial
• Comic Sans
• Courier New
• Georgia
• Times New Roman
• Trebuchet
• Verdana

You better have an ironic reason to ever use Comic Sans, which takes us down to five options.

It goes without saying that your typeface should reflect the style of your website. Trebuchet and Verdana might be good for more modern sites, while Georgia is good for text meant to look more conservative.

The key thing, though, is to collect some data on your users’ screen resolutions and colors. Serif fonts can be a strain on users’ eyes whose monitors can’t smoothly render small details like serifs. So if your website serves a large part of the general population—or, conversely, a large number of mobile users—consider sticking exclusively to sans serif fonts like Arial and Verdana for your body text.

Ironically, even as the average user’s monitor increases in resolution and number of colors it supports, the trend is also for users to have larger screens that display type even smaller, another argument in face of sans serif typefaces (as well as increased default text size).

You also want to keep in mind the concept of “graceful degradation”—meaning a website works even when a user doesn’t have everything needed for it to work as ideally intended (for example, when Javascript is turned off). Graceful degradation for fonts means understanding that different browsers handle different fonts differently, and thus you want/need some amount of control over that handling. The very basic example is the font-family statement:

So instead of:

h1 {
font: helvetica;
}

Use this instead:

h1 {
font-family: helvetica, arial, sans-serif;
}

That way, if the user doesn’t have Helvetica, the browser will render the text as an alternative sans serif font, Arial. And if the user then also doesn’t have Arial, it will use any available sans serif on the user’s system. The text degrades, but gracefully.

So in short:

• Stick to the five typefaces that are common enough not to cause problems
• Keep Arial and Verdana in your head as your default for body text
• And write your font-family statements such that they degrade gracefully

Later, we’ll touch upon reasons and methods for using typefaces that aren’t one of those five—largely for headings.

References:
https://www.google.com/analytics/reporting/resolutions
http://www.w3schools.com/browsers/browsers_display.asp
http://www.theinternetdigest.net/archive/websafefonts.html