ROOM 101

TYPOGRAPHY is a complex and subjective graphic art that is a mystery to some, and a complete unknown to most people.

Yet, it has an effect on our everyday life. During the 1960’s, 70’s and 80’s Britain, arguably, produced the best typography in the world.

Then came the microcomputer, suddenly, the means to typeset and produce printed material was available to everybody.

Taken out of the hands of the professionals, standards plummeted as every garish combination of typeface, size, colour and clip art were crammed into any job down to nightmarish business cards needing a microscope to read the phone numbers.

With the increased training in excellent industry standard programmes such as QuarkXPress, Adobe Illustrator and PhotoShop, standards have, to some extent, clawed themselves back.
But, there is still a long way go.


Good typographic design is the manipulation of type, graphics and space to produce the best combination of legibility, readability and suitability.

Legibility is vital. Anyone viewing a printed item must be able to easily see and recognise what is in front of them.

There is no point setting a leaflet intended for the elderly, in 6 point type, or technical instructions in an ornate typeface.

Readability is subtly different, this is ensuring the message in the text comes across to the reader with the least interference.

Too many words to a line can make it difficult to pick up the start of the next line.

In English, just about the most words we can comfortably handle per line is ten (or 60 characters), before we start skipping lines and disturbing our reading flow.

Advertising, however, allows considerably more freedom and experimentation.

Even so, don't go mad. Don't use ten different typefaces on one job. Use a family, ie: one or two, at most, typefaces with the related bold, regular, light or italic in a minimum of different sizes.

Top of Page

A similar problem is found if the leading (space between lines) is too small, and to a lesser extent, too large. It depends on the typeface, but a good place to start is 20% of the point size. So, a 10pt font would have 2 pt leading, or 10pt on 12pt.

However, it may be necessary to adjust this. Typefaces with long ascenders and descenders, and a small ‘x’ height (body size), require less leading. A large ‘x’ height with short ascenders and descenders requires more leading.

The text in books is generally justified (ranged both left and right), apart from looking neat; it also helps the reader to pick up the next line.

But this advantage diminishes as the column width is reduced; large white holes start to appear as the line is forced to fit the column, check your tabloid newspaper to see how bad this can get. Newspapers do this because it is easier and faster to juggle narrow elements to fill their page.
A general rule on choice of typeface is that serif faces (Times, Century, Plantin, etc.) are more readable than sans serif (Helvetica, Univers, Arial, etc.).

Reach for any novel on your bookshelf, and you will find that it will fit, within reason, the above guides.

One of the first choices that will need to be made is: Which typeface (also called font)?

Each typeface has its own characteristics, and this is where it gets subjective, the designer must use their experience and judgement to make a selection that fits in with the subject in the text. It tends to rely on gut feeling, rather than science.

This affinity of typeface with subject or product applies more to advertising and leaflets than to book design.

In book design, the main criterion is the uninterrupted flow of information to the reader. Therefore subtly is the watch word.

Top of Page

Although the basic rules of typography are much the same for both Web pages and conventional print documents, type on-screen and type printed on paper are different in crucial ways.

The computer screen renders typefaces at a much lower resolution than is found in books, magazines, and even pages output from inexpensive printers.

Most magazine and book typography is rendered at 1200 dots per inch (dpi) or greater, whereas computer screens rarely show more than about 85 dpi.

Also, the useable area of typical computer screens is smaller than most magazine and book pages, limiting the information you can deliver on a Web page without scrolling.

But perhaps the most distinctive characteristic of Web typography is its variability. Web pages are built on the fly each time they are loaded into a Web browser. Each line of text, each headline, each unique font and type style is re-created by a complex interaction of the Web browser, the Web server, and the operating system of the reader's computer.

The process is fraught with possibilities for the unexpected: a missing font, an out-of-date browser, or a peculiar set of font preferences designated by the reader. You should regard your Web page layouts and typography as suggestions of how your pages should be rendered — you'll never know exactly how they will look on the reader's screen.

Top of Page

The originators of HTML were scientists who wanted a standard means to share particle physics documents. They had little interest in the exact visual form of the document as seen on the computer screen. In fact, HTML was designed to enforce a clean separation of content structure and graphic design.

The intent was to create a World Wide Web of pages that will display in every system and browser available, including browsers that "read" Web page text to visually impaired users and can be accurately interpreted by automated search and analysis engines.

In casting aside the graphic design and editorial management traditions of publishing, the original designers of the Web ignored human motivation.

They were so concerned about making Web documents machine-friendly that they produced documents that only machines (or particle physicists) would want to read. In focusing solely on the structural logic of documents they ignored the need for the visual logic of sophisticated graphic design and typography.

For example, most graphic designers avoid using the standard heading tags in HTML (H1, H2, and so on) because they lack subtlety: in most Web browsers these tags make headlines look absurdly large (H1, H2) or ridiculously small (H4, H5, H6). But the header tags in HTML were not created with graphic design in mind.

Their sole purpose is to designate a hierarchy of headline importance, so that both human readers and automated search engines can look at a document and easily determine its information structure.

Only incidentally did browser designers create a visual hierarchy for HTML headers by assigning different type sizes and levels of boldness to each header element.

Top of Page

Good typography depends on the visual contrast between one font and another and between text blocks, headlines, and the surrounding "white" space.

Nothing attracts the eye and brain of the reader like strong contrast and distinctive patterns, and you can achieve those attributes only by carefully designing them into your pages.

If you cram every page with dense text, readers see a wall of gray and will instinctively reject the lack of visual contrast.

Just making things uniformly bigger doesn’t help. Even bold fonts quickly become monotonous, because if everything is bold then nothing stands out “boldly.”

When your content is primarily text, typography is the tool you use to “paint” patterns of organization on the page.

The first thing the reader sees is not the title or other details on the page but the overall pattern and contrast of the page.

The regular, repeating patterns established through carefully organized pages of text and graphics help the reader to establish the location and organization of your information and increase legibility.

Top of Page

Margins define the reading area of your page by separating the main text from the surrounding environment. Margins provide important visual relief in any document, but careful design of margins and other "white space" is particularly important in Web page design because Web content must coexist on the computer screen with the interface elements of the browser itself and with other windows, menus, and icons of the user interface.
Margins and space can be used to delineate the main text from the other page elements. And when used consistently, margins provide unity throughout a site by creating a consistent structure and look to the site pages.

They also add visual interest by contrasting the positive space of the screen (text, graphics) from the negative (white) space. Text blocks have different ways of sitting within margins. Left-justified, centered, right-justified, and justified text are the alignment options available on the Web.

Justified text
is set flush with the left and right margins. Justified blocks of text create solid rectangles, and block headings are normally centered for a symmetrical, formal-looking document.

In print, justification is achieved by adjusting the space between words and by using word hyphenation. Page layout programs use a hyphenation dictionary to check for and apply hyphenation at each line's end and then adjust word spacing throughout the line. But even with sophisticated page layout software, justified text blocks often suffer from poor spacing and excessive hyphenation and require manual refinement.

This level of control is not even a remote possibility on Web pages. The most recent browser versions (and CSS) support justified text, but it is achieved by crude adjustments to word spacing.

Fine adjustments are not possible on low-resolution computer displays and are impractical to implement in today's Web browsers. Also, Web browsers are unlikely to offer automatic hyphenation any time soon, another "must" for properly justified text.

For the foreseeable future, the legibility of your Web documents will suffer if you set your text in justified format.

Centered and right-justified text blocks are difficult to read. We read from left to right, anchoring our tracking across the page at the vertical line of the left margin. The ragged left margins produced by centering or right-justifying text make that scanning much harder, because your eye needs to search for the beginning of each new line.

Left-justified text is the most legible option for Web pages because the left margin is even and predictable and the right margin is irregular. Unlike justified text, left justification requires no adjustment to word spacing; the inequities in spacing fall at the end of the lines.

The resulting "ragged" right margin adds variety and interest to the page without interfering with legibility.
Titles and headings over left-justified body text should also be flush left. Centered display type contrasts with the asymmetry of the ragged right margin of left-justified body text and produces an unbalanced page.

Top of Page

Text on the computer screen is hard to read not only because of the low resolution of computer screens but also because the layout of most Web pages violates a fundamental rule of book and magazine typography: the lines of text on most Web pages are far too long for easy reading. Magazine and book columns are narrow for physiological reasons: at normal reading distances the eye's span of acute focus is only about three inches wide, so designers try to keep dense passages of text in columns not much wider than that comfortable eye span. Wider lines of text require readers to move their heads slightly or strain their eye muscles to track over the long lines of text. Readability suffers because on the long trip back to the left margin the reader may lose track of the next line.

You can use invisible tables (BORDER="0") to restrict the text line length to about fifty to seventy characters per line. The exact character count is difficult to predict because of the way different browser software and operating systems display type sizes. In conventional print layouts, columns of thirty to forty characters per line are considered ideal.

In the end, the decision to restrict line length is a philosophical one. From a design standpoint, a measure that is comfortable for reading is good practice. One of the fundamental principles of the Web, however, is that users should be able to structure their own view. Users with a large monitor may not want their text blocks circumscribed if it means that a large portion of their screen goes unused.

A low-vision user with fonts set large will not appreciate being forced to view long pages with short lines of text. So although leaving text free to fill the browser window may affect readability, following conventions may also affect the accessibility and legibility of your documents.

Top of Page

Web safe typefaces

Each typeface has a unique tone that should produce a harmonious fit between the verbal and visual flow of your content. With the first versions of HTML, Web authors had no control over typefaces ("fonts" in personal computer terminology). Fonts were set by the browser, so pages were viewed in whatever font the user specified in his or her browser preferences. The more recent versions of HTML and CSS allow designers to specify the typeface. This is useful not only for aesthetic reasons but also because of the differing dimensions of typefaces. A layout that is carefully designed using one face may not format correctly in another.

In specifying typefaces you should choose from the resident default fonts for most operating systems. If you specify a font that is not on the user's machine, the browser will display your pages using the user-specified default font. Bear in mind, too, that users can set their browser preferences to ignore font tags and display all pages using their designated default font.

Legibility on screen Some typefaces are more legible than others on the screen. A traditional typeface such as Times Roman is considered to be one of the most legible on paper, but at screen resolution its size is too small and its shapes look irregular. Screen legibility is most influenced by the x-height (the height of a lowercase "x") and the overall size of the typeface.

Adapted traditional typefaces
Times New Roman is a good example of a traditional typeface that has been adapted for use on computer screens. A serif typeface like Times New Roman (the default text face in most Web browsers) is about average in legibility on the computer screen, with a moderate x-height. Times New Roman is a good font to use in text-heavy documents that will probably be printed by readers rather than read from the screen. The compact letter size of Times New Roman also makes it a good choice if you need to pack a lot of words into a small space.

Designed for the screen Typefaces such as Georgia and Verdana were designed specifically for legibility on the computer screen; they have exaggerated x-heights and are very large compared to more traditional typefaces in the same point size. These fonts offer excellent legibility for Web pages designed to be read directly from the screen. However, the exaggerated x-heights and heavy letterforms of these fonts look massive and clumsy when transferred to the high-resolution medium of paper.

Specifying typefaces The early versions of HTML did not allow designers to specify a typeface for Web documents. With version 3.2 came several new tags aimed at giving designers more control over the visual properties of elements, among them the FONT tag.

Many of these have been "deprecated" by the World Wide Web Consortium, which means that they may be dropped from future versions of HTML. Although the added tags enable designers to create more elegant-looking pages, they also result in cumbersome code that is difficult to adapt and maintain. You can still use the FONT tag to set the type in your documents, but a better approach is to consolidate text formatting in style sheets.

You can specify any typeface for your Web pages, but many computers have only the default operating system fonts installed. If the typeface you specify is not available on the user's computer, the browser will switch to the default font (generally "Times New Roman" or "Times"). To increase the chances that the reader will see a typeface you are happy with, you can specify multiple fonts. The browser will check for the presence of each font (in the order given), so you can specify three or four alternates before the browser applies the default font, for example, "Verdana, Geneva, Arial, Helvetica." As a last-ditch effort you can end your font declaration with a generic font designation such as "sans serif." That way, if the browser cannot find any of the listed fonts, it will display the text in any available sans serif font.

Top of Page
. . . . .