Web typography

by Joe Gillespie — Jun 1, 2000

by Joe Gillespie

A good background image or pattern is an economical way to give a Web page visual interest. When I say economical, I mean it in two ways - it is quick and easy to produce, and it requires very little bandwidth to deliver the page. Take an interesting background, add a little text tastefully and you are probably ninety percent of the way there. But before I start discussing background images, a little 'background on backgrounds' is in order!

The vast majority of printed material you see has no background image at all, just plain black text on white paper. But, because there is no cost penalty for having colour on a Web page, they can be as colourful as you like - within reason.

Arial A

A 12 point Arial 'a' showing how approximate the screen version is compared to the printed version.

However, there are two big differences between text on a piece of paper and text displayed on a computer screen...

The first one is resolution.

The text on a computer screen is low resolution, each character being described by a grid of pixels and with smaller sized fonts, this shortage of information makes it more difficult to form recognisable and identifiable character shapes. Because the letterforms are constrained to this grid, the dots that form the letters are often not where they should be, only approximately so. This creates what can only be described as ‘visual noise’ - unhelpful information that isn’t contributing to the identification of the letterform but has to be there because there is no such thing as ‘partial pixels’. Partial pixels can be simulated using tones of the type colour, that’s what anti-aliased type is all about <link>, but that adds noise too and causes small type to appear blurred.

The design of good, readable letterforms takes a lot of skill on the part of the type designer and many typfaces originally intended for high resolution print do not work particularly well when translated into low resolution screen fonts. Originally intended as a rough guide to what a printed page would look like, screen fonts were ‘excusable’ at best. But, when the concept of online information came along, there were very few fonts available that were designed specifically for reading large amounts of text on computer displays.

Fonts that work well on a computer screen are ones that are optimised to fit on the natural pixel grid. The more pixels you have to play with the better, but with current systems, it is always a compromise between resolution and cost. Going from 72 pixels per inch to 144 pixels per inch, for instance, quadruples the number of pixels and the memory required to display them, which then requires a faster processor to move the extra data in a reasonable period of time. We are always on the threshold between cost and acceptability.

For the minute, we have to accept that on-screen text is not as easy to read as regular printed text because of the amount of ‘visual noise’ that accompanies it, but there’s another factor at work...

Black H

Because of the surrounding bright white background, this letter appears to be thinner that it actually is.

Grey H

With low contrast, the character displays correctly.

White H

Bright type on a dark screen seems bolder than it really is.

The second difference between printed and screen-based text is in the fact that computer displays are luminous. Printed material is viewed by reflected light and the contrast ratio - the difference in brightness between the darkest and lightest parts of an image - is restricted. On a computer display, the contrast is much greater. Black type on a white screen is actually very difficult to read because of the contrast and ‘glare’. Glare is caused by an optical illusion where the edges of black type are ‘burned’ by the adjacent brilliant white and make the type appear even thinner than it is.

In conventional print, ‘ink spread’ thickens black type on white paper and thins-down reversed-out type. Printed text always looks bolder than it does on a bromide partly because the ink is squeezed sideways when it is pressed into contact with paper and also because of the absorbency of the paper causes a blotting-paper effect. Consequently, designers usually specify a bolder face for reversed-out type to compensate for the filling-in effect.

When you reverse type out on a screen, the very opposite happens, the type appears bolder than it actually is. This is why most film and television titles are reversed out. Older computer systems used reversed-out type for word processing, white out of blue, green or amber out of black. This was actually easier to read that the current trend towards WYSIWYG black on white. Okay, people like to see what their printed page is going to look like but, lurking in the preferences in Microsoft Word, is the ability to display word processed pages white out of blue, which is a lot more readable and easier on the eyes for protracted screen reading sessions. Try it!

There is a lot to be said for reducing the contrast of text on a Web page. The ‘default’ - black on light grey is actually quite good in readability terms if somewhat boring and academic-looking. Dark text on any muted background colour is preferable to white.

Receeding Type

The juxtaposition of foreground and background colours makes type appear to advance and receed.

You also have to consider the physiological effects of advancing and recessive colours. Warm colours appear to come forward and cool colour to go away from the plane they are on. A living room painted in cool blues or greens, for example, will appear to be more spacious and airy than one painted in warm reds or yellows. The walls seem to be further away. It doesn’t take any great stretch of imagination to see why this situation is ingrained into the human instinct as it is evocative of the sky and the great outdoors. Warm colours are 'cosy' and reminiscent of sitting round a fire.

A overly bright, warm background on a Web page makes for uncomfortable reading as the background seems to be in front of the text.

Web designers should be aware of this ‘palette’ of optical illusion tricks. Where print designers have a wealth of type weights to play with, screen fonts allow very few. But, juxtaposition of hue and tone can simulate the effect of type weight to some extent. In environments of high tonal contrast, dark on light visually thins the type, whereas light on dark thickens it. As contrast reduces, this effect becomes less pronounced and the type weight appears to be closer to its actuality.

Where colour is concerned, cool backgrounds recede and let neutral coloured type come forward. Hot backgrounds encroach on neutral or cool type and diminish its presence.

Backgrounds

Now, coming back to background images and patterns. It’s obvious that if a background is too obtrusive, it makes the type on it more difficult to read than need be. The contrast between the foreground type and the background image is changing constantly, so you have to satisfy the situations of least contrast.

If you put black text on a background that has areas of black or dark colours on it, the text is going to be visually fragmented and difficult to read. Similarly, light text on light parts of background just won’t show up. You can get off with much less tonal contrast on a plain, or subtly patterned background than you can on a strongly mottled one. Generally speaking, light text works on a dark background and dark text on a light one. Mid tone text on a mid tone background causes more legibility problems and should be used with great care.

Controlled Type

Using an outline to make type readable on a changing background- neither dark nor light type will work on a background like this.

Some tricks used by graphic designers to make type work on strong backgrounds is to either contain the type within a slug of contrasting plain colour, called a ‘control field’ or to give the type an outline, or a drop shadow. On a Web page, you don’t have such luxuries except for headline type saved as GIFs.

Type going across backgrounds, whether they are photographic or graphic patterns, needs to be larger and bolder than type appearing on plain backgrounds. Not only do you need to consider the boldness and size but the tonal and colour contrast. You have to recognise the disruptive effect of a background that inhibits natural left to right reading flow.

My choice of background for Web Page Design for Designers is based on many of the factors I’ve mentioned above. The dark blue background with pale grey type is not too contrasty and, if anything, visually strengthens the type. The blue is recessive, again helping the type to come forward, the pattern is fairly subtle and is horizontal, it doesn’t impede natural reading flow. The main reason it is there however, is none of these. It is because it is distinctive. It is distinctively different from other sites and helps hold together the pages of this site - it is a unique identity.

If you see this background on another site, you know where it has come from!

In the end, it is a juggling act - a balance between ease of reading and visual character. It is simple to make a page easy to read, put black type on a grey background. If you want a characterful page, use a photograph of a trayful of garden worms enlarged larger than life, everybody will remember it. Getting both factors right is a little more difficult.

If I had time to start from scratch and do the whole site again, which I haven’t, the only thing I would change would be to specify a font face other than ‘default’ - which generally means Times Roman unless readers have changed the default in their browsers.

Background image tips

Now, a little about producing Web page background images. As you will be aware, backgrounds on Web pages tile infinitely both horizontally and vertically. You could have a background image that is two by two pixels - you can't get much of a pattern with less than that - but background tiles that small make the processor work harder and longer to fill the page and this slows down page display, especially on older, slower machines. The bigger you make a background tile, the quicker it will display but, of course, it will have a larger file size. So, you have to make a compromise between files size and display speed. Any background tile that is smaller than about 24 x 24 pixels is too small for efficient screen display. I like to go for something like 64 x 32 pixels for regular patterns and even more for irregular ones so that the tiles don't have an obvious repeat.

Now, I really enjoy working at pixel level for background tiles and icons and here's how I like to create backgrounds.

Making background images

Background Tile

The background for this page is just a repeat of this tile.

I open a new window in Photoshop and enlarge it to 1600%. I also open a 'New View' to show me what the pattern will look like actual size. I can then draw a single 'tile' with the pencil tool.

When I have this single tile, I select it with the marquee tool and do 'Edit Menu - Define Pattern'.

In a new window, I do 'Edit Menu - Fill… - Use Pattern' and the whole window is filled with repeats of my single tile. It is usually quite difficult to judge what a repeated pattern will look like until you do this.

When I'm happy with the effect, I select a number of complete repeats (at least 24 x 24 pixels, as mentioned above) and do 'Image Menu - Crop' to isolate them. Then I use 'File Menu - Save for Web' and save a GIF file with the least number of colours possible.

With a little experimentation, many interesting backgrounds can be produced with this very simple technique.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float