Jerry Cao explains how the content and context of what you're saying affects the look of your typography.
Combine copy and typography
We started this article explaining that a word's literal meaning and typographical meaning are two completely different things, but that doesn't mean they can't work together. A word's look and definition can complement each other when done right, heightening the intention beyond what each could accomplish on their own.
But word choice goes beyond mere meaning. When writing, think carefully about the lesser-acknowledged properties of words, such as:
Length — How many letters? How many syllables?
Sound — Rhyming can be an influential tool, so look for opportunities to use it.
Shape — Which letters make up the word? What is the word's outline?
Beyond the audience and design objectives, you also need to balance legibility with readability. Legibility refers to the design elements such as width of strokes, presence of serifs, etc. Readability, on the other hand, is how the content, font colour, legibility, leading, tracking, and all other elements combine to create an overall impression.
Decorative typefaces (like Calligraffiti below on the left) have poor legibility because they're designed to be glanced, not read. Meanwhile, serif typefaces like Crimson Text below on the right are much more legible and practical for content.
Select typefaces with traditional letterforms — The more ornamental and artistic the typeface, the higher the cognitive load as users will first need to visually process the font instead of interpreting the message.
Make sure the typeface has ample spacing — The tighter the tracking, the more the eye needs to fill the gaps between the shapes of letterforms. Users will need more time to recognize the form of letters, words, and sentences. Larger spacing allows the eye to catch up to the speed of the user's cognitive processes.
Select typefaces with large x-height — Short x-heights reduces legibility for some letters. If the x-height is larger, the openings for lowercase letters that look similar (like "c" and "e") are more distinguishable, which lets users scan and read more easily.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
Readability
A related concept to the F-pattern and Z-pattern, readability affects how much users actually want to engage with your content. Unless low readability is part of the message you're conveying, make sure to prioritize communication over style.
Let's take a look at an example below from graphic designer Douglas Bonneville's piece on how to select typefaces.
The version on the right features decreased font size, lightened colours, full justification, and some tweaks to the leading and tracking. As a result, it's much less readable.
In order to keep content readable like the example on the right, Bonneville again offers very practical advice:
Match the typeface to its role — Some typefaces are better for headlines, while others are more flexible and are still readable at smaller sizes. It's not a bad idea to pair a more fun font (like Knockout) for headlines with a highly readable font (such as Tisa or Proxima Nova) for the body copy and microcopy.
Set a "right ragged" text alignment to ensure proper spacing — Force-justified text leads to inconsistently spaced words, which increases friction since users need to "jump" from word to word as they complete sentences.
Set your line height greater than point size for multi-line copy — A line of copy is hard to visually track if the lines above and below it are too close. On the other hand, if the line spacing is too great, users might end up re-reading the same line more than once.
It's tempting to think of typography as an extension of the site's writing, but that's not accurate. Nor is it accurate to think that the two are completely unrelated. The truth is that both are separate fields, each with their own best practices; however, they two are always intrinsically linked, and so each should be designed with regards to the other one.
To learn more about content-first design, download the free e-book Web UI Design for the Human Eye: Content Patterns & Typography. The e-book offers practical advice on visual hierarchy, designing for readability, and creating visual language through typography. Design examples are also analyzed from 30 companies including Dropbox, AirBnB, Marketo, Hulu, and Evernote.
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 how to use mockups of all types and fidelities, check out The Guide to Mockups.
