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 traditionally top-down to flat, all the way to holocratic—the structure helps to give (or take away) meaning in the workplace. Some beleaguered “muddle” managers come to mind. Font hierarchy can be clear or muddled too.
Using fonts hierarchically helps us communicate our ideas online or in print quicker and more effectively—proper formatting makes them more immediately accessible and lends a certain order and flow. When font hierarchy is done right, it won’t be obvious that design has occurred, but the arrangement of typography is an art that brings the meaning of the content to light.
The design secret
When I receive content from a client in a Word document, I can instantly see when it’s either over-formatted or under-formatted 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 assume the role of the reader, working through the initial confusion usually leads to an improved structure, and that’s where the value of design comes in. Developing a clear hierarchy will lead to increased retention and cognition.
Take these two examples of a Snickerdoodle recipe.
On the left side, you’ll see content that is under-formatted, 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 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
- 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.