Mysterious design secret no. 4: the most important ingredient in any recipe

Not sugar: font hierarchy!

It sounds a tad jargony and not at all appetizing. What does it mean—and why is it so important? How can you use it to actually add flavor to your ideas?

Hierarchy means structure

I am certain most of my readers know what an organizational hierarchy is—from traditional top-down, to flat, to hybrid models. Some beleaguered “muddle” managers come to mind. Font hierarchy can be clear or muddled too.

Using fonts hierarchically helps us communicate our ideas quicker and more effectively. Proper formatting makes them more immediately accessible and lends a certain order and flow. When font hierarchy is done well, it feels right, but the work that got it to that point is not obvious. The arrangement of typography is an art that makes meaning visible.

The design secret

When I receive content from a client in a Word document, I can instantly see when it’s either overformatted or underformatted hierarchically. My job as a designer is to first understand the importance of the content and tease out its layers of meaning, then establish styles for each level of content that guides the reader in the intended direction. Especially on the web, it’s essential to provide a very clear structure for scanning and assisted reading technologies.

In reading through raw text (see the example on the left), determining the proper hierarchy can be a challenge! But as I empathize with the reader, working through the initial confusion usually leads to an improved structure, and that’s where the value of structure comes in. Developing a clear hierarchy will lead to increased retention and cognition.

Take these two examples of a snickerdoodle recipe.

snickerdoodles-color

 

On the left side, you’ll see content that is underformatted, making the recipe difficult to follow. The words are all crammed together and communicate no clear order of operations. On the other hand, the version on the right has been formatted for ease of use. If I was to prepare this recipe for a client, visuals and color would be added depending on their brand identity.

I have employed these design techniques

  • Type size
  • Type weight and case
  • Line space
  • Alignment
  • White space
  • Placement and spacing

Which is easier to read and understand?

These techniques can be used for short and simple, or long and complex content. Ask about how you can improve the cognition of your web and print communication, email or 206-941-0840.

Leave a Reply