05 Nov 2005
Finishing Touches: Fonts
When considering typography for a web site, the safe option is Verdana at 0.8em or 0.7em (generally equivalent to 13px / 11px), with maybe a bit of Tahoma thrown in where you want tighter letter-spacing. The only legibility complaints you’ll then get are the inevitable ones from Internet Explorer users who’ve accidentally set their Text Size to Smaller or Smallest but don’t realise it due to so many sites setting pixels sizes.
But Verdana’s everywhere, so I thought I’d try and do something a little different. This site uses the following font list for body copy:
font-family: 'century gothic','lucida grande','trebuchet ms',arial,helvetica,sans-serif;
Visitors with MS Office installed will see Century Gothic (which is vaguely similar to the Futura used in images, but hinted fairly well and so is legible at small sizes without anti-aliasing); if that’s not available then Mac users will then get Lucida Grande while Windows users see Trebuchet. By making use of a ‘non-standard’ font where possible I’m sacrificing consistency of design across the audience as a whole, but that doesn’t matter to individual visitors or bother me.
0.8em is the size for body text, 0.72em is used for the slightly smaller text in the sidebar. I had to experiment to find sizes that’d keep both Century Gothic and Trebuchet looking good at default settings with no decent anti-aliasing.
Main headings that aren’t done as images use:
font-family: futura,'futura bk bt','century gothic','lucida grande','trebuchet ms',arial,helvetica,sans-serif;
The lack of optimisation for on-screen use in most versions of Futura doesn’t matter at the larger size, so the site might as well use it if it’s available (although the Futura Medium included with OS X isn’t great). I may switch to sIFR for all headings at some point.
It hadn’t occurred to me to write about a simple list of fonts, but several emails have mentioned the typography and asked what I’m using, so it does seem to be worth sometimes looking beyond the predictable options.