Skip to main content

The typographic secrets behind visual hierarchy

Elements of hierarchy in typography

Like other design fields, typography follows its own structural hierarchy. Knowing typographic hierarchy is like knowing how to use typography, specifically knowing how to give certain words priority over others.

Screengrab showing visual hierarchy

Courtesy of UXPin

Before we delve into the levels of typographic hierarchy, Jeremy Lloyd, Creative Director at Sparkbox, thoroughly deconstructs the dozens of factors at play in your text. By manipulating the fields below, you'll better control your typography, and thus better control where your users' eyes go.

Size

The basic unit of typographic hierarchy. Text of different sizes attract different levels of attention.

Screengrab showing visual hierarchy

Courtesy of UXPin

Weight

The thickness of the text, most easily increased through bolding. Although subtler than size, it's still a straightforward method of making your text stand out. Bolding is especially effective for adding weight to tertiary type.

Screengrab showing visual hierarchy

Courtesy of Optima Weights: www.w3.org/TR/css3-fonts/optimaweights.png

Italics

Italicized letters draw attention is a less dramatic way than bolding. Because it's a subtle touch, this works well for tertiary type.

Capitalization

Just like emails written in Caps lock sound like you're yelling, the same applies to web typography. Always be careful when capitalizing letters, because they appear disproportionately larger and pop into the foreground.

Colour

Now we're getting into the complex factors. Warm colours (red, orange, yellow) tend to attract more attention than cool colours (blue, purple), especially if warm-coloured text is set against a cool-coloured background. Colour contrast also matters, since saturated or bright colours jump out more than muted ones.

Screengrab showing visual hierarchy

Courtesy of UXPin

Contrast

Contrast between any of these factors – size, weight, or colour – will attract attention. Contrasting typefaces for headlines versus body copy helps create hierarchy.

Screengrab showing visual hierarchy

Courtesy of http://talkpr.com

Space

White space can make text appear larger (and therefore more readable). Lack of space makes text feel more cramped and smaller. Every space affects your hierarchy, from simple kerning to the relationship between words and the edge of the screen.

Position

Proximity can be a fast and simple way to convey meaning.

Screengrab showing visual hierarchy

Courtesy of UXPin

Orientation

Turning letters and words sideways, diagonal, or upside down adds to visual appeal. The effect creates surprising eye candy for users. This works especially well for adding emphasis to short words/phrases within primary text. Tilting, rotating to vertical, and other methods immediately focus the user on the affected text.

Screengrab showing visual hierarchy

Courtesy of http://zombies.epicmagazine.com/story/5937

Texture

As Carrie Cousins describes, texture is highly subjective, making it one of the hardest elements to master. This doesn't refer to the texture of the lettering itself, but of the texture created through the typographic patterns on the page. Each block of text produces its own pattern, so to create texture, break the pattern by changing any of the other elements. Apply sparingly, otherwise it becomes distracting.

Screengrab showing visual hierarchy

Courtesy of www.potbelly.com

For more details on the theories that govern typographic best practices, read Mandy Brown's article on the Adobe Typekit Blog. To check out some of the best examples of web typography, take a look at this gallery from awwwards.

Going further

We couldn't possibly fit all the expert advice on typography in just a single article. If you're interesting in learning more, take a look at the sources below:

Takeaways

Designers tend to be visual thinkers, so they embrace typography with open arms. If all visual elements of a web page design factor into the user experience, then of course typography will make a huge impact, especially on content-heavy sites.

It helps to keep in mind the different variations one can put on text, like size, weight, and the others mentioned above. Once you have a solid understanding of the different ways you can alter your typography, try implementing the experts' tips we compiled here. Don't neglect the language of typography: poor or lacking typography will be just as repulsive to readers as glaring grammar errors.

With typography and with actual writing, the rule is the same: learn how to speak the language.

Words: Jerry Cao

Jerry Cao is a content strategist at UXPin – the wireframing and prototyping app – where he develops in-app and online content for the wireframing and prototyping platform. To learn more about content-first design, download the free e-book Web UI Design for the Human Eye: Content Patterns & Typography.

Like this? Read these!