ScotConnect

Why would you want to control the text on a Web page?

The typeface used on a Web page, or indeed any document, affects the way we feel about the content. Whereby one page looks formal and serious, another informal and friendly, yet another may be modern and cool.

Clearly the typography of a page designed to support a childrens TV program should be different for one designed for a politics course in a university. Similarly the text on the Financial Times Website, if it is doing its job right, should be be different from that of the The Tate Modern.

So typography, whether on the Web or otherwise has a job to do. This could be to support and re-enforce the message being presented by the content, or tell you something about the writer, or publication, that the the page is part of.

The font chosen should give the reader clues about the nature of an article or content they are about to read. For example, the text from an old manuscript might usefully be presented in a cursive style font that reflects its ancient content.

Having said that, it turns out that it is not that easy to find many examples on the Web that illustrate the points I make above. It can never be guaranteed that the font-face specified by the designer of a Web page will be the same as that seen by the reader.

A short introduction to the world of typography

Using fonts on the Web is problematic; there are many hidden dangers for the would-be Web typographer. However, before embarking on a discussion of potential problems, for those new to the world of typography, it would be useful to quickly summarise the following 'general knowledge' about fonts and design. If none of this is news to you, please skip the following section.

Serif versus Sans serif

Traditionally fonts have been categorised as either 'serif' or 'sans serif'. Serif fonts are characterised by the small decorative embellishements, called serifs, that are added to each character - Times is a good example:

Times

Sans serif (without serifs) fonts do not have these embellishments. An example of a sans serif font is

Helvetica

The commonly held belief is that sans serif fonts are more difficult to read than serif fonts. This is based on the idea that the serifs help to lead the eye through the text, and the notion that our brains are quicker to recognise their more distinctive shapes.

For this reason most traditional documents use serif fonts when large chunks of text need to be presented, such as the main body of a story in a newspaper.

The cleaner, bolder, less busy shapes of sans serif fonts are used most often for 'display' type such as headlines and advertising slogans. You will recognise the implementation of these basic 'rules' in most newspapers and magazines.

What do serif and sans serif mean in the context of design

Sans serif fonts are arguably more 'modern' looking, more 'cool'. Although many consider them to be mechanical and lifeless; lacking the subtlety, character and warmth of serif fonts. When the first sans serif fonts were introduced some people had a strong negative reaction and labelled them 'grotesque' (see http://www.webreference.com/dlab/9802/sansserif.html).

Serif fonts look more 'traditional', characterful, friendlier and more familiar, and as mentioned earlier, easier to read in dense passages. (see history of sans serif fonts: http://www.webreference.com/dlab/9802/sansserif.html)

These are very general observations - though hardly adequate for any meaningful introduction to the subject - they provide a basis for understanding how different styles of fonts are commonly used when designing online or off-line documents. As Dmitry Kirsanov notes in his article 'Matching Fonts' :

.. your single concern should be about a good match between the style, semantics, and intended impact of your text and corresponding properties of the typeface it uses. You can't set Shakespeare plays in a sans serif font (even of the "humanist" variety), and fragile Modern serifs are not appropriate for a pushy advertisement message. " http://www.webreference.com/dlab/9802/

A note on the readability of serif fonts on the web

It should be noted that the general rule that serif fonts are easier to read cannot be relied upon when designing for the Web. The usability expert Jakob Neilson, notes that, particularly for small sizes, sans-serif fonts are more readable on low resolution screens.

This appears to be confirmed by Ralph F. Wilson who asked the readers of his HTML based emails what fonts they found to be the most readable. Sans-serif fonts were favoured over serif fonts, and Arial was preferred to Verdana for larger font sizes - see the full details at http://www.wilsonweb.com/wmt6/html-email-fonts.htm.

Index | Next: Issues that can make it difficult for you to control how your text looks to the user


Free weekly accessible web design tip

Register for your weekly accessible web design tip 
Email: