Have you ever tried to read an article or document that just resembled a wall of text? No headings, no titles, no captions, just text. It’s hard to read, right? I’d bet that you’ve even avoided reading content in that format on more than one occasion. It strains your eyes, and makes it hard to understand and figure out what’s important.

What is typographic hierarchy?

Typographic hierarchy is one of the most important elements of designing written content. Without a hierarchy, you get the “wall of text” effect that makes reading difficult.

Creating an effective typographic hierarchy involves a few elements that, when combined, create a visually appealing structure for written content that makes it a joy to read. It highlights which content is the most important, signaling to the reader what to pay attention to.

The basic elements of typographic hierarchy include the type size, typeface choice, and things like weight, color, capitalization, and style. Each one plays an important role in creating highly readable and user-friendly content.

{Resource}

Typeface Size

The most obvious way to create typographic hierarchy is by using different font sizes for different elements. Larger type is generally used for things like titles and headlines, while smaller type is used for body copy, captions, and meta information.

But simply making a font larger doesn’t necessarily create a hierarchy that looks good. Following sizing rules like the golden ratio or Fibonacci sequence creates a more aesthetically pleasing appearance.

There’s also a classic typographic scale that’s been used in typographic design for centuries. You might be familiar with it from the default font size options used in many word processing apps. It consists of: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60, 72. It’s also sometimes expanded to include 96 and 144 pts.

One mistake I see digital designers repeatedly make is using body copy that’s too small. Standard body text size in printed matter has long been 12 pt. But on screen, 12 pixel fonts can be uncomfortable to read for long periods. Instead, consider using type between 14 and 24 pixels for body copy, and base the rest of your hierarchy on that baseline size.

For example, if you start with an 18 pixel body text size, you might want to use a 36px font for your title or H1 headlines, 30 px for H2, and 24 px for H3. The downside to only using type size to establish hierarchy is that it limits the number of headers you can effectively have without using huge type (which can be a valid design choice, too).

Multiple Typefaces

You can enhance typographic hierarchy by using different fonts for different elements. Combining typefaces can be challenging for many new designers, but there are a few things to keep in mind that make it easier.

Be aware of the contrast between typefaces. Too much and one font can drown out the other. Too little and the fonts will clash. For example, if you pair a font with very thick strokes and another with very thin strokes, the first will likely overwhelm the second. Pay attention to the structure of the letterforms, too. If one typeface has condensed letterforms and the other has stretched letterforms, the contrast will be too much and end up visually jarring.

The basis for the letter shape is also important. Picking two typefaces with geometric letterforms, for example, will often work better than typefaces with wildly different underlying shapes.

One technique beginners can use to effectively combine typefaces is to choose fonts from two different classifications. For example, pairing a serif with a sans serif typeface or display typeface.

Differing typefaces alone aren’t enough to create effective visual hierarchy. But it is an important element in creating typographic hierarchy, especially when header sizes and body sizes aren’t that different. This is common with lower-level headers, such as H4 and H5, if used in content.

The benefit to using multiple fonts in a typographic hierarchy is that different typefaces are more readily recognizable than subtle differences in sizes. Particularly when different headers aren’t seen side-by-side.

Capitalization, Color, Weight, and Style

The final method for creating typographic hierarchy is by changing the capitalization, color, weight, or style of the type. Any of these elements will make a header or other element stand out (or recede) against other elements.

Using all-caps for a header makes it stand out from surrounding text. While all-caps can be hard to read in larger blocks of body text, it’s more readable at larger sizes, as would be used in a header.

Changing the color of a typeface can have a dramatic impact on the importance of the text. Making text a lighter shade of gray, for example, can make it recede in a design. This is commonly used for things like meta information or image captions. It indicates to the reader that the text is less important than surrounding text.

By contrast, using a vibrant color for type can make it stand out against the surrounding text. This is why links, historically, have been bright blue—it makes them instantly recognizable as a link and stand out from the surrounding content. The same can be done with headers to make them stand out from body text. This is particularly useful for lower-level headers that might not be significantly larger than the body copy.

Weight is also a useful way of creating hierarchy. Heavier weights (bold or black weights) make text stand out while lighter weights make it recede. Be wary, though, of using typefaces that are particularly heavy or light for large blocks of text, as it can affect readability.

Style is the final method for creating typographic hierarchy. Italics can be used in headers to differentiate them from other header levels, or for things like captions to set them apart from body copy.

Putting It All Together

Typographic hierarchy does not have a one-size-fits-all solution. There are a lot of options for designers to consider to create the visual appearance that fits their project while also improving the readability of text content.

It’s a good idea to start with the body text size and style. This sets a baseline for the rest of the typography in the design. From there, you’ll need to figure out which header sizes you’ll need (H1-H6), as well as any other text elements the page will contain.

Let’s say you’ve decided to use a 16-pixel body text size. You’ll have four header levels (H1-H4), plus captions for images and meta text for a date and author byline. And just to make things more interesting, there will also be pull quotes included in the text.

The above example shows how to effectively combine the typographic elements mentioned throughout this article in one hierarchy. Two fonts are used—Evolve Sans for the headers and meta information and Cardo for the body text.

Evolve Sans and Cardo work well together because there’s sufficient contrast without either typeface overwhelming the other. They have similar letter shapes, but are also from two different typeface classifications (sans serif and serif, respectively).

{Resource}

Using different type sizes and capitalized letters for the first and second level headers immediately differentiates them from the body text. They follow the classic typographic scale, with 16 pixel body copy, 24 pixel header 2, and 48 pixel header 1. The meta and caption format is also set apart through size, at 10 pixels.

The second level header also adds visual interest through a color change. The opposite is done for the meta and caption text, appearing in a lighter gray so it stands out less.

The third level header is the same size as the body copy, but is set apart by being bold. The first level header is also bold, increasing its importance in the hierarchy.

You can see from this simple example how combining the techniques described above results in a typographic hierarchy that make it easy to pick out the most important elements in the design. It also makes the text more readily scannable (readers can easily see the main points in each section indicated by the header to find the sections that have information applicable to them).

Creating effective typographic hierarchies requires knowledge of these principles, plus a fair amount of experimentation. The principles give designers a framework while also allowing for a lot of freedom in how they are implemented.