CalArts: Intro. to Typography-W3: 3.4 Creating Hierarchy

So far we’ve looked at how to use space to organize and structure typography. In this video, we’ll look at how a visual hierarchy can further clarify and structure our type.

A 100 years ago, the front page of a newspaper looked like this.

Today, it looks more like this.

Both layouts are cluttered กองเรี่ยราด,วิ่งวุ่นไปหมด,ยุ่งเหยิง, 
but the contemporary newspaper is much easier and more inviting to read,
and that’s mostly because this newspaper does a better job of establishing typographic hierarchy.

In the old newspaper, all of the information on the page looks similar.

The only way to read this paper is to start at the top and work your way down.

Not very convenient if you just want to get a quick sense of the days events.

By contrast in the contemporary newspaper,
 different kinds of information look different from one another.

With some kinds of information more visually prominent than others.

So we can glance at this paper and read just the headlines.

Or we can glance at the article and quickly find the page number reference.

So typographic hierarchy is the strategy of making different kinds of content look different. 
And reflecting the relative importance of different content with styling.

The key to effective typographic hierarchy is 
to make each type style look clearly distinct from the last
even when working within a limited palette of typefaces

and we can do this by deploying the stylistic variables of typeface, style, size, weight, color and setting.

As an example, let’s style these two paragraphs.

The one on the left is important text
and the one on the right is less important text.

We’ll start by changing type size.
Making the type on the left larger, and the type on the right smaller.

Then we’ll change style
We’ll make the right hand paragraph italic.

Will change color
making the less important paragraph lighter.

And then we’ll change the typeface weight
Let’s make the type on the right bold, so it’s a little more visible.

To further differentiate the two styles, 
we’ll change the leading.

We’ll make the paragraph on the left looser, and the paragraph on the right tighter.

And finally we’ll differentiate the typeface itself. 
We’ll make the type on the right a sans-serif.

Now, we have two styles that are immediately recognizable as different from one another, 
and also read us a different levels of importance. 
While still appearing somewhat cohesive because of the tight phase pairing.

If I apply this strategy to the example of the tight phase timeline from a few videos ago,

you’ll see that I can add a further level of clarity.

Now, because all of the designers names are styled in a distinct way, for instance, 
I can quickly pick out that category of information from the other content.

As with spacing, it’s hard to exaggerate the importance of well-executed hierarchy in creating typography that is inviting and can easily be accessed and parsed by a reader.