This page is designed for easy printing on A4 and US letter paper

Good typography - on the Internet?

 www.vortex.uk.com

Typography and the Internet

Introduction

Are you involved with Web design in any way? If so, answer me this: why do people surf the Web? It isn’t just to see yet another set of bevelled glowing rollover buttons - it is (almost always) the same reason you read MacUser: to find information. And virtually all that information is provided as words.

Good information design revolves around excellence in typographic layout and control. Get it right, and everything falls into place; the layout becomes a seamless composite greater and more effective than the sum of its parts. Get it wrong, or just ignore the issue entirely, and your pages will be less effective at best, and is likely to be a practical failure. So, if this is so clear-cut, why is most typography on the Web so overwhelmingly bad?

Some Reasons...

There are a few clear reasons. The medium itself is a big factor, but the tools and the workmen are also to blame. As some people point out - quite rightly - the Web is not print, it is an entirely new medium. And as with every new medium that appears, the old rules, the old ways of doing things, have to be reassessed. Ink on vellum required dramatically different approaches and techniques to chisel on stone, as did wood and then metal type on paper. Interactive, screen-based publishing is a massive change, on a par with Gutenberg’s invention of the printing press with movable type.

But this doesn’t mean that we have to throw out absolutely every rule which applies to print design simply because the medium has changed. We may not be dealing with paper, but we’re still juggling information in the form of words in visual layouts. What we have to do is distinguish between the rules which apply to typography in general, and the rules which apply to just a particular medium.

Of course sorting out the ‘best practise’ rules and guidelines to the satisfaction of both creative designers and technical gurus is quite a challenge. Few people can manage to stand in both camps, tending instead to polarise towards one set of opinions or the other. Mainstream designers may attempt site designs that are technically impractical, while code-writers are more inclined to produce technically functional but visually dysfunctional sites. This isn’t always the case, but everyone concerned with Web design should take a professional attitude to both design aesthetics and technical production.

One of the main design goals for both print and Web delivery is legibility. The precise methods for achieving this aim in each medium may be different, but the goal is the same. There are many cases where traditional rules of thumb aren’t exactly right, but aren’t exactly wrong either. Site designers mustn’t try to reproduce print-oriented approaches too literally on the screen, but equally they mustn’t dismiss design input as mere decoration which can be put off until the end of a project.

Practical Limitations...

The limitations of the Web, which are determined by the limitations of computer screens as much as by what Web browsers can and can’t do, play a big part in determining what can be done to present information effectively. Legibility of text on screens is not very good, and because displays constantly pump light out at us, they can dazzle and tire eyes much more quickly than ink on paper. These facts combine to make reading extensive amounts of text more difficult on screen than on paper.

If you’re used to thinking of serif typefaces as more suitable for body text use, take another look. When used on screen, cut serifs on classic fonts such as Times show up as club-footed blocks, breaking up the core letterforms and generally hindering rather than assisting legibility. (See for details.)

The widths of columns of text need to be considered carefully and not left to crash right across the span of browser windows. This is something generally understood in print design, but it is actually more crucial with screen-based text, where long lines can be surprisingly hard to read smoothly. On top of this, using multiple text columns in the style of magazines and newspapers should be approached with great caution. If the columns extend past the bottom of the window the user will have to scroll up and down to read the content - which means they probably just won’t.

9 point text is a fairly generous size on paper, but on screen it is about as small as you can sensibly go. This has real implications for how much text can be sensibly fitted onto a page - and these points have knock-on effects for the way text is written and edited for on-screen use.

The use of tiling background textures and images should be minimised; be very careful that a mood-setting background fill doesn’t make the foreground content difficult to read. This should be simple common sense to anyone with traditional design experience, but this kind of mistake is depressingly common in Web page design. This doesn’t mean that picking a background colour or fill is inherently wrong, but be wary of introducing too much visual noise, and don’t make the level of contrast between the text and the background get too small. (For more on rethinking established design techniques and rules see Good and Bad Practise.)

As well as understanding basic principles of design as they apply to the Web, knowing how best to control type is of vital importance.

GIF Text...

There are two main methods for showing type in Web pages, and each comes with its own set of benefits and problems. Formatted HTML text makes up the vast bulk of Web text, but graphic images of type are also important. These two forms are roughly analogous to the more traditional distinctions between body and display type.

When faced with the problem of trying to precisely recreate some typesetting the best solution is often to simply turn the work into static bitmap graphics, commonly called GIF text images. This allows text to be shown on everyone’s screen exactly as the designer intended.

Of course there are some serious drawbacks to this technique; GIF text graphics are totally inflexible so, unlike real text, the content won’t automatically flow to fit windows or around images. They also look pretty poor when printed, as they are just low-resolution images rather than real text. And if anyone needs to copy the text - perhaps it is important contact details - they can’t. And of course the site can’t be indexed by search engines without adding META tags (which are ignored by some search engines anyway).

However one of the biggest problems with using graphics for type in the relative size of the files. In Web design size really does matter; download speed is everything. Web surfers are generally a very fickle lot - if a site’s pages take too long to arrive, they’ll probably just up and leave for another site. And don’t assume this means they are cheapskates using out of date modems; if a site is particularly busy, or is simply stored on the same server or connection as a popular site, the access times for the simplest of pages can become alarmingly slow for everyone.

HTML Text...

The alternative is to use ‘live’ text, an approach which avoids all the problems inherent with GIF text work. But how well does it actually work in practise?

If you look at unformatted text in a Web page it will be shown in your Web browser’s default typeface: almost certainly good old Times New Roman. This may seem like a classic choice, but it really doesn’t work as body level text on computer displays.

Of course, you’re not stuck with this. After all, that’s what the FONT tag was invented for. This allows any font to be used in place of Times. So why not pick your favourite font, or your client’s corporate font? (Right about now all the print designers will be rubbing their hands, and the Web-savvy readers will be grinning ironically.)

The reason this doesn’t work is simple: you may have all sorts of fonts to play with on your Mac, but HTML formatting instructions simply ask the Web browser to use the specified font, if it is available on the end user’s computer. If they don’t have it, the layout will default back to Times New Roman again and you’re back to square one - except that now the layout looks worse, because it wasn’t designed with that font in mind.

There is a surprisingly simple way you can try to avoid this problem. Instead of picking one font and crossing your fingers, you can set up a whole string of typeface names. If the first isn’t available the second might be, or the third, and so on. This shotgun approach can certainly help, but it doesn’t really solve the problem, and it means resigning yourself to layout compromises.

However the biggest problem with FONT tags is their lack of serious control; they can affect the typeface, size, colour - and very little else. To gain anything approaching real control you have to move up to Cascading Style Sheets (CSS).

CSS...

In order to understand CSS formatting instructions users must have a ‘version 4’ Web browser or better. This used to be a real cause for concern, but now virtually all Web surfers use a fairly modern CSS-aware Web browser. (The usage statistics for many Websites show at most just a handful of visits from version 3 browsers.)

CSS formatting covers a range of useful controls, from specific type sizes and separate word and letter spacing (which is actually a step beyond QuarkXPress, although this isn’t handled by recent versions of Navigator) to leading and inter-paragraph spacing. It is more complex to write, but then the majority of today’s Websites are put together with tools such as Dreamweaver, Freeway or GoLive, tools which help produce complex code automatically. However even if you never write a line of CSS code yourself it is well worth understanding what it can and can’t do, so you’ll understand the limitations when considering future productions.
For a blow-by-blow of the important parts of FONT and CSS controls see .

Web-safe Fonts...

But while better formatting control is very important, all the control in the world can’t make a typeface easier to read. There are a number of fonts which can be fairly reliably chosen, fonts which will be on virtually every Internet user’s computer. But some of these are still very poor choices for on-screen use. Times is effectively universal, but as we’ve already seen it isn’t a particularly good screen font for small text. Arial (a sans serif typeface moderately similar to Helvetica) is also found on every recent Mac and PC. This is Microsoft’s default system font, used for file and directory names in Windows for many years. but although it is a favourite of many Web designers, it is actually (and surprisingly) not particularly well suited for screen use. At small sizes, around the 10 point level, the character shapes are a little awkward, and the variable internal and inter-character spacing makes it not wonderfully legible. Another unfortunately popular choice is Helvetica, the favourite of the jobbing printer. This is even worse for body text on screen, with characters clashing and merging unpleasantly.

The best solution is to use just the few fonts which remain legible at body text sizes (commonly 9, 10 and 12 points) and are found on all modern Macs and PCs. Both Verdana and Georgia are surprisingly good for this task, providing clear, legible type with all the standard style options, even when used as small as 9 point. There are a few other possibilities, but these two - one a sans serif, the other a serif - are hard to fault.
(For details see .)

If you set text at larger sizes your choices expand, as legibility increases rapidly as sizes get above 14 points or so. As long as you stick to one of the Web-safe fonts you can work with formatted text all you like, using it for anything from body text to headlines and even typography decoration. This can help designers trim all the fat off their pages by reducing or even eliminating the need for GIF text files. Of course, the more a page relies on formatted text, particularly for highly visible things such as graphic decoration, the more it relies on the end user’s Web browser interpreting the formatting markup and displaying the results as the designer intended.

Font Embedding...

If the idea of limiting yourself to the fonts found on everyone elses’ computers seems too frustrating, you’re not alone. Both Microsoft and Netscape have been working on technologies which allow fonts to be automatically downloaded to the browser when needed. Alternatively you could use Flash to embed font outlines in Flash movies. However all these ‘font embedding’ tricks don’t solve the fundamental problem of legibility, as the clearest fonts around are part of the ‘Web-safe’ set. There are many other issues with both technologies - see for details.

Bend Over Backwards...

As every experienced Web designer should know all too well, good online page design involves more than just making things look right in their preferred browser. As many viewers are likely to be using PCs, and as various versions of both Internet Explorer and Netscape Navigator are widely used, pages need to be checked in as many popular browsers as possible.

But just how far should someone go towards making their pages work across every conceivable kind of browser? Should they design to fit the lowest common denominator, ensuring that the site works on everything from the latest G4s and Pentiums down to WebTV machines and Palm devices? And what about those that like to use small monitors set to the highest possible resolution, or have large monitors set to 640x480 pixels?

While it is wise to consider the different kinds of computers and browsers people will use to see your site, the concept of total portability is often overstressed.

One of the key techniques for formatting HTML text locks it to a fixed size, neatly bypassing the problem where PC browsers prefer to show fonts significantly larger than Mac browsers. (For more details see .) However this also disables the option found in certain browser to scale text sizes up and down on the fly. Some users may complain about this, but there is a simple (although somewhat contentious) answer to this. If someone would like to see fonts larger on their screen, they need to see everything else larger as well - from menus and error messages to file and folder names - in which case they should consider changing their monitor’s resolution, not fiddling with the way a site is shown in their browser. And if a page design which works well for most people doesn’t look good on a hand-held pocket browser, this isn’t necessarily a cause for concern - it all depends on the intended audience.

If you are faced with such problems there are generally three choices you can take. You can compromise the layout to fit all possible viewers (which may mean starting from scratch and losing most design finesse), design alternative versions tailored to different requirements (which adds to design and maintenance workloads), or produce something which works well on the majority of viewers at the expense of a few (which just dodges the issue).

Conclusion...

Web design allows things which are unthinkable in print design. The simple ability to make huge masses of information easily navigable is excellent on its own, but the possibilities go much further than this. The content of pages can become interactive, responding to the user with rollovers and dynamic content, and server tricks mean pages can be customised for the end user.

Compared to print, there are many serious problems to be faced when designing for the Web. But we do avoid the frustrating print-related headaches such as colour separation problems, ink saturation woes, smudging, PostScript errors and so on.

Web design requires a broad understanding of all sorts of visual and technical issues. This doesn’t mean designers have to learn how to program or write high-level HTML by hand; the latest Web design software can do the grunt work for you as efficiently as the best human coders.

Creating clear, informative Web sites with good on-screen typography isn’t simple, but it is important. If you remember the key issues your work should become more effective, whether your background is design or coding. The Web needs people with cross-discipline skills. If you can achieve this you’ll be in demand.