Patterns in Design: Typography
One of the guiding principles you should remember when designing anything is:
“The human brain likes patterns.”
When I say that, I don’t mean that we like paisleys or flannel; I’m saying that our brains latch onto repetition. Here’s a real-life example:
Let’s say I have a quarter. What are the odds I get heads when I flip it? 50-50 – even odds. What about the next time? The next time? The point is, that no matter how many times I flip the coin, I always have the same chance of getting heads and the same chance of getting tails.
But, in real life, when you flip ‘heads’ three times in a row, most of us would bet on tails ‘because it’s due.’ In reality, nothing about the pattern of three ‘heads’ in a row has any bearing on whether the next one is heads or tails. Our brains latch onto patterns, even when there isn’t one there!
How do we use this in design? Simple. The more patterns we repeat in our design, the more our audience ‘figures out’ what we’re doing. The more you can figure out a design, the easier it is to use. Now, how do we apply that to typography?
One of the simplest, and most repeated examples of bad typography choices is the constantly-changing font. I just received a promotional email earlier this week that included 7 different fonts. I can tell you from personal experience – it was not a good-looking email. I spent most of my time reading the email thinking ‘why is this so strange?’ By keeping a consistent font throughout a design, we cause less confusion with our audience. Our brains calm down because they can recognize the repeated choices.
At the same time, if your entire document contains only one font, pretty soon you’ll start to feel bored. There’s a fine line between calm and boring, and you don’t want to end up on the wrong side of that! So how do you spice it up? You choose a complementary font.
It’s very important to understand the idea of a ‘complementary font.’ To see this in exercise, check out the figures below. In the first graphic, your brain again is confused, and you may not be able to pinpoint why. In the second, there’s a clear distinction between the different pieces of text.
The reason the second figure is so much clearer than the first is this: the two bits of text in the first figure are from the same ‘family’ of fonts, the sans-serifs. One is Arial, the other Verdana. They’re so similar to one another, with subtle differences, that you’re more focused on the distinctions than the text on the page. By selecting one serif and one sans-serif (Times and Arial in this case), we create a clear difference between the fonts that’s easy to see. It calms the brain, while at the same time creating enough difference to make it interesting. Again, the most important thing to remember here is – create patterns the brain can easily identify, and your design will be more widely useable.
Try out the following ‘complementary’ font choices in your next design, and you’ll see it come together a lot more easily.
To have further conversation about font choices in design, try out our courses Web Design Theory, the Guided Web Design Lab, or the Guided Print Design Lab. You’ll be able to discuss directly with someone who has practical experience in the field.
