What is Typographical Hierarchy? How to Organize Information for Readers Using Headlines, Subheads, Pull Quotes, Sidebars, Callouts, Typeface Selection, Small Caps, & Other Typographic Techniques

Using Typographic Hierarchy to Your Advantage

What is typographical hierarchy? It’s the way you organize the typography on the page to make clear how important each bit of information you wish to convey really is. The most important element is the one you will attempt to make stand out the most. The least important element will be “quiet” and in the wings, so to speak. Read on to learn how to use typographic hierarchy to your advantage.

Basic Structure

Basic typographical structure is a long-established hierarchy in print.

• Headlines — Big, most important, top of the hierarchy
• Sub-headlines (subheads) — Somewhat big, still important
• Text/body copy — smaller, low in hierarchy, yet may have more important areas made to stand out

Newspapers and other article-type writing use this structure. Notice how headlines are huge, yet bylines (author credits) are tiny. This is because of the use of typographic hierarchy: bylines are much, much less important to the reader than the headline.

Even books use a similar structure. Chapter titles are like headlines, and are bigger than the book’s text itself. Now think about a few other ways type is used in books. Books have headers and footers, which tell the reader information like what chapter they’re currently reading, or the title of the book itself. These are of medium importance, and so are set in type similar to or smaller than the body text, but often in another typeface or in italics to delineate them from the body text. Books also have folios, or page numbers, which are also set in a different typeface to make them stand out.

How to Use Hierarchy in Your Layouts

There are several ways to use typography to let your readers know which information is most important. In fact, using typographic hierarchy skillfully will direct readers’ eyes along the page precisely how you want. Here are some tips to try, and what they do:

• Initial capital letters — Mark the beginning of a paragraph or section. These initial caps can be just plain large caps, drop caps, or even ornate illustrated capital letters reminiscent of illuminated manuscripts.
• Pull quotes — Words that are separated from the layout and inset in a larger typeface into the layout. Pull quotes are common in magazine article layouts and help to highlight important or intriguing snippets of information.
• Small caps — Excellent for highlighting brief bursts of information. Use only when your typeface includes true small caps.
• Typeface selection — Go with legibility for your main typeface. Usually you select one or two typefaces to work with in a piece. If you add a second typeface, go contrasty. If the first face is a light serif, try a chunky sans-serif for the second. Make sure they’re very different from one another.
• Sidebars — Use a sidebar to call out important bits or lists of information that should stand out from the article.
• Point sizes — This is a given. Make sure there is great variation between the size of headlines and the body copy, for example.
• Type styles — Bold, italics, all caps, all of these help to highlight small bits of information, even single words. Remember that even italicizing for emphasis is utilizing the principles of hierarchy.

Now that we’ve answered the question, “What is typographical hierarchy?” try incorporating these tips. They’ll instantly make your layouts more attractive, legible, and understandable for readers. And that’s no small feat!

References

Typographic Hierarchy: https://www1.appstate.edu/~yaleread/typographichierarchy.pdf

Typographic Hierarchy: https://www.fonts.com/AboutFonts/Articles/SituationalTypography/Typographic+Hierarchy.htm

Image credits: Both from https://www.flickr.com/photos/juggernautco/3437849551/