When I see type hierarchy out in the world, it just makes my designer heart so happy.
When it comes to visual hierarchy, it’s about the organization of content, emphasizing some pieces, while diminishing others. A few simple ways of doing this is through sizing, font weights, colors, placement, grouping, white space and more. Type hierarchy a basic principle of design AKA little graphic design hack that you can implement when designing your own social media graphics, flyers, logos or blog and Pinterest graphics. Take a look around you, magazines, books, websites, logos, etc., you’ll begin to notice those small little details everywhere!
Without typographic hierarchy, every letter, every word and every sentence in a design would look the same. Can you imagine reading something where everything is the same font and size and color? Where do you start? How do you know what matters most?
“Make it simple, but significant.” –Don Draper
I love this quote, because the best designs are often when great type is used well. If you would like to take your designs up a level, let’s break down type hierarchy and how you can utilize it.
One of the most important elements for people looking at anything you design is the type. It needs to be clear and readable and it should direct users through a design, from most important elements to least. Typographic hierarchy is used to guide the reader’s eye through the text in the most natural order. It helps to make long blocks of text more readable and can even allow the reader to skip through information and still gain the main points you want to get across.
Design hack: When laying out blog posts, use H2 and H3 headings to separate big blocks of text. This helps the reader stay interested in your content and a long blog easier to read!
First level is the Primary Level. Those are the headlines – the big type. It’s what grabs the attention of the viewer. The Secondary Level can be best described as little nuggets of scannable information. Last, the Third Level is the main text of your design and the smallest in the overall design. Think of a newspaper when you are designing a blank canvas – you always have the headline and subtitle right next to each other to show you what the main body of the article is all about. Design is meant to be informative – not just pretty.
Good design is all about contrast. That’s why so often you see two different fonts paired together – the more contrast, usually, the better design impact. With an illustration or busy photo, there is most likely a good portion of whitespace.
There needs to be a clear difference between the style of your headings and the style of your body copy. This can be done through a number of design options, such as:
The contrast between different levels of your typographic hierarchy should be very clear. So, for example, your headings (which make up a much smaller percentage of your text) can afford to be much larger than your copy, and this helps to make sure they command more attention.
As well, you can use italic, bold and underlining within one set of text to create contrast and interest. Only highlight a couple of key words.
Although good content is critical for marketing or conveying information, there’s no denying the importance of good design when it comes to delivering that content. Every time you type up a new post or design a sales page or create a flyer or anything else, be sure to take a look over your work and analyze the typographic hierarchy. Make sure your eye is traveling through the content in a logical manner and will be read comfortably by your audience.