Three levels of typographic hierarchy
Even if you're not familiar with the term, you've most likely seen typographic hierarchy many times. A newspaper, with a headline, sub-headline, and body copy is a prime example. This is a classic example of three levels of typograpic hierarchy, an approach that's still used today, both in print and online. Newspapers from the early to mid 20th century offer exaggerated examples. Typographic hierarchy is all about organizing and formatting our type choices so the readers or users can clearly see what's most important, which enables them to easily navigate the layout at a glance and quickly scan to find the information they're looking for.
Enhancing readability and usability are some of the most important benefits of establishing a clear typographic hierarchy. Without typographical hierarchy, important messages wouldn't be nearly as easy to see at a glance. Readers would have had trouble distinguishing where one section stops and another begins, making for a harder to read design that has less impact.
Adding three separate levels of typography will be sufficient for many designs. Level one typography will be the most important content or information. This should be the most immediately visible typographic element in our design. Level two elements will help us organize our design into sections or group related information together. They shouldn't stand out as much as our level one type, but should clearly direct users to the different parts of the design and help them navigate it easily. For a text heavy layout, the level three typography becomes the meat of the design. This is where the copywriting lives, where we get into the message of our design. It could be long or short. The primary reason for this level is that it's easy to read, since the font size will likely be somewhat small.
Size is the simplest way to create contrast between different typographic elements in our design, especially if we're only working with one typeface. With three levels of typography, the font size generally starts out largest on top and decreases in size as you move down the page. Because we read from left to right and top to bottom, a top-to-bottom hierarchy is the most natural for readers to navigate. This is a very common layout that we see in everything from books and magazines to articles on the web.
Contrast is a key component of any successful font combination. Combining a sans-serif with a serif typeface is common practice among typographers and designers. Even if we put only our level-one typography in a different font, we can create a big impact visually. Keep in mind that we don't want to choose too many typefaces, which will only clutter and crowd our design. Two to three will enough for most layouts. We'll also want to make sure that our choices are suitable for the style and context of our design.
Many fonts come with a variety of style and weight options. Different styles might include italics, small caps, or condensed or extended versions. Weight refers to the visual lightness or heaviness of a typeface. If a font we're using comes with light, medium, bold, and heavy versions, those are all different weights. These characteristics give us lots of options when it comes to assigning different roles to various typographic elements in our design.
Like font styles and weights, color is just one more way to make certain parts of our design stand out a little better. Because colors often do carry their own meanings and associations, we'll want to make sure your choices match up with your brand and / or the purpose and mood of your design.
In a design, the spacing between typographic elements, both letter spacing and line-spacing, can make all the difference between a balanced, easily readable design and one that looks cluttered and confusing. When we're looking at a layout that is spaced well, it’s immediately obvious how we should go about reading or getting information from the design. But when we're looking at a design where the designer didn't have enough space to work with, then we might find ourselves squinting at text that's too small to read. We don't want readers or users feeling frustrated by our design. So putting a little extra effort into crafting a balanced design with plenty of white space is worth your time.
Hierarchy is all about helping our most important information stand out visually. Whether that information is a name, the title of an article or blog, or a special discount or promotion on an advertisement, if we set that type at a size that’s larger than all the other text in the layout, it's sure to attract attention. Applied effectively, type hierarchy not only make our design more attractive, but also make it more user friendly, and when a design combines form and function, it's a good thing. So next time you're working with typography for a design project, try some of them out.