• Articles Index
• Related Topics:

Fonts on the Web

by Martin Green

Is There A Problem?

Choosing your own fonts is a bit of a problem on the web. You specify a particular font in your web page editor and you see it on screen and in your own browser. The web page editor creates HTML tags instructing the browser to display the text in a particular font. Because you have that font on your computer you see what you expect to see. But if the person viewing your web page doesn't have that font on their computer or, if they've told their browser to always display text in a different font, they'll see something else.

So who has what fonts? You can't know what fonts all the visitors to your website have, but you can make an intelligent guess. It's fair to assume that anyone with a PC has Arial, Times New Roman, and Courier New (unless they've chosen to remove them) because they are installed with windows and are pretty much standard. They are also the standard fonts used by browsers for display of sans serif, serif and monospaced text. Mac users have different fonts. For example, Helvetica is the Mac's standard sans serif font. That's as much as you can take for granted!

I've created this text in Verdana, a new font commissioned by Microsoft especially for the web because it looks good on screen. It also prints well, especially at small point sizes, and it happens to be my current favourite. But you may be seeing something completely different! If you haven't got Verdana and want a copy you can get it free from Microsoft at www.microsoft.com/typography/

So, what's a poor web designer to do?

I can be certain that the text you can see on the left is Goudy Stout 30pt. How do I know that? Because it isn't text, it's a graphic.

Using Text Graphics

So, what can you do if you want to display text in a certain font? The solution is to create a graphic, a picture of the text exactly as you want it to be seen.

The text on the left is one such graphic. The font is Gradl. The file is a GIF and is just 2KB in size.

If you want to substitute real text with graphics do it sparingly! Some people surf with graphics display switched off - they usually do this for speed - but they won't see your graphic text! They get to see an empty box where the graphic would be and they can choose to download it if they want. You can help them by making use of the HTML "alt" attribute which displays alternative text - in effect a label for the graphic. Point at the above image and you'll see one.

Remember too that graphics take time to download. If you use graphics to excess, your visitors are going to get bored waiting and will move on without waiting to see what you have to say. Limit your text graphics to headings, logos and special effects.

When you create images of text for the web there are a number of things to consider. Should you antialias the text? What sort of file is best, a gif or a jpeg? Should the file be transparent?

All About Antialiasing

Antialiasing is a process that graphics programs use to give an impression of smoothness to curves and angled lines. Graphics files of the type used on the web (GIFs and JPEGs) are made up of a grid of coloured rectangles (pixels). When a this kind of picture represents a curve or angled line a jagged edge results. In large or complex pictures this is not usually apparent, but it can be a problem when rendering text.

Antialiasing creates additional coloured pixels of intermediate shades between foreground and background to give the impression of a smooth edge.

		Look at the pair pictures on the left. Both represent a 2 pixel wide line drawn at a 45 degree angle. In the left-hand picture the line is not antialiased and has a fine jagged edge. In the right hand picture the line is antialiased and appears smooth.
		This pair of pictures show the same two lines magnified x5. Now you can clearly see how the effect has been achieved. The antialiasing has created additional pixels of an intermediate shade between the black of the line and the white background (i.e. grey).

Text is full of curves and angled lines. When it is rendered as a bitmap graphic the jagged edges can spoil its appearance.

The picture on the left shows two examples of a letter. Can you spot which is antialiased? The program has used four intermediate shades of grey to create the effect. The pictures below show the portions of the same letters magnified x10. The font is Gradl.

Antialiased Text	Non-Antialiased Text

So, text in graphics should always be antialiased? No! Unfortunately it isn't as simple as that. Some fonts are designed to be legible at small point sizes. Font designers can use a process called 'hinting' to redraw letters when they are used at small point sizes so that they appear correctly when viewed on a computer screen (where, like a bitmap graphic, the image is also made up of pixels). As a result, some fonts look better at certain sizes when they are not antialiased. This picture shows how antialiasing can decrease the legibility of a font at a small point size...

Here's the same text magnified x8. You can see how the attempt to smooth curves and angles has actually had the opposite effect...

The answer is to experiment and see what looks best. Be sure to check out the results in a browser at the size and resolution that your visitors will see.

If you plan to use text graphics on a coloured background you'll also need to know about transparency.

Using Transparency

The smoothing effect of antialiasing is achieved by blending the foreground colour of the image (in this case the colour of the text - black) with the background colour (in this case white). To do this the graphics program creates pixels in a range of intermediate shades. When the foregound is black and the background is white, the blended pixels are varying shades of grey. The viewers don't see this. What they see are smooth lines. Unless...

If your web page has a coloured or patterned background you can often improve the appearance of graphics, particularly text graphics, by making the background colour of the image transparent.

Look at the two images below. On the left is the original graphic. Its white background is clearly visible against the web page's background image. On the right is the same graphic, but its background colour (white) has been designated as transparent. The background image of the page can be seen through the transparent parts of the graphic.

Because the original background colour of the graphic was white, and the background of the page is also mainly white, the antialiasing that was applied to the text when it was created can't be seen. Only its beneficial effect is apparent. See what happens when the same image is placed in a different-coloured background...

The grey pixels that didn't show up against the white background now appear as a white fringe around the letters. Aaaarrrghh!

Don't panic! With some forward planning this problem is easily avoided. The solution is to know the colour of the page's background (or the dominant colour of its background image) before you create your antialiased graphic.

Create your antialiased graphic using a matching background colour which you designate as transparent. When you place the resulting image on the page it will blend seamlessly into the background...

And to prove I'm not cheating, here's the same image (originally created on a blue background) placed on a white page...

If you look carefully you can see a blue fringe, the result of the antialiasing creating pixels in various shades of blue as it blended the black foreground into the blue background. Here's what it looks like magnified x10...

You need a graphics program such as Adobe PhotoShop or, my favourite, Paint Shop Pro to help you create text graphics. You will find detailed step by step tutorials on creating text graphics in the Design section of this site.