What is Visual Heirarchy?
The visual hierarchy defines the order in which the human eye perceives what it sees. It reflects all the elements of your design toolkit and techniques of using them, including colours, position, arrangement, contrasts, typography, fonts, spacing and anything else that’s useful for visualizing your content so that it becomes easier to digest and memorize.
We will cover the various features you can alter a little later. First, there is a basic typographic hierarchy from which to work which has three levels. While some projects call for complex hierarchies, most designs can be successful with three levels
- Primary type or the Heading: 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.
- Secondary type or The Subheading: Subheading looks great in relation to the ‘heading’ level as it divides the design into sections. 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.
- Tertiary-type or The Body: And comes the body copy. Generally, this part of the content is text heavy. 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.
One of the simplest ways to establish a hierarchy with type is through size. Readers will often see the biggest type first and start reading from there. In relation to size, the scale is equally important. You need to look at how typefaces work together to ensure the size and scale are properly balanced. Ideally, designers Start with the main body text and go from there.
Here are a few percentages to help you get started:
- Main body: 14 points
- Main headers: 250 percent more than the main body copy (35 points)
- Secondary headers: 175 percent more than the main body copy (25 points)
- Navigation elements: 165 percent more than the main body copy (23 points)
- Secondary navigation or menus: 140 percent more than main body copy (20 points)
Colors 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.
White space can make the type appear bigger and more readable. Lack of white space can make it feel tighter and smaller. Think about the space you use between lines of text. Think about the spatial relationship between letters and the edge of the canvas. For example, bigger, bolder, brighter text elements often need more space than smaller, simpler text blocks.
How text rests in a layout next in relation to other text can impact the overall hierarchy. Typically, the text is aligned to the left top across the screen. But what if you place text left-aligned or centre aligned? This change in alignment will bring the focus to those words or blocks of text, making it appear to be the most important element. Aligning, tilting, twisting or otherwise altering the shape of text in any way can achieve the same effect.
After size, typefaces are the most used element in terms of creating a typographic hierarchy. The key is to have a contrast between typefaces. Playing with two different typefaces for different sections makes the visual hierarchy clearer – make sure there is a reason for the typefaces, and it is in context with your design. Use bold and decorative typefaces to get the impact. As body content is usually dense, remember to use a typeface that is easy to read.
Weight refers to the visual lightness or heaviness of a typeface. The heaviness of letters can make text look larger and important, whilst a lighter typeface can make the text look less important.
Remember to consider the relationships between size, weight, color, texture, typeface choices and combinations, layouts and space when creating an outline. When using these techniques keep in mind, how people read and copy is organized and flows in a logical format that is easily grasped and digested.