Typographic Hierarchy

One of the most important aspects of communicating with type is to establish a strong typographic hierarchy. This refers to presenting the content in a way that visually conveys where to look, and in what sequence. The styling and placement of all elements – both type and images – should guide the viewer through the content in order of importance.

This organizational system, or roadmap, is achieved through the use of both typographic and spatial elements; in combination, they create the desired effect. To begin the process, it’s essential to understand the relative importance of all components of the content – which can include headline, subhead, body text, pull quotes, listings, column headings, as well as other elements – and then design to visually reinforce this.

The following factors contribute to developing an effective typographic hierarchy:

Type style

Typeface and weight play a key role in establishing typographic hierarchy, especially for headlines and subheads. Generally speaking, bold, decorative, or more distinctive typestyles command attention and denote importance, but so can an ultra light typeface in the right setting.

Type size

The viewer’s eye is usually drawn to the largest-sized type first (which is usually, but not always, the headline), and then moves on to other elements. Although headlines most commonly appear at the top of a page, this placement is not a requirement. A well-designed composition will guide the reader to the headline and other important elements no matter where they are located.

Color

The use of color can either draw attention to or de-emphasize an element. For instance, red type on a page with mostly black text will instantly stand out, while making a less important element gray amidst black text will downplay it. Keep in mind that too much color used in too many instances can create visual confusion, which in turn undermines its effectiveness.

Case

The use of all caps in small doses can be an effective way to draw attention and denote importance, particularly for headings or subheads. On the other hand, all caps are known to have reduced readability, so using upper and lowercase is preferable for lengthy settings, including running text.

Placement and spacing

The placement of all elements, as well as the space between and around them, is part of the overall hierarchy. Keep the most important information prominent. Place all related elements together, while visually separating others to organize the content.

Alignment

How elements are aligned can imply their relative level of significance. Centering, for instance, conveys a sense of importance, and is frequently used for titles, headlines, announcements and invitations. Conversely, running body copy usually calls for less emphasis than headings and subheads, and is commonly set flush left, which is easier to read.

White space

Use white, or negative, space to create emphasis and draw attention to important elements. Resist the temptation to fill up every bit of space on a page, which can create too much “visual noise” that can confuse or fatigue the viewer.

A strong design provides visual cues to lead the viewer through the content. Good typographic hierarchy is essential to communicating the desired message and maximizing the likelihood of its being read and understood.

All trademarks are the property of their respective owners. Additional information regarding Monotype’s trademarks is available at monotype.com/legal. Fontology is a trademark of Monotype Imaging and may be registered in certain jurisdictions.

• Editor’s Note:Ilene Strizver, founder of The Type Studio, is a typographic consultant, designer and writer specializing in all aspects of typographic communication. She conducts Gourmet Typography workshops internationally. Read more about typography in her latest literary effort, Type Rules! The designer's guide to professional typography, 4th edition, published by Wiley & Sons, Inc. This article was commissioned and approved by Monotype Imaging Inc.