Home : Lessons : Graphic design 1 : Web limitations
Introduction
Web limitations
Font readability
Selecting a typeface
Type size
Text layout
Text alignment
Summary
< Previous: Introduction

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: