The Secret to Structure in Graphic Design: Typographic Hierarchy

1. Typographic Hierarchy: Finding Order in Chaos

When we pick up a newspaper, a poster, or a report, our eyes surprisingly scan and locate the most important information with astonishing speed. But how does this “magic” happen? The solution is simple: As designers, we use a hidden language that guides the reader’s eye: Typographic Hierarchy.

Typographic hierarchy is a critical aspect of all design projects. Simply put, to differentiate between elements within a text, designers use elements such as scale, weight, and positioning. The legibility of the text is directly related to the hierarchy we utilize.

This is because most readers scan (or skim) visual materials (print or digital). Therefore, they must be able to grasp the meaning and flow easily. Consequently, the visual structure we create through typographic hierarchy strengthens the communication we establish with the audience.

2. Why Is Typographic Hierarchy Important? (Readability and Flow)

A good typographic hierarchy is an indispensable element of good design. By clearly defining a visual hierarchy, we organize the text within a design into a logical order. This, in turn, makes the text readable.

An effective hierarchy helps our readers easily navigate a document. The main goal is to create an information hierarchy where users can easily determine what is most important. This strategy is the best way to make them feel part of a story.

If people see a structure that aligns with standard reading patterns (top-to-bottom, large-to-small), our visual communication will be more successful. For instance, the text in a graphic’s main title must be more visible than the descriptive text underneath it.

3. The 4 Core Elements That Form Typographic Hierarchy

The first step in creating hierarchy is selecting an appropriate typeface for our project. However, in addition to this, here are 4 powerful tools we can use:

A. Size (Scale)

First, we use different font sizes to strengthen our design through typographic hierarchy. By placing the greatest emphasis—in terms of size and weight—on the most important element in our design, we effectively capture the user’s attention.

• Use large font sizes for headings (like H1, H2).
• Furthermore, we can add line spacing (leading), margins, or negative space (white space) between words to make the text more visible.

B. Weight (Boldness / Italics)

Font weights are one of the fastest ways to distinguish one element from another. In this context, while we might use a bold typeface for main titles, we can opt for a regular or light typeface for subheadings.

But be careful! Using bold or italics purely for emphasis often does not create an impact across an entire title or subheading. This method works well only when emphasizing a few words throughout a large block of text. Otherwise, making an entire paragraph bold reduces the power of the emphasis.

C. Color and Contrast

Color is an effective tool for emphasizing text by making it stand out against a neutral background. Furthermore, we also use different colors to establish typographic hierarchy.

Another way to make something stand out is through contrast. In this method, we use different colors side by side. Thus, they can be read even from a distance. Conversely, if we have yellow text on an orange background, we struggle to see the yellow due to the low color contrast.

D. Typeface Selection (Font Pairing)

You can create emphasis for typographic hierarchy by utilizing different font styles. Nevertheless, combining too many different typefaces within a single project can lead to unnecessary variety. Remember that this often results in the design appearing messy or disorganized.

Therefore, when we use more than two typefaces in our design, we must ensure they complement each other.

• Serif typefaces have a more traditional look compared to Sans-serif typefaces. Specifically, they make it easier for readers to follow the information in long reading materials (books, reports, lengthy articles).

4. The Micro Anatomy of Typography: Core Concepts

To create cohesive work with typographic hierarchy, we must be familiar with a typeface’s core components and understand how these elements are adjusted. Unquestionably, these concepts directly influence your text’s final appearance and reading fluency.

4.1. Controlling Letter Spacing (Kerning and Tracking)

• Kerning (Pair Spacing): This is the specific spacing adjustment between two particular letters. Its purpose is to ensure these two letters look optically balanced. Kerning is a fine adjustment done on a pair-by-pair basis.
• Tracking (Group Spacing): This is the equal spacing adjustment between letters across a word group, sentence, or an entire paragraph. In other words, Tracking controls the overall density of a text block.

Adjustments to Kerning and Tracking not only improve readability but also contribute to a modern and clean appearance when establishing typographic hierarchy.

4.2. Font Types and Usage

4.3. Anatomical Elements of Typography

• X-Height: The distance between the top and bottom lines of a font’s lowercase letters (‘x’, ‘a’, ‘c’). Generally, fonts with a high x-height are considered more legible.

• Leading (Line Spacing): The vertical distance between the baselines of two lines of text. Thus, a sufficient leading adjustment makes the text easier to scan.
• Ascender (Ascending Part): The parts of lowercase letters (‘d’, ‘h’, ‘l’) that extend above the x-height and reach upward.
• Descender (Descending Part): The parts of lowercase letters (‘g’, ‘p’, ‘y’) that cross the baseline and extend downward.

5. Common Mistakes and Tips in Typographic Hierarchy

To create an effective layout, we recommend only using one or two typefaces for the various sections on each page.

• Adjusting Weight: For typographic hierarchy, utilize different font weights for varying purposes, such as headings versus body text. For instance, you might use normal or light weights against a bold typeface.
• Creating Space: We can create visual interest by changing the letter spacing (tracking or kerning) or line length within any section or page. This way, these differences help readers determine where their eyes should focus.
• Appropriate Font Selection: Always, we must carefully choose typefaces for different purposes so that users can easily scan a page and find the information they need.

6. Typographic Hierarchy: Conclusion and Summary

Ultimately, comprehending how to establish typographic hierarchy enhances our ability to communicate effectively using color, type, and visuals. Consequently, the readability of our text is directly related to the specific typographic hierarchy we employ.

Keep these simple steps in mind for a successful hierarchy:

• Use large font sizes for important headings in your design.
• At the same time, create a hierarchy by using different weights of different typefaces in each section of a page.
• Ensure there is sufficient contrast between all typefaces and backgrounds.

The best way to learn more about typographic hierarchy is to apply it. Now, it’s your turn!

You can also check out my article titled “Design Thinking: Putting the Solution at the Center“ for Design Thinking Methodology.