The Smashing Book – Typography: Rules, Guidelines and Common Mistake (part 2 of 4)

• By The Smashing Editorial
• October 5th, 2011
• 0 Comments

← Typography: Rules and Common Mistakes (1/4)TOCTypography: Rules and Common Mistakes (3/4) →

White Space Is Good Space

The importance of white space in Web typography can hardly be underestimated. Empty space makes it possible for the body copy to breathe and helps the reader absorb the information being conveyed. White space, also called “negative space”, is the space between elements in a composition, or the portions of a design that are left unmarked: the space between graphics, margins, gutters and columns (macro white space), as well as between lines of text, words and image captions (micro white space). Of course, white space doesn’t have to be white – the term comes from the graphic print design field, where white paper is usually used.

The white space that leads a reader from one element to another, organizes the composition and helps structure information is called “active white space”. White space that regulates a block of text as a unit is called “passive white space”.

In practice, many legibility issues and usability problems can be resolved or at least mitigated by a judicious, balanced use of white space. Just a couple of extra pixels of gutter, padding, margin, measure or leading can have a huge impact on the overall legibility of content. Furthermore, indenting quotes, images and lists not only can enhance the layout’s structure and presentation but can lend your design more dynamism and expressiveness.

The attention to typographic detail, in particular the white space, on Elliot Jay Stocks’ portfolio is remarkable. Notice the balanced use of active white space to emphasize the block quote and the passive white space in the paragraph.

Without a good balance between the content and empty space surrounding it, text is more difficult to read and scan, leaving readers frustrated and unsure of your message. This is especially true on the Web, where many designers fill in the space “above the fold” in an attempt to grab the user’s attention. These websites as a result become cluttered and hardly usable, which certainly could not have been the ultimate goal of the designers. From the user’s perspective, white space provides the cues and anchors that contribute to an intuitive, pleasurable reading experience.

On ClapClap’s portfolio website, white space dominates. It highlights the quality of the products shown and gives them more prominence and personality.

Some designers claim that a design can never have too much white space. This is not always the case, as the consistency and cohesion of text blocks is necessary for a balanced composition. Balancing positive (or non-white) and negative space is key to creating a beautiful, harmonized and aesthetically pleasing composition. As Mark Boulton states in one of his articles ¹, “once you know how to design and manipulate the space outside, inside, and around your content, you’ll be able to give your readers a head start, position products more precisely, and perhaps even begin to see your own content in a new light”.

Typography and Grids

A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. When used properly, the grid can serve as an armature on which a designer can organize text and images in a rational, intuitive, natural manner. It is an invisible soul that gives rhythm, order and coherence and is often used by designers to better anticipate where information should be placed, to rationalize the creative momentum. Grids are also often used in situations when graphic elements must be combined in a rapid and orderly way. At its core, the grid is the most vivid manifestation of the will to order in graphic design.

Blueprint is one of many CSS frameworks that make it easier for designers to develop web-sites using grids. Alternatives are Typogridphy (based on 960.gs), YUI Grids and YAML.

Instead of relying on intuition to determine where design elements or text could be placed, grids allow for a precise mathematical positioning of elements within a rigid two-dimensional structure, answering the question of where design elements or text should be placed. Grids, most Web designers claim, come as a priori, before the content. The challenge is to find the right balance between the grid on which the content will be built and the main characteristics of the content. Some say grids stifle creativity, while others see them as a powerful framework that pushes designers towards perfectionism and precise, accurate designs.

When developing grid-based designs, designers usually start with a blank canvas or blank sheet of paper. Searching for an appropriate grid, they then use general composition rules and formulas (such as the Golden Ratio, Rules of Thirds, etc.) to subdivide the paper sheet into harmonic sections and choose inherently satisfying page and column proportions. Finally, they experiment with margins to create a perfect, dynamic typographic structure. What remains then is to flesh out the structure with content, restricting design decisions to the strict rules embodied in the grid.

Applying divine proportion to the composition of a layout.

Interestingly enough, as Mark Boulton states in his article Five simple steps to designing grid systems ², “such an approach suggests that things which are designed to be beautiful are inherently more usable as a result” (also known as the Aesthetic Usability Effect). A balanced composition is naturally more aesthetically pleasing and so more usable and conducive to communication between you and your readers.

The Golden Ratio is probably one of the most popular means of laying out a grid. To comfort your visitors with a pleasing and intuitive composition, consider using when subdividing the paper sheet. Golden Ratio is the proportion of 1.618033988749895 ˜ 1.618 that holds between objects placed in relation to each other. It’s also called the Fibonacci sequence. The power of this ratio is that it can be found almost everywhere in the universe.

Consider the above example. You would like to create a fixed-width layout. The width of your layout is 960 pixels. You want a large block for your content <content> and a smaller block for your sidebar <aside>. How do you calculate the widths of your columns?

• First, calculate the width of your <content> block. Make sure the ratio between this block and the layout’s overall width is 1.62. Hence, you divide 960px by 1.62, which equals approximately 593px.
• Subtract 593px from the layout’s overall width (960px) and you get 960px – 593px = 367px.
• Now, if you calculate the ratio between the <content> block and the <aside> block (593px : 367px ˜ 1.615) and the ratio between the container’s width and the content block’s width (960px : 593px ˜ 1.618), you will have found more or less the same ratio.

With and without grids: a beautiful grid-based design, with a focus on typography; created by Mark Boulton and Khoi Vinh for the presentation “Grids are Good” (http://www.subtraction.com/2007/03/18/oh-yeeaahh)

This is the whole idea behind the Golden Ratio. The same holds true for fluid and elastic layouts, too.

Of course, you do not have to follow the Golden Ratio. What counts in the end is the result, which should be a consistent, coherent structure. The Golden Ratio is just one way to achieve it. Another option is fluid grid layouts, which are discussed in the chapter on layouts.

Vertical Rhythm

As the typographer Robert Bringhurst once said, “space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities”. In music, a regular use of time is rhythm; in typography and Web design, a regular use of space leads us to grid theory and to vertical rhythm. Just as harmony in music can be achieved only in certain proportional time intervals, harmony in typography can be achieved only in certain proportional space intervals.

Vertical rhythm in Wilson Miner’s article “Setting Type on the Web to a Baseline Grid”.³

To understand the concept of vertical rhythm, imagine a classic exercise book with lined sheets of paper. The lines (also called baselines) are spaced equidistant from each other. If the text “sits” perfectly on the baselines, meaning that the baseline of every row of text perfectly meets the baseline of the row it is placed on, then one could say the design has a consistent vertical balance. This applies not only to the main content, but to headings, footnotes and marginal notes. Now, if you put the lined sheet of paper beneath your layout and use it as an invisible style guide to set text, you achieve vertical rhythm in your layout. Obviously, text set to a vertical rhythm is easier to scan and read because intuitively it seems to be “sitting” in the right place. ³

A key for maintaining vertical rhythm is leading or, put differently, the distance between two baselines. In CSS, the line-height property basically sets up the grid in the entire flow of text, giving invisible hints to readers so that they can follow a smooth regular path. Because vertical rhythm relates to the font size of text, using relative em values for the line height is natural. A nice side-effect is that the balance of the page layout is manifested in the design, regardless of the font size, style or family used.

To maintain vertical rhythm in CSS, the spacing between elements and line spacing need to equal the size of the baseline grid. For example, if you are using an 18-pixel baseline grid, meaning that there are 18 pixels between every pair of baselines, then the line spacing should be set to 18 pixels as well. And the spacing between each paragraph should also be set to 18 pixels. Here is an example:

body {
font-family: Arial, sans-serif;
font-size: 0.625em;
/* The font-size is now 0.625 * 16px = 10px. */
line-height: 1.8em;
/* The leading is now 18 pixels. */
}

For instance, if you wanted to separate paragraphs with an empty line, you would need to define an appropriate margin that is (of course) as tall as the baseline; otherwise, the paragraph would not sit in the right place:

 p {margin-bottom: 1.5em; } 

Of course, you can experiment with vertical space to enhance page dynamics and make the text flow less predictable. However, every variation should be defined with vertical rhythm in mind and be based on leading. Also, other text elements (headings, footnotes, images, image captions, etc.) should always relate to the basic leading with the multiplied factor, defined by the line height’s value. This relation can be expressed in the following formula:

basic line-height ÷ heading font size = heading line height

Notice that creating a background image with your grid lines to be used during development can be a big help. In practice, vertical rhythm is not always possible, in particular when dealing with many images of various sizes; however, it’s still an admirable goal, and getting most of the way there will still be a dramatic improvement to your page.

Traditional typographic scale.

Hierarchy and Scale

Every typographic layout needs hierarchy. At its core, hierarchy supports legibility by providing clear visual clues about the structure and organization of the text. Hierarchy defines how content is to be read through. It shows the user where to start reading and where to break. It differentiates headers from body text. Although text box color can be used to give headers and body text contrast, hierarchy shows the difference in size between these elements. Hierarchy plays a huge part in making a layout scannable and is an important technique for making Web typography readable.

As Jeff Croft states in his presentation “Elegant Web Typography”, traditionally-set type is composed with a scale. It’s useful to understand that the relationships between different sizes of type within a composition are meaningful. To achieve good hierarchy in your type setting, always compose with a scale, whether it’s the traditional scale

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72

or one you thoughtfully created on your own. A scale creates harmony and cohesion in the text. Alternatively, some designers prefer to use one of the Fibonacci sequences (e.g. 16 – 24 – 40 – 64 – 104) when defining the font size of headings and body copy ⁴.

An example of a simple typographic scale defined in CSS would be as follows:

body {
font-size: 0.625em;
/* Because the browser’s default font size is 16 pixels, we have now reduced the body font size to 10 pixels, which is easier for calculations. */
}
p { font-size: 1.4em; /* 14px */ }
h1 { font-size: 4.8em; /* 48px */ }
h2 { font-size: 3.6em; /* 36px */ }
h3 { font-size: 2.4em; /* 24px */ }
h4 { font-size: 2.1em; /* 21px */ } 
h5 { font-size: 1.8em; /* 18px */ }
h6 { font-size: 1.6em; /* 16px */ }

AIGA achieves a beautiful, clean and intuitive hierarchy through a subtle use of color, font size and leading.

Of course, to create a proper typographic hierarchy in your design, you don’t have to restrict yourself to working with font size alone; you can use color, letter style (e.g. drop caps, capitals, small-caps), italics and other options to cue readers to the structure of the content and relative weight of the text blocks on the page (see screenshot of AIGA’s website above).

Paragraph Styling

Paragraphs are punctuation, the punctuation of ideas. Typographers use such layout techniques as single-line boundaries, indents, pilcrows or other ornaments, outdents and versals (e.g. drop-caps) to punctuate paragraphs in a stream of discourse.

The single-line boundary is the most common paragraph delimiter used on the Web today and the most common browser default style. Generally, the indent is still the most prevalent paragraph delimiter in printed books and publications. In some ways, the block and indent conventions exemplify the divide between Web and print. Printing cost is still a consideration, but on the Web that cost is no longer a factor. After all, usability is the only standard by which Web typography is measured.

If you use the indent, convention suggests that paragraphs that follow a heading or sub-heading should not be indented. Tradition also suggests there should be no indent following elements such as lists and block quotes. You can achieve this without extraneous markup using adjacent sibling selectors. For example, if you have already set an indent on your paragraphs…

h1 + p, h2 + p, h3 + p { text-indent: 0; }

The caveat is that this should be done only if the block quotes and indents are set flush left with hanging punctuation. Robert Bringhurst suggests, “if your paragraph indent is modest, you may for consistency’s sake want to use the same indent for quotations”. The same could be said of lists on the Web. In both cases, a boundary is required to separate the list or block quote from the surrounding paragraphs.

All browsers support basic paragraph styles well. However, complex treatment of versals and openings can be problematic. Some browsers still do not have mature support for such techniques as pseudo-elements and adjacent sibling selectors. The developer’s ability to specify fonts for body copy is also limited, and inconsistent rendering across platforms and browsers persistently frustrates creativity and precision.

In the article The Paragraph in Web Typography and Design ⁵ Jon Tan explores other styling techniques and presents CSS code snippets that you can apply in your designs.

—

1. A List Apart: Whitespace (Mark Boulton)
2. Mark Boulton: Simple Steps To Designing Grids
3. A List Apart: Setting Type on the Web to a Baseline Grid (Wilson Miner)
4. The Fibonacci sequence is a spiral of increase where the sum of each pair creates the next ascending number in the series: 16 + 24 = 40; 24 + 40 = 64 etc. Because Fibonacci sequences help designers to achieve the Divine proportion, they are often applied for a more aesthetically pleasing design and composition.
5. Jon Tan: 12 Examples of Paragraph Typography

← Typography: Rules and Common Mistakes (1/4)TOCTypography: Rules and Common Mistakes (3/4) →