Type study: Typographic hierarchy
March 17, 2011
This is part of a series of guest posts on web typography. Today’s post was written by Frank Chimero.
Workers of the web are familiar with establishing a hierarchy through markup by using tags like
<em>, but what of the aesthetics of it? On the web, a large chunk of our content is text. This means it’s important to understand how to reinforce this hierarchy typographically. A clear understanding of hierarchy results in more beautiful, meaningful, and communicative designs that better serve their audience.
I’m going to address these concepts with an example that slowly builds complexity by introducing new visual elements. With each step I’ll add a new tool to support the hierarchy. I think you’ll be surprised to learn how much of this behavior is native, and how flexible the solutions can become as more tools are added.
To begin, I’m not using any typographic devices to establish the hierarchy: it’s all one typeface in one size and weight (fig. 1). The only thing communicating hierarchy is the order in which the text is presented. This isn’t realistic for most design work, but it’s a great place to start.
Above we have the same typeface and type size, but we’ve started to introduce some clarity to the information by chunking it into logical groups (fig. 2). Again, we’re establishing hierarchy by the order in which the text is presented.
Next, let’s emphasize the most important element with a weight change (fig. 3). Notice that when we have at least two graphic devices working, we no longer need have to have our most important piece of information on top in order for it be read first. Above, “Design Lecture Series” and related text has moved to the top to serve as an umbrella for the content below: it’s descriptive meta-content that describes the whole, but it’s not the most important text.
Next, we introduce a new type size to the hierarchy (fig. 4). The increased size shows the reader where to begin reading. Varying the vertical spacing provides a bit more structure.
Now let’s add some variety by varying the alignment and spacing, and introducing multiple sizes and weights (fig. 5). The overall trend has been to increase contrast: we use tools such as weight and size to emphasize the most important content, while simultaneously employing those same devices to make the subservient content recede.
Next comes color, which we are using to guide the eye around the composition (fig. 6). Above, graphic elements (such as lines and shapes) are also added to emphasize certain blocks of content. Largely, the same rules that applied to the type also apply to these elements: color and heavier weight denote greater importance. We can also balance the composition with graphic elements by creating directional tension (pushing left versus pushing right) and by creating tension with the edge of the page by bleeding off. All together, the effect first brings your eye in, then takes it logically to nearby elements, then lets it jump to other areas by following the color around the composition.
In practice, proper typographic hierarchy surfaces at the micro-level—inside of the smaller, building-block elements of a design—and at a macro-level—the design of the full page. Let’s look at some real-world examples.
The New Yorker’s featured article carousel manages a basic micro-level hierarchy issue: imposing a structure to title, author, description, and meta content. Here, the hierarchy is established through two different typefaces and changes in size and color. Note how the meta content is placed on top even though it’s less important than the title: the hierarchy is communicated through manipulation of the size and color of the text.
On the Creative Mornings website, a simple hierarchy challenge is multiplied four times over. Clarity is added by color-coding each city, and complex information is chunked together. Inside each chunk of content, a hierarchy is established with size and weight, as well as graphic elements. The most pressing information, that of the upcoming lecture, is reversed out on a color field to give it the highest importance. Type size is also used to establish hierarchy, and a typeface change is implemented to emphasize more important information, such as the speaker name. Variable spacing is also used to deemphasize the “More Info” links below the lecture details. Pertinent information about the event organizer is given the lowest priority by being placed at the bottom with the least amount of contrast. (Although, hierarchy still exists in this block by setting the organizer’s name in bold and setting their title with a smaller, all-caps treatment.)
José Manuel Riveros’ awritings.com makes great use of hierarchy on the layout level. The two columns, as typical on the web, have widths to match their importance: dominant content in the wider column, supporting content in the narrow column. But inside each column, titles, sub-titles, metadata, and content merge with design elements such as rules to reinforce the hierarchy. Most changes between the styling of text feature only one or two modifications—such as change of size, weight, or color—but by handling these modifications in a smart fashion, the hierarchy is clear while remaining simple and pleasing.
Proper hierarchy is a foundation for excellent type, whether on the screen or the page. I’d suggest that most great examples of fine typography are merely designs that have wise typeface choices, savvy use of space, and a clear hierarchy that’s echoed through the structure and presentation of the text. Communicative, fine typography is of the utmost importance, and it is encouraging to think that by understanding a few simple precepts and their thoughtful application, clarity in communication is within anyone’s reach.