PART 1

ISSUES INVOLVED IN THE DESIGN OF WEB SITES

How to arrange text on web pages

GUNNLAUGUR SE BRIEM LETTERFORM DESIGNER CALIFORNIA

'Does your information really need every bell, whistle, and blinking light of an arcade game?'

Computer screens are not like paper: typography on the web

ARI DAVIDOW TYPOGRAPHER WHO NOW APPLIES HIS SKILLS TO THE WEB AND TO VIRTUAL COMMUNITY. ari@ivritype.com

'Given the restraints created by today's web browsers and by HTML, typography, as it is understood to relate to fonts, might seem irrelevant to the web. This is not true, although the issues and the solutions are different to those used for print.'

GUNNLAUGUR SE BRIEM

How to arrange text on web pages

ARI DAVIDOW

Computer screens are not like paper: typography on the web

To many people, typography is the art of setting beautiful words, using the fonts which best convey the meaning and context of those words. For many years, that was my own approach to the art. I learned to identify at least half a dozen variants of Garamond at 5 paces. I argued and compared settings of Haas Unica vs. Helvetica vs. Frutiger; and of old styles vs. moderns to postmodern faces and grunge, trying to best understand which faces were most appropriate in what circumstances. Finally I focused on actually setting words in the selected typefaces with the best possible spacing, paying close attention to the optical spacing and visual space between letters, between words, and of course, to line length and leading.

These are important issues. To many people, they are typography. It is important to realise, however, that to limit typography to the font, size and leading is to study the details, while missing the forest: the broader issues of communicating print to eye, and of doing so in as economical manner as possible.

What made the invention of the printing press revolutionary was not the fonts. Indeed, I am sure that many contemporaries entirely missed the beauty of those initial books, seeing only that they lacked much of the grace of handwritten manuscript. Instead, the printing press made possible the mass production of books. It opened the door to making more information accessible to more people than ever before in history, more clearly and less expensively. Yet industrialised type is not inherently readable or accessible, it is simply mass-produced. The basis for typography as I understand it is the art of ameliorating that mass production and conveying that more information less expensively, with grace. It was only after years of increasing knowledge that this began to sink in too. (The assumption that I possessed the knowledge was fairly immediate; knowing enough not to be an utter fool took longer.) Indeed, I was taught to follow specs, to identify typefaces, and to set them well: well-kerned and letterspaced as appropriate; with correctly cut small caps rather than photographic or digital imitations where necessary. I hadn't really paid attention to broader typographic issues except as specified by customers of the type shop wherein I worked.

My epiphany occurred while reading Ferdinand Baudin's How Typography Works. This handwritten book on typography first called my attention to the concept of the page. Of course, once I began to think of how letters and words sat upon a page, rather than the beauty of individual letters or words, I came to see pages entirely differently. I was bound to see web pages in terms of access and readability, rather than in tricking a screen not designed for the purpose, into displaying something derived from Simoncini Garamond 12 pt.

For example, having previously missed the critical sections in Ruari McLean's The Thames and Hudson Manual of Typography, or Geoffrey Dowding's Finer Points in the Spacing & Arrangement of Type (to pick two obvious examples), I now began paying attention to how many words were put on a line. Reading an otherwise well-formed but difficult-to-read book, I would find myself counting the numbers of characters in a series of lines. Sure enough, the move into desktop publishing has opened the field to a plethora of people who confuse visually appealing with "readable." If you consider that 10–12 words, or about 60–65 characters, are as many as the human eye will generally read comfortably in a line of text at standard leading, you will share my discomfort. An astonishing number of books now present difficult-to-muddle-through average line lengths of 80 or 100 characters. The opposite is also true. Books that are easy and comfortable to read, even when the contents are Heidegger or Calculus, seem quite approachable (well, up to a point) when the line length is shorter. There is also a lower limit. When the line length drops below about 40 characters, the length one might see in an average magazine or newspaper column, the average reader becomes impatient.

Poor selection of font, size, line length, and leading became worse when computer word processors began supporting normal type, rather than the fixed-width typewriter imitations with which they began. I found myself calling my students' attention to the fact that no major word processor has been shipped with default line width/ type size settings that bore any relationship to visual literacy. Because most early laser printers could be guaranteed to support Helvetica and Times New Roman, people began using the two faces together as though they naturally complement each other. (They don't.) The default typeface in Microsoft Word is Times 10pt, which at the default margins yields an astonishingly opaque 100 characters/line, at a leading (called "line spacing" by much current software) suitable for half that width.

Still, even I was astonished when I began exploring this fascinating new medium, the world wide web. That part of me that has always been interested in making more information available to more people, more quickly, more clearly, and less expensively, is easy to impress with text markup, even the simple markup afforded by the initial HTML specifications.

Yet, when I began to consider issues of "display", I became confused. How does one represent this information most clearly on the computer screen? I found the settings on my "Mosaic" browser for choosing typefaces and sizes. Surprisingly, there appeared to...