Counterpart and Counterpoint in Typographic Hierarchy

Visual design is an information delivery system and the smoother that delivery, the better the design. One of the strongest tools we have to facilitate information deliver is hierarchy. Visual hierarchy helps ensure that your most important information is seen first and that viewers are able to take in the amount of information they want quickly and easily.

I’ve written about visual hierarchy in the past, but because of it’s importance in design, thought the topic worth exploring again. Today I want to keep the focus on typographic hierarchy, though we’ll certainly pass through some general ideas of hierarchy along the way.

Typographic Hierarchy

If everything is equal, nothing stands out. Visual hierarchy is the arrangement of design elements into some order (ranking, sequence) of relative importance. As designers we must consider the relative importance of our design elements to the overall message, to our readers and viewers, and to the environment which is delivering our message.

The main way we create hierarchy is through similarity and contrast. When elements share similarity they have equality in the hierarchy. When elements contrast they take on dominant and subordinate roles. In general bigger and darker means more important, while smaller and lighter means less important.

Every hierarchy will have a most important level, a least important level, and everything else will fall in between. We can only subdivide that everything in between, but trying to further divide it leads to less contrast between different elements, which can muddy their difference in the hierarchy.

For elements to be seen as different the contrast needs to be large enough.

3 levels of hierarchy is generally al you need. That’s not to say you can’t have more than 3 levels, but you need provide enough contrast to make clear the hierarchy. The more levels the harder that will be.

With 3 levels of typographic hierarchy we’ll have a:

• Primary level: The goal here is to lead the reader in and toward secondary type. This is usually your main page heading. Only tell part of the story in your primary level, but make it the most intriguing part of the story.
• Secondary level: The goal here is to lead reader even further in toward more detailed information. Your secondary type includes subheads, pull quotes, captions, and anything else that stands apart and supports the main text.
• Tertiary level: This is your main content. The major goal here is to make your type legible. This level of type should stay out of your reader’s way. The reader should be able to decide if they want this level based on primary and secondary type levels.

The primary and secondary levels are the realm of display type and their goal is to attract attention. The tertiary level is the realm of text type and it’s goal is to make reading easy.

Typically your hierarchy will move from general to specific as it moves from primary to tertiary. Your general points will be the most important and will be seen by most everyone. More detailed information will be there at a lower level in the hierarchy for those people wanting more.

Visual Punctuation

In writing we use things like periods, commas, and semicolons as punctuation marks to help give order to our words. We’ll use paragraphs to separate ideas.

Visually designers use space, horizontal rules, pictorial elements, and bold and italics to separate, group, and emphasize. These are some of our visual punctuation marks.

Much like written punctuation marks, visual punctuation clarifies the viewer’s understanding of the content.

Counterpart and Counterpoint

The rhythms of writing are created by the same pattern-forming process of sharing that creates rhythm of dance, music and speech. Movements shared make dance. Patterns shared make music and speech.
—György Dóczi

Typographic hierarchy derives from basic pattern-forming, which allows our type to better function as a conveyor of information and gives it a rhythmic and visual structure.

Counterpart and counterpoint are the same similarity and contrast we talk about above.

• Counterpart is similarity. It brings unity and harmony to type design
• Counterpoint is contrast It brings opposition and dissonance to type design

Both are required to create hierarchy and it’s a designer’s job to balance the need for unity through counterpart with the need for emphasis through counterpoint.

To create typographic hierarchy we can vary the characteristics of type to create counterpart and counterpoint relationships. We have at our disposal characteristics such as:

• size/scale
• weight
• color/value
• spacial intervals
• orientation
• tone
• texture

Individual letters can also have counterpart and counterpoint relationships. For example f and j are counterparts since they share the same form. a and v are counterpoints since they use different forms.

Different typographic elements can have characteristics of both counterpart and counterpoint at the same time. In the image above color and scale are used to create counterpoint relationships with the 3 ampersands, while shape remains consistent creating a counterpart relationship.

A clear hierarchy is created in the 3 ampersands by altering their size and color.

Typographic Joinery

Typographic joinery is the idea of linking and connecting elements through a repetition of structural forms, much like the fj combination that share a similar form.

A good example of typographic joinery is the ABC logo designed by Paul Rand and seen above. Notice that a geometric circular font was chosen and the letters are placed inside a geometric shape that’s also a circle. The entire logo is joined through the geometric circle creating a strong unity in its design.

Creating Mystery and Interest Through Typography

A few months ago when writing about sticky ideas I mentioned that mystery is a great way to hold people’s interest. We can use type to help create that mystery. We can think of type as having either questioning or answering forms. A question invites and calls for an answer. The question creates the mystery that is resolved by the answer.

The question expresses dissonance and unrelieved tension. It should be the more visually prominent element as you want viewers to see it before they see the answer. The question should display more counterpoint; it should display more contrast to call attention to itself.

The answer expresses unity and tension relieved. It connects to a specific question and complete the communication initiated by the question. The answer would display a counterpart relationship with the question, though it wouldn’t be as visually prominent when compared to the rest of the page.

To continue the mystery our answer might then lead into another question rebuilding tension and once again standing in counterpoint. By repeating this question and answer, counterpoint and counterpart pattern, we can lend a sense of mystery to our type.

Summary

Hierarchy is essential for communication. Think of the people you know who tell a good story. They don’t deliver that story in a monotone voice with a singular rhythm. Their voice rises and lowers. The pace of the story speeds up and slows down. They create tension and then relieve tension only to create tension again. Good storytellers create hierarchy in the telling.

Visually we use similarity and contrast to connect some design elements and separate others, and in so doing we create a visual hierarchy. We create counterpart relationships in type to show similarity and we create counterpoint relationships to show contrast.

Without hierarchy we’re left with visual boredom. We don’t present content in a way that makes readers want to read. We present to them an uninteresting mass of type that looks challenging to read

Without hierarchy we hinder communication by not leading our viewer’s eye to what they should be seeing and reading first, second, and third. We don’t help them understand what on the page is more important and so we run the risk they may miss it.

By creating a clear hierarchy we do lead our viewer’s to what’s most important and while we can never force every viewer to absorb our message in the exact order we want, we can show them the path through that information we think best.

Through typographic hierarchy we make out content more interesting to read and we allow our readers to more quickly find what they want and decide if they need to dig deeper. We make it easier for people to understand our message.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.