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.
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.
The basic unit of typographic hierarchy. Text of different sizes attract different levels of attention.
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.
Italicized letters draw attention is a less dramatic way than bolding. Because it's a subtle touch, this works well for tertiary type.
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.
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.
Contrast between any of these factors – size, weight, or colour – will attract attention. Contrasting typefaces for headlines versus body copy helps create hierarchy.
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.
Proximity can be a fast and simple way to convey meaning.
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.
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.
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.
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:
- 10 Typography Tips Every Designer Should Know – These tips deal specifically with kerning, the spaces between letters.
- Size Matters: Balancing Line Length and Font Size in Responsive Web Design – The title says it all. Check this out if you're curious about typography across different sizes of devices.
- 18 Super Quick Web Typography Tips for Newbies – If you need to learn a lot about typography in a little bit of time, this piece is for you.
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!