Thinking ’bout ‘web-safe’ fonts.

Suddenly seeing your website on a machine that doesn’t include your favorite fonts can leave a bit of a sinking feeling. But the information is all out there to compile sensible font-families, here’s a quick guide.

Choosing Fonts

The important differences that are likely to mess up your font choice are first the operating system that your site’s readers are using, and secondly the age. How do you know what fonts people are likely to have installed? You can find out which fonts are included as standard from different operating systems from microsoft. More helpful, though, is CodeStyle’s Font Survey. You may have to spend five minutes actually filling out the survey first, and then you can see their cumulative results – since 2001 – of what font’s people have available to their browsers. They have results broken down by operating system and by type (serif, sans-serif etc).

But the popularity of a font is not everything, after all, the reason other people’s browsers can upset the budding designer is that things don’t look how they’d like them to. Codestyle does offer images of some of the most popular fonts, so you can see them even though you haven’t got them installed. But, its far from comprehensive, and the survey doesn’t even include all of the fonts provided with the latest versions of the major operating systems. So, if you want to see what the font’s actually look like, go to My Fonts to check them out.

Accessibilitiy Issues

Most professional fonts will scale up to large sizes and still look reasonable for the visually impaired and those with serious sight problems will be using software that overrides your style decisions anyway. However, there does seem to be some general agreement that sans-serif fonts are more readable than serif fonts (which is a shame, as you might be able to tell, I just prefer serif fonts). Dyslexia can be ameliorated with good font choice though, according to sans-serif fonts with long ascenders and descenders (the uprights extending up from a ‘d’ and down from a ‘p’) make reading easiest for dyslexics. Some prefer ‘comic sans’ for readability, but that style definitely provokes strong reactions from those who don’t like it.’s recommended fonts are trebuchet, arial and geneva and suggest avoiding Verdana, despite the latter being produced by M$ as an accessible font. The three recommendations should cover practically all mac and windows users with at least two of the three coming in at over 90% popularity in the CodeStyle survey. However, it leaves unix users a little in the cold, with Arial installed on less than 70% of machines.

There are fonts specifically designed with dislexics in mind: Sasoon, Read Regular and Lexia Readable. You might expect that dislexics are likely to have these installed, and the latter is free so might be the most popular. Because these are unlikely to be found on many other machines, you might safely add these to your font families, on the grounds that hopefully those who need them, will see them, and those who don’t will get whatever the designer really intends. Unfortunately, there are no stats availabel on how many people are using them.

An important point on accessibility is that people may set up reader style sheets that insist on particular colours and fonts that they prefer. These rules should have been marked with the !important declaration. However, in CSS1 an !important declaration in the author style sheet would override this, so while this continues to be common you should avoid marking either fonts or colours (font and background) with the !important declaration, to leave a bit of freedom for the user.

One last accessibility and style issue: don’t use cursive or fantasy fonts for body text! I mean really, they’re ugle. Apart from comic sans, none of them are particularly common and their sizing can be a bit random, throwing other page elements out of kilter. The best thing to do with flashy fonts is to turn them into an image, so you know exactly how they will look and how big they will be.

So, looking thought all this, what font-families am I using? Well, when I get around to updating them, I shall probably continue to bloody-mindedly use common serif fonts, because I like them. I’m considering using ‘Lexia Readable’ as my first choice in all families – its an attractive font in any case. However, I’d like some info on exactly how many people have installed it first. Bearing in mind that not all serif fonts are exchangable (some are tall and thin, others short and fat) and the same goes with sans-serif fonts, here are some suggested families, that take in popular fonts from Windows, Mac and Unix machines.


//my favorite ‘serious’ serif fonts
BODY {font-family: “Palatino Linotype”, “Palatino”, “Georgia”, “Century Schoolbook”, serif;}

//more styled serif fonts
BODY {font-family: “Book Antiqua”, “Garamond”, “URW Antiqua”, “Hoefler Text”, “New York”, serif ;}

//wide serif fonts
BODY {font-family: “Bookman Old Style”, “Bitstream Vera Serif”, serif ;}

//standard sans-serif fonts
BODY {font-family: “Trebuchet MS”, “Geneva”, “Tahoma”, “Arial”, “Helvetica”, sans-serif ;}

//rounded sans-serif fonts
BODY {font-family: “Lucida Sans”, “Helvetica”, “Futura”, “Bitstream Vera Sans”, “Trebuchet MS”, sans-serif ;}

//squarer sans-serif fonts
BODY {font-family: “Monaco”, “Lucida Sans Typewriter”, sans-serif ;}

//narrow sans-serif fonts
BODY {font-family: “URW Grotesk”, “Arial Narrow”, sans-serif ;}

//angular sans-serif fonts
BODY {font-family: “skia”, “Myriad Condensed Web”, “Arial Narrow”, sans-serif ;}

//dark, heavy sans-serif fonts
BODY {font-family: “Charcoal”, “Arial Black”, sans-serif; }

//common monotype fonts
BODY {font-family: “Courier New”, “Courier”, monotype ;}

//attractive monotype fonts – not terribly common
BODY {font-family: “Andale Mono”, “Bitstream Vera Sans Mono”, monotype ;}

Want to see the fonts? Checkout CodeStyle or My Fonts for images.