Visual Hierarchy in Typography

By Aenea Liang • November 24, 2015

Visual Hierarchy is an important element in any design project. For designers, it is important because it allows us to determine what will be read first, second, and so on. Type hierarchy gives order and organizes the text elements in a design. This way the designer can most likely control the way information is received and in what order.

Hierarchy through type equally benefits the readers as well. A clear visual hierarchy tells us what is important on a page, giving readers a sense of how to read the material and establishing a flow.

Good type hierarchy can be achieved through the combination of key visual elements; size, weight, color, texture, typeface choice, and space.

Of course, one of the most simplest and obvious ways to establish hierarchy is through size. Size is what catches our attention first. The biggest text demands the most importance; it is what our eyes are drawn to immediately, the first information we read.

In relation to size, scale is equally important. To create distinct hierarchy the sizes of text must have variance in relationship to the other type on the page. Just changing the point size may not be enough since different typefaces scale differently. Look at how the typefaces work together to ensure that size and scale are equally balanced.

Thickness of strokes can create hierarchy as well. The thicker typeface appears bold and big. Light, condensed and narrow type often appear smaller than the actually are. Pairing thick and thin typefaces together creates a sense of hierarchy with the thick style carrying a greater look of importance.

Using color helps to add emphasis and highlight text. Think back to what we learned about color as a child; warm colors (red, yellow, and orange) will pop out, while cool colors (green, blue, violet) tend to fade.

Of course, it is important to consider the colors used throughout your design. Color consistency is key to unifying your design, but color contrast can will also allow your type to jump out at readers.

Texture in type refers to the pattern of texture that letters and words create when resting on a page or screen. Within blocks of text you end up with a patterned look. To establish more hierarchy break up the pattern. This can be done through something as simple as changing the alignment of a single block of text.

After Size, Typefaces are probably the next most noticeable element used in creating hierarchy. The key is to have contrast between typefaces (This is one reason why one serif and one sans serif combos are so popular.)

Choose typefaces with similar x-heights, if the styles will be used in in line with one another throughout the project. For best combinations, look for typefaces that are different in weight but have a similar tone or feel.

Similar with size, space can be used to help text demand more authority. White space can make type appear bigger and more readable, while lack of whitespace can make it feel tighter and smaller.

Bigger, bolder, text elements often need more space than smaller simpler, text blocks. Consider the spaces between lines of text, kerning for each type style, and the relationship between the different type used throughout the design.

Organizing type can be challenging and fun. It may come naturally at first, but with practice in combining techniques a designer can develop a good eye for different type effects and styles, and can achieve great hierarchy and flow through type!

Aenea Liang

NYC based visual designer. Movie nerd with a love for illustration.

Like what you’re reading? Sign up for the Verbal+Visual newsletter and receive monthly roundups.

Commerce that matters.

Work with us.