White Paper: From DTP to the Web

An overview of transferring print-based design skills to the Web

An overview of transferring print-based design skills to the Web

Visual contrast and page design

Good typography depends on the visual contrast between one font and another, and the contrast between text blocks and the surrounding empty space. Nothing attracts the eye and brain of the viewer like strong contrast and distinctive patterns, and you only get those attributes by carefully designing them into your pages. If you make everything bold, then nothing stands out and you end up looking as if you are SHOUTING at your readers. If you cram every page with dense text, readers see a wall of grey and their brains will instinctively reject the lack of visual contrast. Just making things uniformly bigger doesn't help at all. Even boldface fonts become monotonous very quickly, because if everything is bold then nothing stands out "boldly".

Use the major HTML headings sparingly. One alternative to overly bold HTML headers is to use the physical style controls of HTML to make text bold or italic without increasing the font size. However, you should understand that there are some disadvantages to using physical styles to control the typography of your web pages. The HTML heading tags (H1, H2) are designed to identify important titles and subtitles in your text and are only, incidentally, meant to change the visual display of the titles. If you use the "FONT SIZE" tags in Netscape and use physical styles like "BOLD", then automatic indexing and text analysis programs will have a difficult time analysing your web documents.

Visual logic versus structural logic

The framers of the original HTML standards were scientists who wanted a standard means to share documents with minimal mark-ups aimed at revealing the logical structure of the information. Since they had little interest in the exact visual form of the document, no precise typography and page formatting is possible in current implementations of HTML. In focusing solely on the structural logic of the HTML document, the framers of the Web ignored the need for the visual logic of sophisticated graphic design and typography. The standard organisation responsible for codifying the HTML language is responding to widespread complaints of graphic designers that the heading tags in web documents often produce clunky, over-large titles and subtitles. Through style sheets and new font control tags, future versions of HTML will soon allow you to specify what size font each header level will produce in each web page. Thus, you will be able to produce more sophisticated typography without giving up the substantial advantages of using the conventional HTML header tags.

Type and legibility

We read primarily by recognising the overall shape of words, not by parsing each letter and then assembling a recognisable word. Avoid all-uppercase headlines. They are much harder to read because words formed with capital letters are monotonous rectangles that offer few distinctive shapes to catch the reader's eye.

Legibility depends on the tops of words

Your choice of uppercase or lowercase letters can have a dramatic effect on legibility. In general, use downstyle (capitalise only the first word and any proper nouns) for your headlines and subheads. Downstyle headlines are more legible, because we primarily scan the tops of words as we read.

If you use initial capital letters in your headlines you disrupt the reader's scanning of the word forms.

Pattern and page design

When your content is mostly text, typography is the tool you use to "paint" patterns of organisation on the page. The first thing your reader sees is not the title or other details of the page, but the overall pattern and contrast of the page. The reader's eye scans the page first as a purely graphic pattern, then begins to track and decode type and page elements. The regular, repeating patterns established through carefully organised pages of text and graphics help the reader to quickly establish the location and organisation of your information and increase the overall legibility of your pages. Patchy, heterogeneous typography and text headers make it difficult for the user to see major patterns quickly, and makes it almost impossible for the user to quickly predict where information is likely to be located in unfamiliar documents.

Settle on as few heading styles and subtitles as are necessary to organise your content. Then use your chosen styles consistently. The fact that HTML provides six levels of headings doesn't mean that you should ever use all six levels of headings in a single page.

Manipulating text blocks

Text on the computer screen is hard to read not only because of the low resolution of today's computer screens, but also because the layout of most web pages violates one of the most basic rules in book and magazine typography; the lines of text in most web pages are too long to be easily read.

Magazine and book columns are narrow for physiological reasons. At normal reading distances the eye's span of movement is only about 8cm (3in) wide, so designers try to keep dense passages of text in columns no wider than reader's comfortable eye span. Wider lines of text require the readers to move their heads slightly or strain their eye muscles to track over the long lines of text. Unfortunately, most web pages are almost twice as wide as the viewer's eye span, so extra effort is required to scan through those long lines of text. If you want to encourage your website users to actually read a document online (as opposed to printing it out for reading later), consider using the "BLOCKQUOTE" or "PRE" HTML tags to shorten the line length of text blocks to about half the normal width of the web page.

The exact character count is difficult to predict because of the way different browser software and different operating systems display type sizes. In conventional print layout, columns of 30 to 40 characters per line are considered ideal, but this seems too sparse to our eyes for web page layout.

Rachel Hodgkins

This was first published in September 1999



Enjoy the benefits of CW+ membership, learn more and join.

Read more



Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to: