Selecting a suitable font face

Introduction

Selecting the right font for your website is a compromise between

  • the style or look that you are trying to achieve,
  • the "readability" of particular font faces on a computer or phone screen
  • the availability of the different fonts on different platforms.

Not all fonts are available on all platforms so we need to offer a choice of fonts which must include the most common somewhere in the list.

Common Font Faces available for websites

Originally browsers only had one font face available (Times New Roman) and many browsers still default to that font if no font is declared by a web page. Nowadays operating systems and browsers come with a wide range of fonts built in so that web designers have a much greater choice.

The original Times font face is quite suitable for printed paper, but to be readable on a computer screen it needs to be quite large. This is because the font letters have extra strokes (serifs) that computer screens tend to blur when a small size is used. On the printed paper these serifs can help the flow of the text, but on a screen the blurring can make it almost unreadable. A number of fonts without serif (sans-serif) are available which produce much better results on a computer or mobile phone screen.

For text on the web the most common sans-serif fonts are Verdana, Arial, and Helvetica. Verdana was specifically designed to be more readable at small font sizes, it has wider proportions than Arial so works well for body text. Arial is better if used for larger sizes such as headings. Helvetica is most popular with Mac and Linux users, but is not always supported by older versions of Windows. A popular alternative to Arial is Universe which looks similar but with slightly wider spacing.

Comic Sans MS is still quite popular amongst web designers aiming at a young audience. This font tends to make the page look amateur (or even condescending), is quite hard to read at a small size and becomes tiring if used for large blocks of text. If you are aiming at children, and need a larger font, try Arial, Universe or Century Gothic.

Less common fonts

As an alternative to Arial and Verdana the Trebuchet MS font works well on a computer screen for headings and short blocks of text. Its lowercase letters are a bit more "squiggly" so it can get quite tiring if used for large blocks of body text. Century Gothic is a more rounded font that can also be used for headings and short body text. Tahoma is a heavier font that can work well for headings and larger body text. Microsoft Vista has three fonts (Calabri, Candara and Corbel) that might become more popular in future. Corbel appears to be somewhere between Arial and Verdana so could be used for body text and headings.

Serif fonts (with the extra tails) may not be suitable for body text, but they can be used with effect in headings. Times New Roman (Times on the Mac and Linux OS) is always reliable, whilst Georgia is very common if you need a change. Georgia is slightly better for body text as it is more fluid and has better readability at the smaller sizes. Courier and Courier New have a "computer" look about them and are often used when explaining machine code or other technical issues where the clear distinction between the characters makes it safer for programmers to work from.

Stacking font declarations

There is a wide range of font faces available for web designers to use, however these are not all supported by different computer operating systems. For example the Mac OS provides the Geneva font face instead of the Tahoma provided with Windows. For these reasons it is necessary to provide a list of alternative fonts in case the preferred font is not available. The last font in any list should always be the default (universally available) type of font. For sans-serifs fonts this is simply "sans-serif" and for serif fonts such as Times the default is "serif". Three typical font lists for paragraphs as set in CSS are shown below.

p {font-family: Corbel, Verdana, Arial, Helvetica, sans-serif;}
p {font-family: Tahoma, Georgia, "Times New Roman", Times, serif;}
p {font-family: "Courier New", Courier, monospace;}

In the first example we want to use Corbel font, we then offer Verdana as a suitable alternative, followed by Arial and Helvetica. If none of these are available then we ask for the default "sans-serif" font of the system being used. In the second example we ask for Tahoma or Georgia, but if these are not available then a version of the Times font should be used, finaly the default serif font of the system being used (Note that it is possible to mix serif and non-serif fonts in a declaration, but the final default must be one or the other). In the third example we want to display some text that looks like basic machine code, so our final request is for any monospace font that the system being used has available..

Font Sizes

There is no way to guarantee that a user will see the exact size of font or layout that we might want. In the world of the World-Wide-Web the user has control. So accept the inevitable and allow for the fact that your carefully designed pages are going to be shrunk or stretched by your visitors. At the least, many people will need to enlarge your font size, some will have older video screens with larger pixels than yours, whilst others will be using small devices such as mobile phones with very small pixels. The solution is to use relative (proportional) sizes for fonts that allow the page to be adapted to the user's method of viewing..

The starting point for font sizes is the default size set by the user’s browser. Normally this is left at the “factory setting” which can be between 10 and 14 pts depending upon the browser (Internet Explorer sets this default as Times New Roman at 12 pixels high).

Options for using proportional fonts are as follows:

1. Stick with the default CSS relative sizes (xx-small to xx-large) as these will always work relative to the original browser default sizes, (medium being equal to the browser’s default size).
2. Use em measurement that is based on the equivalent size of the letter “M” in the current base font. It is more common than the “ex” or “%” measurement which work in the same way. Warning - these measurements are relative to the current baseline measurement (this may not be the browser default). You need to know exactly what size font is in use at the position that you change to a new size, otherwise you can cascade relative upon relative and lose control of your dimensions.