Web Fonts

Designers often specify typefaces for use on websites which are impractical. This is because the way text displays in a visitor's web browser depends entirely on which fonts the visitor has installed on his/her computer.

Specifying a typeface which is unavailable in a visitor's browser can entirely change the appearance and even layout of a web page in unpredictable ways.

So, when you design a website you often need to strike a balance between the "look" you would like, and one that you can guarantee all (or at least most) of the site's visitors will be able to see.

Only a relatively small number of typefaces are guaranteed to be present on all current desktop platforms (though not even all of these are available on many hand-held devices such as phones or PDAs).

This page summarises these common typefaces which you can use safely on web pages.

Common typefaces

Different platforms (e.g. Windows 95/98/XP, Windows Vista, Mac, Unix) all have similar basic typefaces available, but use different names for these. To ensure your website visitors see the font you want, you should list all the variants in a CSS font-family statement.

This table lists the equivalents.

 Win VistaWin 95/98/XPMac / Unix
Arial font Calibri Arial Helvetica
Times font Cambria Times New Roman Times
Verdana font Corbel Verdana Verdana
Georgia font Constantia Georgia Georgia
Trebuchet font Candara Trebuchet Trebuchet
Courier font Consolas Lucida Console Monaco
Courier font   Courier New Courier
Comic Sans font   Comic Sans MS Comic Sans MS
Palatino font   Palatino Linotype Palatino
Book Antiqua font   Book Antiqua Palatino
Tahoma font   Tahoma Geneva
Basic sans-serif font   MS Sans Serif Geneva
Basic serif font   MS Serif New York

Palatino Linotype was issued with Windows 2000 and later; Book Antiqua was basically the same, but was the name for the font used with Windows 98. So, if you want to use either, you need to provide both names as alternates in a CSS font-family stement. However both these fonts, as well as Tahoma, were not designed specifically for screen use and don't scale well, as described below.

Scaling problems

Traditional typefaces (including most of those we have installed on our computers) were designed primarily to look good in print; their appearance on-screen was secondary. This means that most of the huge variety of fonts provided on a PC or Mac don't scale very well at all on screen, especially at smaller point sizes.

Microsoft realised this was a problem, especially for web sites, and created a number of new typefaces which were designed specifically for use on-screen and which issued for both PC and Mac to ensure compatibility - these include most of those listed above. These have worked quite well over the years, though Verdana has had a bad press - it is relatively larger for its point size than any other typeface. This has the advantage that it looks good when scaled down, but can lead to serious type-size problems if Verdana is unavailable and a browser falls-back to an alternate font.

Another known issue is that Comic Sans MS doesn't display properly if set bold in older versions of Safari on an Apple Mac.

So, as with anything - test, test and test again before you finalise your decisions!

Windows Vista fonts

Microsoft have improved the web typography avaiable to Windows Vista users by including the new range of "C-fonts" listed above with their new operating system.

Basically these new fonts were intended as improved replacements for some of the older web fonts; however, there is some overlap and a lot of differences, so check them out before you use them.

Users with previous versions of Windows can get the new fonts, legally, by downloading and installing Microsoft's Powerpoint Viewer. Installing the viewer installs the new Vista "C" fonts on your system, and they are, for the most part, worth the download. If you're a web designer and not using Vista then this download is essential as it will let you see your page as your Vista users see it.