You are here: Resources --> 2008 --> Much ado about nothing. Part 2: Deconstructing a page
Vous êtes ici : Ressources --> 2008 --> Much ado about nothing. Part 2: Deconstructing a page

Much ado about nothing. Part 2: Deconstructing a page

by Geoff Hart

Previously published as: Hart, G. 2008. Much ado about nothing, part 2: deconstructing a page. Intercom May 2008:38–39

In my previous article, I used the gestalt concept of figure–ground relationships to define how white space separates information from its background. When page design is one of our major responsibilities, it's important to understand how these concepts govern page design. Here, I'll start with higher-level components of the page such as columns and paragraphs. In subsequent articles, I'll move on to how white space can be used to guide the eye, and how white space determines many of the typographic rules of thumb that we use.

In the context of page design, the goal of using white space is to break the page into discrete, easily recognizable chunks that define units of information, each with its own function.

Text, non-text, and context

Glance quickly at any well-designed page, then look away, and you'll have noticed the largest components of the page: the white space that forms the margins, the text space that forms the content, and in multi-column layouts, the gutter that separates the columns. In the instant we run our eyes across the page, we recognize each of these components even before we begin processing the information and recognizing it as text. Pin a page of text to the wall, walk across the room, and even though you can no longer read the text, you can still discern the structure of the page (columns of text, headings, and paragraphs), and if it contains graphics, you'll easily detect the sections that are graphical rather than textual (Figure 1).

Figure 1. What we see in our first glance at a page.

Margins and gutters prevent the text from running off the page and into your lap, but also serve a less obvious purpose: they're the white space that defines the beginnings and ends of the text and that separates text from non-text and defines the context (i.e., "read here, don't read there"). Margins guide the eye by defining how far to the left our eyes should jump when we seek the beginning of the next line, and when to stop scanning towards the right and return to the left margin again. Gutters serve the same role for adjacent columns. To be effective, the gutter must be sufficiently larger than the typical space between words that it clearly represents a right margin for the text in the left column and a left margin for text in the right column, not just another space between words. An advantage of fully justified type (as in Figure 1) is that it makes this distinction unmistakable. (We'll discuss the disadvantages in a future article.) Where space is tight and margins are shrunk as small as possible, as in some newspapers and magazines, a vertical rule running down the center of the gutter reinforces the visual separation between columns.

Identifying sections

As we complete the visual processing that began with our initial glance at the page, we begin actively processing some visual information as text. The next thing we notice is that the text is broken into sections. Headings provide the necessary clues because traditionally, they are larger and bolder than the surrounding text and have more white space surrounding them. Headings can also have a different color (thereby reinforcing the contrast with the text), a different position (e.g., shifted partially or wholly into the margin), or a different graphical treatment (e.g., underlining, boxing, or shading).

White space then provides the necessary clues: using smaller amounts of space groups items that belong together, whereas larger amounts of space separate things that are independent. For example, the two clearly defined columns of type are visible as separate units because the gutter between them is more prominent than the white space within them. This tells us we should be reading within one column at a time, not skipping across the gutter to continue reading. This is also why the space between a heading and the text that precedes it is typically greater than the space that follows the heading; the closer proximity implies a closer relationship, thus sending the message that the two blocks of text belong together, and not with the preceding text.

Similarly, graphics such as the square at the bottom right in Figure 1 stand out both because they have a different visual texture than the surrounding text (here, indicated by the solid grey expanse) and because they are separated from the surrounding text by more space than exists between the lines of text. In addition, the position of a caption below the graphic (rather than above) clearly separates it from the text that precedes the graphic and ties it to the graphic so that the two function as a unit. In other designs, we might also see bounding boxes drawn around images or sidebars to mark them even more strongly as independent units. (For the Web version of this article, I've added simple horizontal rules to accomplish this purpose.)

Identifying paragraphs

Within each unit of text, the next level of the page's structure emerges: individual paragraphs. As in the previous examples, white space again comes into play. The spacing of the lines within a paragraph is consistent, and typically differs from than the space surrounding headings, indicating that the lines of the paragraph belong together and are not part of the heading. Adjacent paragraphs can be distinguished in two main ways. In the space-efficient style shown in Figure 1, the space between paragraphs is identical to the space between lines within a paragraph, so an additional clue is needed to mark the beginning of a new paragraph. Here, that purpose is served by indenting the first line of the paragraph. (I've deliberately run the last line of each paragraph to the right margin to make this initial white space more visually apparent.) In the absence of this indent, there is no visual clue of the existence of a new paragraph whenever the last line of the previous paragraph reaches the right margin of the column.

In more open layouts, such as the example shown in Figure 2, paragraphs are separated by a blank line, and have a more realistic range of lengths in the final line of each paragraph. Here, the additional white space between the paragraphs serves the same role as indentation, and thus replaces the indentation. You won't usually see first-line indentation in this kind of page layout simply because it's unnecessary, but it would also give the page something of an untidy appearance. The visual distinctiveness of headings is why you often see "first paragraph" styles with no first-line indent immediately after a heading, even when all other paragraphs have these indents: the indentation would be redundant in that first paragraph.

Figure 2. Inserting white space between paragraphs to reinforce the separation between paragraphs.

With first-line indentations, the white space created by the indentation must be large enough to clearly mark the start of the paragraph; typically, at least one-quarter inch is used, with larger indents for larger type. With blank lines between unindented paragraphs, the vertical extent of the white space must be larger than the line spacing within the paragraph so that the two paragraphs don't run together. Thus, the spacing is commonly equal to some multiple of the line spacing (the leading), or is a single blank line in word processors that define spacing based on numbers of lines.

Which technique is more effective? Neither. Where space is tight and the goal is to pack words densely on the page, often with the goal or reducing printing costs, designers usually choose indented paragraphs with no space between them; this is the kind of layout you'll see in newspapers or novels, for instance. Where space is less of an issue, as in online information, you'll often see blank lines used instead because "they don't cost anything to print" and make the screen look less dense with text, and thus less intimidating. But even in print, blank lines between paragraphs may be justified for some audiences. For example, in one book I designed, a quick and unscientific poll to compare layouts revealed that most older readers had problems with the dense columns of type created using indented paragraphs with no space between them, but most younger readers found the design with blank lines visually distracting; they preferred the denser text. Because the target audience was more similar to the older readers, we erred on the side of caution and chose the design with blank lines, trading space efficiency for improved ease of use.

Note that I have reported this finding solely to provide an example of design tradeoffs, not to propose universal design guidelines. The importance of the principles discussed in this article is that once you understand them, you can use them to consciously design pages to support the way that readers read.

©2004–2024 Geoffrey Hart. All rights reserved.