Hierarchy – is a big word, but an easy-to-implement (albeit important) concept when it comes to typography.
And this guide will show you how to use it to enhance your design projects.
Even if you’re not quite familiar with the terms, you’ll run into a lot of typographic hierarchies. For example in a newspaper, with a headline , subheadline , and body copy. This is a classic example of a three-level typographic hierarchy, an approach that is still used today, both in print and online. Newspapers from the early twenties offer great examples, such as the following:
These days, our headlines don’t have to be 6 inches wide to grab a reader’s attention, but the image above provides a dramatic reminder of how typography hierarchy really is – organizing and formatting your preferred type so readers or users can see what’s most important, which lets them to easily navigate the layout at a glance and quickly scan to find the information they’re looking for.
Improving reading and usage skills are the most important advantages of a typographic hierarchy. If, for example, the front page of a newspaper looks like one of the two examples below – without a typographic hierarchy or with a limited hierarchy – the important message you want to communicate may not be easy to read at first glance. Readers may find it annoying that one part stops and another has started, making it harder to read and having little effect.
So how can you build an effective hierarchy in your designs? Adding three different levels of typography is a great place to start and will suffice for most designs.
- Level One: In general, your level – one typeface will be the most important content or information; this should be the most visible typographical element in your design.
- Level Two: Level-two elements usually help organize your design into sections or groups that deal with unified information. It shouldn’t stand out as much as your level one type, but clearly directs the reader to different parts of the design and helps to navigate easily.
- Level Three: For text-heavy layouts, level three typography is generally the meat of the design. This is where copywriting lives, where you get into your designs. It can be long or short – an entire article, a small note, a short description – but the main focus for this level is easy to read, as the font size will be small.
As an example, the design of this product page is simple, but has at least three levels of typography hierarchy. You might say the product name (Major Black headphones) is level one; price as level two, and product description as level three. Notice how the description paragraph is built into an easy-to-read serif with suitable spacing between two sentences (also known as “ leading ”).
You have many approaches you can choose from to visualize your content arrangement. Many of them seem like small details, but to quote Charles Eames, an influential American designer and architect: “Details are not just details. They are the ones who build the design.” Let’s take a look at some options that can help you build a typographic hierarchy and give your designs maximum effect:
How to Establish a Typographical Hierarchy (and Visually Organize Your Design)
1. Set Your Font Size
Size is a great way to create contrast between different typographic elements in your design, especially if you’re only working with one typeface. With three levels of typography, font size generally starts with the largest at the top (level one; your most important information) and decreases in size as you move down the page (with any body copy or text that gets smaller at level three). Since we read from left to right and from top to bottom, a top-down hierarchy is the most natural for readers to navigate. This is the most common layout you will see in books and magazines to articles on websites.
Remember – hierarchies are all about helping your most important information stand out visually. Whether the information is in the form of a name (perhaps on your business card; or the name of a performer or guest speaker on an event poster), the title of an article or blog, or a special discount or promotion in an advertisement, if you set the type to a size larger than the other text on the layout, of course this is eye-catching.
For example, the price of a special offer stands out well because of its large size relative to the text on the right side of the layout. Using a bright shade of red as the highlight of the campaign is also a smart choice (for more information on your typography hierarchy, scroll down to #4).
2. Choose Some Contrasting Fonts
Think again about the “On the Moon” newspaper headline we saw at the beginning of the article. Not bold, sans-serif fonts contrast dramatically with italics and on the rest of the page? While pairing letterforms doesn’t always have to be dramatic, contrast is a key component to a successful font combination.
And combining sans-serif with serif typefaces has been common among typers and designers for years. A classic top rule for a great start to any design. Even if you’re only using level one typography from a variety of fonts, that can make a big visual impact.
Keep in mind that you don’t want to choose too many typefaces, which will only make your design cluttered and clutter your designs: two or three should be enough for a typical layout. You also want to make sure that your choice fits the style and context of your design.
For example, you wouldn’t set important information like the time and date of a corporate event in a font that is funky , too sophisticated and hard to read. Or choosing a script font for long paragraph text will be just as hard on the eyes. Some fonts are hard to see clearly when they are too small. These kinds of issues and how they affect the readability and overall look of your design are important things to consider for any project. For more tips on how to combine fonts effectively, check out another Design School article, “10 Grand Rules You Should Observe When Combining Fonts: Tips For A Designer.”
3. Experiment with different styles and weights
Many fonts exist with various style and weight options. Different styles include italic , small caps , or bold or solid versions. Weight refers to the visual lightness or weight of a typeface. If the font you are using has a light, medium, bold and heavy version, that is what is known as the difference in weight.
These characters give you a wide choice when it comes to using them in different roles (or just different complementary looks for the various typographical elements of your design. Take a newsletter, for example. All the sans-serif typefaces here use the same, but different fonts. weight. The bolded letters in the newsletter title make it very easy to see; a signal of visual weight that is an important part of the design hierarchy.
And these labels have been designed in a variety of regular and bold weights, along with italic and small print styles – all using the same typeface.
4. Add Some Color
Like font style and weight, color is also a way to play a part in several ways to make your design stand out. Since colors sometimes carry their own meaning and association, you want to make sure that your choice matches your brand and/or purpose and feel of your design.
This invitation is for an event hosted by a coffee company, with natural and earthy colors for the typography that supports the brand characteristics and theme of the event.
Likewise, this business card manages the essential feature set, a blue-and-yellow color combination for typography that catches the eye. Fresh color, clean feeling, though without the traditional black or navy hues – they are still as suitable for orthodontic practice as these cards were made.
5. Note the Space Distance
In a design, the spacing between typographical elements – letter spacing and sentence spacing – can make all the difference between a balanced, readable design and making the appearance seem cluttered and confusing.
Remember some of the previous image examples of no hierarchies and finite hierarchies? Both have gaps between sections of newspaper articles, which make them difficult to read, a not very effective design. This is because the spacing (or white space) is visually divided into different parts of a design, but it also helps the reader understand and visualize how everything fits together as a whole.
For example, enough spacing (along with a wide variety of creative type and well-organized sentences) makes the typography here look balanced, even on a space as small as a clothing label.
When you look at a layout that is well spaced, you can immediately see where to read or get information from the design in question. However, if you look at a design where the designer may not feel like they have enough space to work with (so they clump together so much content regardless of spacing) – you may find yourself having a hard time reading on text that is too small a font. Or looking at information, perhaps an address or phone number, but not immediately finding what you’re looking for. Or it won’t even notice a bit because the design looks messy.
These presentation slides avoid that problem by using adequate sentence spacing and surrounding text and other elements with lots of white space. Color blocks and geometric shapes also help organize and separate the different design elements.
You don’t want your readers or users to be frustrated with your design. So, go the extra mile in establishing a balanced design with enough white space to suit the time you have.
6. Note the Distance, Cont.: Proximity
Spacing is not only about separating typographical elements, but also about proximity, or moving related items closer together. Reducing the spacing between pieces of text that fit together (to make it clearer if they stick together) is another visual tool to help readers navigate the design more easily.
Especially heavy content designs, such as infographics, immediacy is key to establishing a balanced design that makes it have a visual feel.
7. Play with Orientation
Sometimes a straight sentence of text just doesn’t cut it when you want to make a statement with your typography. In that case, a slight tilt, slant, or bend might help your design set itself apart from the rest and draw some extra attention.
Typically you’d use these methods to create a typography hierarchy on a single design project, like the bridal shower invitation below. Using font size, which contrasts the typeface, color, spacing and proximity, and orientation makes for one good effect.
Effectively applied, these techniques not only make your designs attractive, they make them friendly to use – and when design is combined with form and function, that’s the best part. So next time you’re working with typography for a design project, try some of them out. Happy designing!