UsableType: Web Typography Guide

ISSN 1746-0158

Choosing Fonts for the Web

Your chosen typeface (font) should co-habit gracefully with the style of your visual and textual content. In the first versions of HTML setting specific fonts was not seen as a requirement for the technology. The delivery of information was the most vital aspect.

Although times have changed, and declaring fonts is now common place on the web, that initial premise must not be forgotten. The prime task of a web site is to deliver content. With that in mind there are certain guidelines which should normally be adhered too.

It is generally considered good practice when selecting fonts to choose from the resident default fonts for most operating systems: specifically Windows and Mac. Fonts outside these defaults are unlikely to be available to all users. This causes the browser to render the text in its default font; and although you can be sure this will be readable, it may not be suitable in a particular context.

The other good reason for doing this is that the default installed fonts are all designed to look good on the low resolution of the average computer screen; and when I say ‘look good’ I mean readable.

Legibility

The convention carried over from the print world is that a serif face such as Times New Roman or Georgia, should be used for the main body text, and a contrasting sans-serif face like Verdana or Arial, used for headlines and titles. Serif fonts are designed to be readable at small sizes, their extra lines and curves help the eye to flow through the text, and they emphasize the shape of words which is the key to efficient reading. Sans-serif faces on the other hand look good at larger sizes, and standout well in contrast to a serif body text.

Of course you don’t have to follow convention, and there is a strong school of thought which says sans-serif typefaces are more legible on the low-resolution computer screen. UsableType as you may have noticed is set in Arial [Ed - UsableType is no longer set in Arial, but varies depending on what fonts you have installed on your system], a sans-serif font, which we believe is appropriate to the site’s clean and sharp style. Feel free to disagree of course. However, in our print style sheet we do set our body text in Times New Roman, as blocks of sans-serif faces on the printed page look somehow unfamiliar and plain.

Listed below are all the default fonts that are shipped with Windows and Macintosh operating systems.

Windows Default Fonts Macintosh Default Fonts
Arial Charcoal
Courier Chicago
Courier New Courier
MS Sans Serif Geneva
MS Serif Helvetica
Times New Roman Monaco
Verdana New York
  Palatino
  Times