One of the most important techniques for effectively communicating content is the use of typographic hierarchy. Typographic hierarchy is a system for organizing type that establishes an order of importance within the data, allowing the reader to easily find what they are looking for and navigate the content. It helps guide the reader's eye to where a section begins and ends, whilst enabling the user to isolate certain information based on the consistent use of style throughout a body of text.
Typography exists to honor content.
- Robert Bringhurst: The Elements of Typographic Style
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.
Designing with type often begins with unformatted text.
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.
Once the hierarchy of content is determined, typestyles are chosen; type sizes can be modified; and position -- both in terms of text alignment and line spacing -- start to be adjusted to separate the various elements.
COLOUR
The use of colour 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 colour 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.
The byline is set in all caps, as weights and type sizes are fine tuned to reinforce the hierarchy.
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.
The byline is set in all caps, as weights and type sizes are fine tuned to reinforce the hierarchy.
ALIGNMENT
How elements are aligned can imply their relative level of insignificance. 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.
Excerpts from:
Resources: