Graphic design 1

Introduction

Fonts

We discuss typefaces (often known as "fonts", although technically a font is a particular variant of a typeface) from two perspectives:

• Readability. The Web is different to printed media; there are different rules to follow when ensuring readability. In general, sans-serif typefaces are more appropriate than serif faces on the Web.
• Appropriateness. It is important to select fonts which correspond to the message you're trying to convey, rather than clashing with it. Instead of choosing a typeface because you like it, you should choose a typeface because it's appropriate for the content of your page.

Text layout

When laying out blocks of text, there are two important decisions to be made:

• Line length. This affects readability. In general, text lines should be about eight to twelve words long. You can ensure this by using appropriate margins.
• Line spacing, or the distance between the bottom of characters on one line and the next. Increasing line spacing can make text easier to read.

Web limitations

Fonts on the Web are limited. You can rely only on a small selection of fonts that will be installed on most people's computers. If you need to use a different font for your page, you may be able to create bitmap graphic files containing headings etc. in the font of your choice.

Available fonts

Web pages only normally have access to fonts available on the computers of the person who reads the page. This means you have to be careful; it's easy to specify a font that is available on your machine but not on most other people's, resulting in a page which looks exactly how you intended on your PC, but somewhat different on everyone else's.

Because of the variety of computers and operating systems that are used to browse the Web, you can only really rely on the basic categories of font: serif, sans-serif, and monospace. On a Windows PC, these usually correspond to Times New Roman, Arial, and Courier New respectively.

When you specify fonts on the Web, you can give a list of several options, so that if a specific font is available, it will be used, and if not, then a standard default will appear instead. It is good practice to end this list with one of the standard font category keywords (serif, sans-serif, or monospace) so that you can be sure every Web browser will at least understand that part.

For example, you could list Futura Medium as your preferred font. Most people won't have this, so you could specify Arial as a second choice. Finally you should give the generic font category, which is sans-serif.

Graphical headings

One way to get around this font limitation is to render your text as graphics. This means drawing your text in a paint program (such as Adobe Photoshop or Paint Shop Pro) and saving it as a graphics file, generally in .gif or .png format.

Because you can include graphics in Web pages, this technique allows you to use any fonts you wish. However, it isn't really appropriate for body text because your page will become large and take a long time to load. (There are also other disadvantages: graphics can't be searched for keywords, for instance.) Graphical text is usually reserved for titles or navigational features.

Font embedding

In an ideal world, you would be able to specify any font in your web page, and actually include that font with the webpage, for people who don't already have it.

In fact, there are two different technologies which achieve this - but there are disadvantages:

• They work differently in the different browsers.
• They are unreliable
• Including a font (which could be 100 Kb in size) can add significantly to the download time of your site.
• Both techniques are difficult to use, and one costs a significant amount of money for software.

Font readability

On the Web, sans-serif typefaces are usually more appropriate for body text.

Sans-serif is preferable

Sans-serif text is easier to read than serif text on the Web. This is because the shape of letters with serifs is more complicated and cannot be accurately reproduced at the limited screen resolution.

Different to print

This is the opposite to printed media, where it is often said that serif typefaces are more readable - the serifs provide visual cues that help to determine the shape of the word. This works well in print because there is sufficient resolution to display the (small) serifs.

(In fact, serif typefaces aren't universally considered easier to read, even in print - some studies have shown that users find it easiest to read whichever style of typeface they encounter most often.)

Selecting a typeface

As discussed, there is generally not too much choice of typefaces on the Web. However, where there are decisions to be made (for example when you are making up text as graphics, so any font is available), it's important to make the right choice. Rather than choosing a font that you think "looks good", you should choose one appropriate for the content and meaning of the page.

Meaning of fonts

Fonts are not simply aesthetically different. Each font carries a set of meanings and associations with it, which can be used to reinforce the message of the page.

For example, in general, sans-serif typefaces look modern. Serif typefaces look more old-fashioned or traditional.

Fonts carry other connotations, however. For example, the Microsoft font "Comic Sans" gives an "amateur but friendly" impression. Next time you notice an interesting typeface, look at it and try to think of ways to describe the impression it gives: is it high-quality or cheap? casual or stylish? amateur or professional? rich or poor? conservative or anti-establishment?

This might seem a little excessive, but all these and more are impressions and images that can be conveyed by a good - or poor - choice of fonts.

Impressions from typefaces

Playing it safe

If you're not sure of your own aesthetic judgement when it comes to font choices, you can play it safe by choosing one of the standard fonts. These do not carry very much meaning, because they are so widely used, so you can include them on your page without worrying about introducing unintended meanings.

If you were to choose a more distinctive font without understanding the issues, you might end up - for example - giving an amateur image to your professional page, or attiring your church's Web site in fonts more appropriate for a Las Vegas hotel.

Moderation

Fonts should be used consistently and in moderation. Generally, you should use a maximum of two typefaces on a page (one for body text and one for headings), except in special cases. Otherwise your page will look like a gaudy mish-mash of styles.

Even within the same typeface, it's best to restrict the number of different sizes and styles you use. Two or three variations per typeface should be sufficient.

Type size

Many Web sites have problems with type size; either headings are too large, or - more seriously - body text is too small to comfortably read.

Heading size

The default size for headings on the Web is too large. Headings do not need to be giant. For example, one and a half times the body text size is usually plenty.

Remember that you have other options which allow you to emphasise headings without increasing their size. For example, you could make heading text bold, or you could include a horizontal rule underneath the heading. These techniques can be especially helpful when you need multiple levels of heading.

Body text size

Body text on the Web is often too small to read comfortably. Although most browsers have a feature to increase text size, this does not always work correctly, and users should not need to do this to read your page easily (unless, perhaps, they have poor vision).

Bear in mind these general guidelines:

• If text does not need to be small, why not pick a comfortable, medium size?
• As a minimum, specify text one size larger than the smallest you find comfortable.

Technical problems

Older versions of Macintosh browsers display text significantly smaller than Windows browsers.

Even on Windows, some browsers may occasionally display text a little smaller than specified.

You can reduce these problems by defining text size in pixels using a stylesheet, but this has its own disadvantage: due to a limitation in Internet Explorer and old versions of Netscape, text specified in pixels cannot be resized by the user in those browsers.

These factors make it important that you err on the large side with text size specifications.

Consistency

You should be consistent with text sizes. Try to restrict yourself to two or three different sizes on each page. This helps give a more professional appearance.

Text not intended to be read

If there is text on your page which nobody will want to read - for example, copyright notices or legal disclaimers - feel free to make it as small as you like. The text does not need to be read, so it may as well be as small as possible in order to reduce its impact.

You might even want to use a dull or faded colour for that text, so that it is less obvious against the background. (That is the approach taken for copyright messages on this site.)

Text layout

Text is generally laid out in blocks with a certain width. In order to achieve good readability, these blocks should be a maximum of eight to twelve words wide. Lines of text should also be well-spaced.

Width of text blocks

Text blocks should be a maximum of eight to twelve words wide. This is because if the reader's eye has any further to go along the line, it may lose track of the position of the start of the line, and it takes the reader longer to move from the end of one line to the start of the next.

You might need to include a margin at the left in order to make a text block of that width look sensible. For example, this Web site uses a wide left margin.

Line spacing

Increasing the space between lines can improve readability, because this makes it easier for the eye to recognise the gaps and therefore to track back to the start of the next line. Most web pages can benefit from increased line spacing over the default.

Increasing line spacing also carries some meaning; often it can give the impression of a more open, airy, and stylish design.

(You can alter line spacing using a technology known as 'stylesheets' or 'CSS'. Not all visual editing programs support this.)

Text alignment

You probably know that there are several ways to align text: left-aligned or justified, for example. Justified text is not usually appropriate on the Web, and the other types of text have specific uses.

Types of text alignment

• Left-aligned or "flush left" text has a straight-line left margin, but a ragged right margin as different lines take up different amounts of space.
• Right-aligned "flush right" text is the reverse, lined up along the right margin instead.
• Justified text (used in newspapers) has word and letter spacing altered so that it lines up along both margins.
• Sometimes lines of text are also centered on the page.

Justification - why not?

People often want to use justified text on the Web because they think it looks "tidier". However, this is not often appropriate, and is more difficult to read than left-aligned text.

This is because of the low resolution of screen displays. Screen displays cannot cope well with the addition of small, subtle amounts of space between words or letters. As a result, justification always looks poor on screen displays. It tends to result in uneven spacing, and can also sometimes break up the shape of the word (we recognise words based on their overall shape, not on the individual letters).

Justification in printed publications also relies on hyphenation, which means that a word can be broken in two if it does not comfortably fit on one line. Current Web browsers do not support hyphenation, which means that justification results in more extreme changes in spacing.

Centered text

Centered text is sometimes appropriate for headings. It is not a good choice for body text because it usually looks a bit ugly and is difficult to read.

Sometimes centered text can be okay for short, narrow paragraphs (two or three lines, each only five or six words wide).

Right-aligned text

Right-aligned text can be useful for effect in some cases, or as part of navigation (you might want to right-align all the options in a navigation menu).

Left-aligned text

Left-aligned text is best suited to almost all "body text" use on the Web.

Summary

Fonts and text layout need to be chosen carefully on the Web, both to assure good readability and to make sure your page gives the right impression.

Font limitations

On the Web, there is a very limited selection of fonts to choose from. You cannot use just any font you have on your PC, unless you make it into graphics files for headings.

Font choice

Fonts should be carefully chosen to convey the right message. Most "decorative" or distinctive fonts carry a variety of connotations. If you are uncertain in this area, you can play it safe by sticking to the default "plain" sans-serif or serif fonts. (Sans-serif is easier to read for body text on the Web.)

Line length

Lines of text should be a maximum of ten to twelve words long, or readability will suffer.

Line spacing

Increasing the gap between lines can improve readability.