The classic typographic scale from The Elements of Typographic Style are familiar to most designers as they tend to be the defaults most word processing programs offer when selecting font sizes. Most base their scale on the size of the body text and expand from there. But these are only a starting point, and designers should feel free to experiment with different weights and styles while deviating from these traditional scales. Traditional typographic scales exist to help designers get started. Captions should generally be less prominent than body copy, and pull quotes should be somewhere between body copy and subheadings. It should go without saying, but headings should be more prominent than subheadings, which should be more prominent than body copy. These could include captions, additional subheadings, pull quotes, and meta information (for things like authors or dates on an article).įrom there, it’s key to figure out how to distinguish between the different parts of the hierarchy. From there, it’s up to the designer to consider additional levels that might be necessary. As a general rule, every design should include three levels of hierarchy: heading, subheading, and body text. One of the first things to consider is how many levels of hierarchy a design should have. But just knowing what goes into creating a hierarchy alone won’t necessarily help designers create an effective hierarchy. How to Create Typographic Hierarchy (and Visually Organize Your Design)ĭesigners have a lot of options when it comes to creating a typographic hierarchy. Setting type outside of the regular margins of a page can also make that type stand out within the hierarchy of a page. Centering type, for instance, tends to make it stand out. The positioning of headings and subheadings, along with other type that a designer wants to stand out, can have a lot of impact on where type falls within a hierarchy. While capitalizing body text is generally not a good idea from a readability perspective, using uppercase characters in headings or subheadings can help differentiate different headings or other type.

Instead, designers should use easily distinguishable sizes, weights, and styles to easily create contrast between things like headers or body text.Ĭase.

A difference of only one or two points in type size won’t create enough contrast to make the hierarchy apparent to most users. Beyond contrasting colors, the contrast between different type sizes, weights, and styles is also key to creating typographic hierarchy. Creating more contrast between type and it’s background can also add to typographic hierarchy.Ĭontrast. Even using lighter and darker shades of a given color can create a more distinct hierarchy. Color is often overlooked as a way to create a hierarchy, but it’s a fantastic option. Making a typeface bolder or thinner is another easily recognizable way to create hierarchy that’s easily identifiable even by non-designers.Ĭolor. But size can become a crutch when there are so many other options to create hierarchy. Bigger = more important, smaller = less important.

And for good reason: It’s immediately, easily identifiable by readers. Size is generally the first thing new designers turn to when trying to create typographic hierarchy. There are a variety of things that make up typographic hierarchy on the web. Typographic hierarchy shows the reader which information to focus on-which is most important and which is simply supporting the main points. On the right, it’s immediately apparent that there is a hierarchy to the information being provided.

The same information is being conveyed on both sides, yet on the left, it’s impossible to tell that there is a header, subheader, and body text.

Photoshop header text styles