Working with a limited font set on the web 1 June, 2006 — Stuart Brown
The Good, The Bad, and The Ugly
Typography and the web have never seen eye to eye - largely thanks to the limited type rendering capabilities of computers at the dawn of the web. Coupled with the academic (and non-design-oriented) bias of sites from this time, we're left with a legacy of a poor choice of fonts.
Times New Roman
After years of uninspired use, you'd be forgiven for forgetting Times New Roman. It's been used and abused as the 'default' font for boring technical documentation online, server error messages, academic papers and a whole host of other unstyled, dry, documents.
The first thing most web designers do when drafting a page is to specify an alternative font - anything other than the drab, familiar serifed font that has become much maligned over the years.
This is a shame, as when Times is used in a fresh and creative way it can very easily become a beautiful Serifed font, more so even than some of the newcomers such as Georgia. Take a look at a Blogger blog with the default template - the headline at the top is beautifully set in Times New Roman.
With a good eye for design, subtle use of colour, letter spacing and the size of the font, Times is transformed from the familiar into the beautiful. Brush up on your CSS, and give it a try - it won't be suitable for use throughout a web page, but as a headline Times can add a touch of much-needed class to web typography.
Spotted: Server error pages, the entire web pre-1998. Blogger default template headline.
Those with a background in traditional typography will have a healthy mistrust for the Helvetica clone, Arial. Helvetica itself is a classic font, borne from the modern design movements of the 1950s and 60s, and carried forward through to the present day thanks to its clean lines and versatile usage.
Despite being an inferior copy of Helvetica, Arial is unfortunately as close as the web gets to a universal san-serif font, and can be considered a replacement for Helvetica on the screen. (On non-Windows systems, Helvetica will most likely be substituted).
Versatile as a body font, and useful too as a font for headings, Arial is understandably popular on the web today, with most of the web's most popular sites using it for their body text.
At standard 10pt size, it is fairly dull and commonplace - but can form a part of a solid design. Arial is designed for on-screen reading too, so readability is good.
It will most likely never be a glamorous typeface, but as a general purpose workhorse it performs well - and with a splash of colour and variance in letter spacing, can add a lot to a design as a headline font.
Spotted: Google, MSN, Yahoo, Wikipedia, very widespread as body text.
The largest-appearing of all the common web fonts, Verdana was designed by Microsoft with only one thing in mind: On-screen legibility.
The large enclosures and loops mean that the font will happily scale down to smaller point sizes without losing much in the way of readability, although this does cause issues in the case of a replacement font, in which case the replacement may be too small to read.
Verdana is often 'downsized' to accommodate for its large appearance, resulting in a trend towards smaller - and less readable - text than other san serif fonts. Despite this, Verdana is quite a popular choice for those who do have it installed as it does read more easily at any given size - great when you have to squeeze a large amount of information into a limited space.
Usage for Verdana is similar to that of Arial - a lot of websites will use Verdana as both a headline font and for body text. Despite the readability issues, it a is versatile typeface.
Spotted: Everywhere! Commonly seen in menus, as body text and as headers all over the web.
A relative newcomer to the world of typefaces, Georgia is essentially a reinterpretation of the classic serif font for on-screen usage - much in the same way as Verdana.
It has found a certain rapport with those from a typographical and design background - despite being designed as a pure 'on-screen font', it is a nice font in its own right. It acts as a fresher variant of Times New Roman, and is used in many of the same situations where Times may have been used in the past.
It's suitable for use as both headline text and body copy - at smaller sizes its design ensures that it is most readable.
Spotted: Art & Design blogs, Typographi.com, As body text in newer sites and those with more or a design ethic.
Trebuchet is another font spawned on behalf of Microsoft - although it does function quite well as a web font all the same. It is useful as a replacement for either Verdana or Arial, although not as versatile as either.
Trebuchet may not be available on non-Windows systems- it is less universal than some of the other web fonts. The font is more rounded and more stylized than most traditional san-serif fonts too - which may or may not be desirable, depending on the application.
Possibly the most widespread usage of this font is with PHPBB - which makes extensive use of the distinctive visual style of Trebuchet for the headings. Blogger uses the font as body copy quite successfully too.
Spotted: PHPBB's main font. Blogger homepage.
What article on web typography could forget the font so ugly that only its parents could love it - Comic Sans MS.
Spurned by designers and typographers worldwide, Comic Sans has few fans - and despite being part of Microsoft's 'Core Fonts For The Web' package, is generally left unused by most people who know a little about typefaces.
It has found favour in certain niches - you can probably spot Comic Sans on a few eBay auctions (in garish red & yellow no doubt), as well as on personal homepages and the lesser blog sites (MySpace, LiveJournal et al).
If you absolutely must have a 'comic' style font, or blackboard style writing, go for Comic Sans - but there are few other applications for this font. Use with caution!
Spotted: eBay auctions, LiveJournal, MySpace, bancomicsans.com