A hierarchy of text is important in a design because it allows the reader to understand, at a glance, the order of importance of the information at hand. This element is of equal importance to any other design element as it makes the information conveyed easier to read and easier to understand, guiding the reader from one piece of information to the next with visual ease.
With thought and consideration given to a text's hierarchy, a final design will look more polished and professional and it will be more effective at engaging readers to actually read through to the end.
Where is a hierarchy of text important?
A hierarchy of text is pretty much effective everywhere. Whether we are looking at letterheads, business cards, web design, or any other design form which features text, a text hierarchy is recommended. For example, user interfaces rely on a hierarchy of text to make call to actions clear, visual hierarchy is crucial to help users navigate a website, and posters use a visual hierarchy to grab the attention of people passing by so they will take a closer look and read the fine details. Anytime a client gives you a brief that requires content in their design, the hierarchy of text will come into play.
What to consider when designing text elements?
First, it's important to understand the content you have been given and what it is trying to communicate. A great designer cares about more than just the aesthetics, they will understand the purpose and objective of the content and try to convey its meaning through design. You should ask yourself which information is the most important, what the subject matter is, and which words and letters can make interesting connections.
Next, step into the target audience's shoes and think about how they will consume the information. Text should be treated as a visual element, as like the psychology of color, elements of typography have metaphorical meanings. For example, a large, bold, all caps typeface is eye-catching, but can signify warning.
When choosing a typeface, think about how it is coming across. Also ensure it is readable. While a decorative typeface might match the client's brand, it might be difficult to read in a smaller format.
The key to creating a hierarchy of text will be choosing contrasting features of the text which make one section stand out from another. We will cover the various features you can alter a little later. First, there is basic typographic hierarchy from which to work which has three levels.
Three levels of typographic hierarchy
Picture a newspaper. There are three separate sections that create a visual hierarchy of text: The headline, subheading and body. Having these distinct sections makes the design visually stimulating and easy to navigate, allowing readers to quickly scan for information. This three level hierarchy is a classic design concept that can be incorporated into all types of design.
The Heading
First, the heading is where the most important information should be in order to attract the viewer. Without an engaging header, readers will never make it to the next sections, which make it crucial. It should also be the most visually stimulating element with (usually) large, bold typeface.
The Subheading
Next, the subheading looks great in relation to the 'heading' level as it divides the design into sections. It should not stand out as much as the heading but should be more defined than the body of text. This is where you give the reader additional information to expand on the header and further engage the audience, without telling too much. You really want to hook them so they read the body.
The Body
Lastly, the body copy. Generally, this part of the content is text heavy, which is why a heading and subheading are important to pull the reader in to read further. The heading and subheading have to entice the reader, motivating them to invest time in reading the body. Since it usually has the most content, make sure it is easy to read and smaller in size (in relation to the other two levels).
Now you know the three levels of hierarchy, let's look at different ways to create a hierarchy of text.
Elements of text hierarchies
To create a hierarchy of text elements, you can change more than just the size of the type face. Consider all of the following elements.
Size
Size, of course, is a great tool. The larger the size of the text, the more distinguishable it is from the rest of the text. Understand what needs to grab the viewer and size it accordingly. Divide your content: Is there heavy content that should be smaller in size than the heading? In western culture, the norm is to read from left to right, top to bottom. Similarly, the hierarchy of text starts out with a larger font size of the header that decreases in size once it reaches the body content.
Case
Using caps in small doses can be an effective way of drawing attention to important content, particularly in headings and subheadings. Be aware that using all caps reduces readability, so avoid doing so for body copy or large sections. The use of caps depends on your overall design and what you are trying to convey.
Weight
Weight refers to the visual lightness or heaviness of a typeface. The heaviness of letters can make text look larger and thus more important, whilst a lighter typeface can make the text look less important.
Color
Color can be used to emphasize or understate an element. Think of using color in the same way you would for any other design element. Warmer colors tend to pop over cooler colors, but it is also important to consider contrast and legibility. Don't use color excessively unless it's to make a statement - for example, a different color for the heading.
Using different colors in body content will cause a loss of effectiveness and usually creates visual confusion.
Position
Separating sections of information and positioning them accordingly makes a design easier to read. Remember to place the most important information in a prominent position. Place all related elements together while visually separating others to organize the content.
Alignment
The alignment of text can visually affect the hierarchy. Having the heading centered whilst the body content flushed left (which is easier to read) creates an effect of prominence and importance. Attention will naturally be drawn to the heading before the rest of the text.
Typeface
Try playing with different typefaces. Generally speaking, bold, decorative typefaces are used for headlines to create a visual impact. However, sometimes even an ultralight typeface will work. As body content is usually dense, remember to use a typeface that is easy to read. Playing with two different typefaces for different sections makes the visual hierarchy clearer - make sure there is a reason for the particular typefaces and it is in context with your design.
Spacing
The space between each word and/or each line signifies the hierarchy and legibility of text. Using more white space creates emphasis on important elements, as is illustrated in the website example below. So use this to your advantage, avoiding the temptation of placing all text close together.
These general guidelines can be combined and played around with, as there are many combinations that allow you as a designer to take new approaches to your design. Check out ten beautiful flyer designs made on DesignCrowd which each use text hierarchies in different ways. As long as your design allows the viewer to easily understand the information, feel free to combine the above mentioned elements as you see best fit.
Examples to help you visualize text hierarchies
Here we have a business card which has the purpose of introducing an individual, the company they work for, what they do and how to reach them. With that purpose in mind, let's see how the text hierarchy helps to prioritize this information.
The name of the company "The Factory" instantly stands out due to its larger size in relation to the rest of the text on the front side of the card. The company text is further accentuated through the use of the white text on a black background, centered alignment, all caps, and sans serif typeface. This is the most prominent information when comparing the whole card (front and back).
The next most important information according to the text hierarchy is the employee's name. The name resembles the larger type of the company name through the typeface and use of all caps, and is positioned at the top of the front side of the card in bold typeface. It is also the largest text on this side of the card.
The details of the cardholder have a different typeface and are vastly smaller yet still legible. By using different elements that showcase the different sections, the design determines how the business card should be read.
Now let's look at the website design above. Although there is a consistent typeface in this web design, there is still a visual hierarchy which is achieved by using techniques such as weight, size, color, spacing and alignment. The design is easy to navigate due to the use of white space, as the content is not cluttered or overpowering.
This example demonstrates there are really no fixed rules on how visual hierarchy should be achieved. For instance, the design defies the norm with the heading being in the background whilst the subheadings are in the foreground. However, it is still effective and creates a strong focal point as the heading is significantly larger than the rest of the content. It is also aligned in the center and the enormity of white space highlights it.
This poster takes typography to the next level. In the background, typography is used as more of a design element, showcasing abstract shapes. By using the same typeface but different weights, colors, and sizes, the designer achieves a strong and impactful visual hierarchy.
This is especially so since the text in the foreground is a solid black in contrast to the pink-toned background colors. The design also features the main title in the largest text, the subheading much smaller but still in all caps, and the details in very small print. What could have potentially been visual confusion, is a visually appealing and well-designed poster.
A Final Note
As you can see, a hierarchy of text is crucial to designing effective content. It allows you to grab the attention of readers quickly and engage their interest. It then helps you to guide them toward the body of your content with a subheading that works as a bridge. As we have covered in this article, there are multiple ways to create text hierarchies, so we encourage you to experiment with different approaches to diversify your designs.
Want More?
Love good typography? So do we. For amazing fonts and tips on how to shine at type, check out text logo ideas on BrandCrowd or these articles on DesignCrowd's blog:
Top 25 Free Fonts of 2015 Designer Collection
Typographic Terms Every Designer Should Know
The Typographic Terms You Need To Know To Turn You Into An Expert Designer
Written by Jessica Walrack on Thursday, May 12, 2016
Jessica Walrack is a professional freelance writer with a background in sales and marketing. After 7 years in the corporate world, she stepped into the online sphere and has now been freelancing for 4 years. She specializes in helping businesses to create a stellar online experience for their audience in order to build industry authority and increase profitability. In her spare time, Jessica enjoys traveling all over the world with her family.
