style guide
Choosing Fonts
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 |
Previous Posts
Latest Links
- Trumpet Quartet
- Bella Tromba this week recording at EMI with Kanye West.
- Are we designers or developers?
- I struggle with this one as well. My title at work is Software Engineer as well, which doesn't help matters.
- Dear W3C, Dear WaSP
- I'm not sure what I think about this. There seems to be a lot of general moaning about this stuff and not very much doing (with a few notable exceptions).
- The King of Web Standards
- Jeffrey Zeldman crowned by Business Week Magazine
- iPhone Javascript and spec benchmark
- Interesting JavaScript benchmarks on the new iPhone vs. Mac Book Pro
