Web Friendly Fonts

There are a multitude of fonts available for computers, for use in word processing, desktop publishing, presentations and other formats. But when it comes to web design there are significant limitations in font usage. Unlike a static piece of literature such as a hard copy document, how a web site renders is highly dependent on the computer it is being viewed on. It’s dependent on the operating system, the browser and various settings defined by that computer’s user.

One area of limitation that I often find irritating is the very small number of fonts that you can use on a website. It’s something that’s easily overlooked, because when designing a site any font you use will work fine when you test the font as long as it is installed on your computer. The problem is when someone views that site without having the specific fonts used, because if the font definition is poor then the design will default to a basic and often unattractive font choice.

The problem is further compounded because, apart from a few standard fonts, there are significant differences in the fonts that come as part of a standard installation on different operating systems. E.g. Windows installs a number of fonts as standard that aren’t present with Mac OSX. Linux is even worse because it’s open source nature means there is no real “standard” for that operating system, so even its most common fonts only come installed on 60-70% of the various versions.

The important thing here is not that you must automatically default to the most uninspiring font simply because it’s available on all operating systems and offers the best cross platform accessibility. Rather it’s a case of defining your CSS to offer a range of contingencies so that even if the first choice font can’t be loaded, reasonable alternatives will be used instead. This website’s default font is Century Gothic, and I’m happy to have that because it is present on approximately 90% of Windows-based PCs. So I know that the majority of people who visit this site will see it as it was intended. But Century Gothic is less common on Macs, and non-existent on Linux, so I need to make sure that I define my CSS so that the site still appears attractive if people browse with those operating systems.

Using CSS it’s easy to define an “order of preference” for fonts. This means that when a computer can’t load the first font it will automatically take the second choice, and so on. The safest fonts, which will appear on nearly all Windows or Mac OS based computers, are Courier, Arial and Verdana. Times New Roman is actually surprisingly less common that is often thought, appearing on less than 90% of Windows or Mac OS based PCs. A useful source of typographical options is available at Webspace Works. So given those options, Fog of Eternity is set up so that its second choice is Arial, a font which looks perfectly acceptable in rendering the overall design.

body
{
font-family: “Century Gothic”, Arial, Helvetica, Sans-Serif;
)

As you can see from the CSS code, it’s easy to define a number of preferences. Century Gothic is the first choice, placed in quotation marks because it is a two word font name. I have both Arial and Helvetica cited because Windows and Mac OS sometimes use these interchangeably. They are nearly identical, and Mac OS often uses Helvetica in preference. And finally I define generic Sans-Serif so that in the unlikely event of none of the previous fonts being present on a computer, it will choose its default font of that type. In this way I can move to ensure as many people as possible will see the first choice site design in terms of font, but that the web design will remain strong even if that font is not installed on their computer.

Filed under: Accessibility, CSS, Design by Robin Cannon