Hierarchy

1. Hierarchy Overview

Hierarchy is the organization of elements according to importance.

In typography, hierarchy is achieved by placement, size, color, or style. These things are going to help arrange elements in a particular hierarchy to suit the needs of particular projects and media types.

term to know

Hierarchy

The organization of elements according to importance. In typography, hierarchy is achieved by placement, size, color, or style.

2. Hierarchy in Action

Take a look at the image of a newspaper below.

When looking at this newspaper, you can get a feel for how certain elements are organized to ensure the viewer reads the paper in a particular order.

First of all, you have a headline. In layout, a headline is a main heading above a block of text.

Size and placement plays an important role in establishing this body of text as more important than anything else on the page. Here it has a nice place on top, in large type, with really good weight.

Then, you move down to the subhead. In page layout, a subhead is a heading smaller, and of lesser importance, than a headline.

The elements highlighted in the image above could both be subheads. Notice that they are both using the same typeface, which is different than the headline. This typeface doesn't hold as much weight because these headers are of lesser importance than the headline.

If you move down the page, you have a picture and a caption. In page layout, a caption is lines of descriptive text positioned under a graphic or photograph.

Below the caption, you have a paragraph rule. In page layout, paragraph rule is a term describing a line used as a graphic element and positioned within a column of text. Oftentimes, a paragraph rule will be used to start a new article or just divide ideas within an article.

All these elements together are used to build a hierarchy and provide visual cues for the reader indicating the level of importance.

terms to know

Headline

In a layout, a main heading above a block of text.

Subhead

In a page layout, a heading smaller and of lesser importance than a headline.

Caption

In page layout, lines of descriptive text positioned under a graphic or photograph.

Paragraph Rule

In page layout, a term describing a line used as a graphic element and positioned within a column of text.

3. Effects of Composition and Typography

Below are three layout examples that use the same copy, but with different compositions and typographic characteristics to help you really see how these changes can alter the hierarchy.

In the first image, the hierarchy is pretty clear.

There is a headline up top in that bolder, heavier type and then a subhead below using a different typeface that isn't as impactful as the headline.

Below that, there is a beautiful photo of the mountains, followed by the body copy. Again, the placement, size, and style of all these elements provides the viewer with a visual flow from most important to least important.

The second image has the same information, but in a different representation.

Here, the image takes center stage, with a caption below providing a bit of information as to what you're looking at.

Then comes the headline and subhead. Notice that the headline here is more condensed; there's less space between the letters. There is also a line dividing up these elements and the body copy below.

Now take a look at the third image.

The headline is back up top, with the beautiful photo and caption to break things up on the left. Then, the subhead is off to the right, leading you into the body copy.

It can be fun to look at all these different layouts to see which creates the most aesthetically pleasing visual language while providing the viewer with an easy reading experience and flow.