Typographic Hierarchy

Learn how to establish a clear visual hierarchy in your designs to enhance readability

Visual Design

9 exercises

Typographic hierarchy is a system for organizing text on a page that establishes its order of importance. It also allows readers to easily navigate the content and find what they are looking for.

Headings are the crucial element of the type hierarchy. They help guide the reader’s eye to where a section begins and ends, and also offer visual rest between content sections.

Factors you need to consider to develop an effective typographic hierarchy are type size, typeface choice, weight, color, capitalization, and style. Each one plays an important role in creating highly readable and user-friendly content.

Type size

Type size is one of the essential instruments that help create hierarchy on a page. Readers' eyes are usually drawn to the largest type first and then move on to other elements. A good rule of thumb is to "work from the page up" and start with the body copy, as it occupies the most space. Then you can go up or down in type size to choose what's best for other types of copy.

When selecting font sizes, consider the visual presence of the typeface, the context of the piece, or just go by personal taste. A good headline to body text ratio is 2:1.^[1] However, there are no strict rules — it really depends on your style. You can also create a type scale using type scale generators like the Material Design generator. It offers a system of font sizes and styles that you can use for different text categories.

Carefully crafted type scales create a cohesive typography experience. They communicate hierarchy differences in font weight, size, letter spacing, and case.

Type weight

Type weight helps add contrast to headings to lead readers down the page in a structured way. When specifying header size, be sure to choose your weight accordingly and vice versa. The weight of the font will help you select the best size range to use it at for optimal readability.

The rule of thumb here is, the thinner or thicker your type is compared with the regular font style, the larger it needs to be. Weights closer to 'regular' have a more balanced stroke-to-space ratio. If you use a small size for an extremely thin typeface, the strokes will practically disappear against the page or the screen. Extremely thick typefaces aren't suitable for smaller copy sizes either — mainly because the counters will close in.

When using extra thick or thin fonts, make sure it resides higher in the hierarchy at a larger size. This will improve both legibility and readability.

Type style

Type styles like bold or italic help add emphasis to a heading. When formatting your headings, the emphasized elements should reinforce the hierarchy.

Applying bold type style to a larger or different font helps headings stand out from the body text. Italics work well for emphasis or contrast in the body text — but in a heading, they don't work so well on their own. However, together with large font size or bold type style, they add prominence to a heading and increase scannability.^[2]

Pro Tip! Some experts argue that italics shouldn't be used in headings, especially with bold, as it creates visual clutter.^[3] Experiment with styles to see what works better for your content.

Type color

Color is a powerful type hierarchy tool. It can either draw attention to or de-emphasize an element. For example, bright colors like red or dark blue make the type stand out. Subdued colors like gray will downplay the copy and make it feel less important.

It's crucial to use color in moderation. Too much color in too many instances can create visual confusion and undermine the goal of using color in the first place.

Type case

All-caps text — text with all the letters capitalized— can effectively draw attention and denote importance. It works especially well for short headings and subheadings. At the same time, all caps text is more challenging to read than regular lowercase text.

As most of the text we read is lowercase, lowercase is more familiar and legible to us. Research also suggests that the varied shapes of lowercase letters help our brain recognize words more easily.^[4] Capitalization homogenizes these shapes and leaves a rectangular contour.

All caps are sometimes suitable for headings shorter than one line, headers, footers, captions, or other labels.

Don't combine too many elements

Using too many elements to demarcate headlines creates visual clutter and increases cognitive load. Choose no more than 3 instruments to format your headings: font weight, size, style, color, or case.

Sometimes designers feel that they need to make different level headings visually distinct. This might be a sign that you are using too many heading levels. Try to limit yourself to 2-3 levels — headings that announce every topic, subtopic, mini topic, and micro topic are exhausting. Readers should be able to orient themselves from the headings. With more than three levels, that task becomes confusing.

Start with your body size

Whether you use a type scale or create your own size contrast, start with the size of the element that takes up the most space — the body copy. Body type design has the biggest influence on the legibility of the text and the overall appearance of the document.

While optimal text size depends on the typeface, avoid setting your body text size to less than 16px. This is the minimum size recommended by the Web Content Accessibility Guidelines for body copy. In the past, 12px was a more commonly used starting size, but it can be uncomfortable to read for long periods or on certain devices.

After establishing the body font size, decide how many hierarchy levels you need. As a general rule, a design should include 3: body text, subheading, and heading. From there, consider if extra levels like captions, pull quotes, meta information, or others are necessary.

Size of your smallest heading

When creating type hierarchy, make sure to set up at least 4 heading levels. The Web Content Accessibility Guidelines recommend that the h4 be the same size as the body text, although set apart through other style choices.^[5]This results in a more appealing hierarchy.

But why design so many heading levels if the best practice is not to exceed 3 levels? Extra heading levels can come in handy in products where designers don't have full control over content that will be added later on. If content becomes more complex in the future, more heading levels might be needed.

While type scales come with all h1-h6 heading styles, h5 and h6 are rarely used. Their primary use case is long texts with complicated structures, like technical and legal documents. You can design these levels but keep in mind that you most likely won't need them.

Smaller type elements

Text size is one of the critical instruments needed to communicate typographic hierarchy. Headings should be more prominent than the body copy, and the body text size should be bigger than the secondary text size. Secondary text elements include captions, lesser labels, bylines (credit lines for the authors of an article), and other meta information.

Secondary text should be at least 2px smaller than the body text, but still easily readable. The size contrast should be strong enough so that users don't confuse secondary information with regular text. To further drive your point, add color contrast — for example, by using a lighter shade of gray. This will communicate lesser importance more clearly.^[6]