Selecting suitable fonts and line spacing

The message of your website is presented primarily as text. Selecting a suitable font face for this text is probably more important than any other layout consideration. Most of the time spent on most web pages is spent reading the text, so it is important that this text uses a font face and style that is clear and "easy on the eye" so that everyone (and people with weak eyesight in particular) can concentrate on your message rather than struggling to read your text.

This series of tutorials looks at

  1. selecting fonts that are easy to read,
  2. providing additonal fonts in case your option is not available to the users,
  3. providing fancy elements such as larger first letters for paragraphs
  4. spacing lines so that they are easy to follow
  5. selecting colour contrasts 

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.

Line spacing

Readability is enhanced if we leave an easily discernible trail for the eye to follow. Adequate line-spacing helps the eye to travel along the text smoothly, without hesitation or thought. The default setting for line spacing is not always the most suitable. The longer the lines of text the more space required between the lines so that as the user's eye returns to the beginning of the next line they do not get confused. Calculating the best line spacing for a particular piece of text is not an exact science and will depend upon the font used as well as the line length. We have used a line height of 1.6ems for these lesson notes which we have found to be a suitable compromise for Verdana when we use the full page width. For short columns and bulleted lists we find that a line height of 1.2ems works well. For a general purpose website the W3C recommends line spacing of 1.5ems, but this will depend upon the font face and you may well need to use a larger space for serif fonts.

Line Justification

Text should not be justified (aligned to both left and right margins) for screen users because the mathematics involved often creates blank spaces within a sentence that breaks the flow for the reader. Sometimes these blank patches can cause disconcerting patterns that cause serious problems for people with dyslexia.

This paragraph has been formatted as justified to allow you to see the results. If you shrink and expand your browser window whilst viewing this paragraph you should see some lines of text with much bigger spaces. This effect is particularly apparent if the text contains long words such as discombombulation, Honorificabilitudinitatibus, antiskepticism, deinstitutionalization, counterrevolutionaries or Pseudomultiquattuorquinquagintaquadringentillionaires (yes it is a real word from the world of finance to describe people trying to appear richer than they are!).

Letter spacing

If you want to space the letters out for individual words, as used in the heading for this section, you should always use CSS as shown below.

.wide {letter-spacing: 1em;}

If you use spaces (pressing the space bar) to separate the letters the word it will be read by screen readers as a sequence of individual letters (i.e. not a real word), this may not be intelligable to screen reader users.

Colour Contrast

 

 

Large initial letter (Drop Caps)

ometimes you will want to do something really different by using an illuminated character to start a paragraph. This can really make the section stand out for a sighted user, but the initial character (the letter 'S' in this example) is a graphic image. For this to work, and still be accessible to blind users we could import the image with HTML and provide an alt tag containing the letter "S", but this is untidy. A better solution is to hide the image of the letter "S" from screen readers by using a style sheet. We can then provide a normal letter "S" for screen readers to find and read out aloud to the listener.

The method used here is to define a class to hold the the illuminated letter as a background image. This will be ignored by screen readers. We then need to present the normal letter "S" to screen readers and text only browsers without showing it to visual users. We do this by wrapping the initial capital "S" in a span defined as "hidden".

First-Letter capability with CSS2

CSS version 2.0 allows designers to make use of a pseudo element that controls only the first letter of a paragraph. The problem is that not all browsers work with CSS2 so some users will only see a standard looking paragraph. However here is an example that is perfectly acessible.

Define a class in your style sheet that uses the first-letter pseudo element.

.newpara:first-letter {
font-size:300%;
float:left;
color:#0000FF;
}

 

Now visual users who have browsers that support CSS2 should see a large initial letter "N" coloured blue. Visual users who do not have CSS2 capability will see a normal capital N at the beginning of the paragraph. Users of assistive software will also get a normal letter "N" at the beginning of the paragraph because their software ignores the stylesheet.

There is another psuedo element in CSS2 called "first-line". This element formats the first sentence, or until a line break (br) is reached. Great care should be taken not to use this class when a heading (h2 to h6) is more appropriate. These pseudo elements are purely visual attributes and provide no structural information to assistive software, text-only browsers or search engines.