Font Psychology - Part 1
Article by Nick Kolenda.
Every font has a distinct personality. But how can you identify it? This article will teach you the science and psychology of choosing fonts.
Welcome to a scientific resource on fonts.
Do you spend WAY too long looking for fonts? Do you have trouble finding fonts that “feel right” for your context?
Well, this article is for you.
I read 75+ academic articles on typefaces. And I compiled the actionable findings into this article. By the end, you’ll know how to decipher the “personality” of any font, so that you can choose the best font in any context.
PART 1: HOW WE SUBCONSCIOUSLY EVALUATE FONTS
Well, this article is for you.
I read 75+ academic articles on typefaces. And I compiled the actionable findings into this article. By the end, you’ll know how to decipher the “personality” of any font, so that you can choose the best font in any context.
PART 1: HOW WE SUBCONSCIOUSLY EVALUATE FONTS
In this part, you’ll learn the step-by-step cognitive process. You’ll learn why people associate personality traits with fonts (and how to identify those traits).
Let’s play a game.
Let’s play a game.
Among the fonts above, which is better for:
Fitness Class
Board Game
Makeup
Like most people, you probably chose C, A, then B.
But why?
They felt right? Seemed fitting? Looked good?
Sure. But WHY did those fonts feel right? Most people can’t articulate the reason because the mechanism occurs subconsciously.
So here’s the answer…
If you follow my content, you’ve heard me explain your brain’s associative network.
Your associative network plays a role in font perception. How? I summarized the steps in the following model:
Let’s look at each step…
Board Game
Makeup
Like most people, you probably chose C, A, then B.
But why?
They felt right? Seemed fitting? Looked good?
Sure. But WHY did those fonts feel right? Most people can’t articulate the reason because the mechanism occurs subconsciously.
So here’s the answer…
If you follow my content, you’ve heard me explain your brain’s associative network.
Your associative network plays a role in font perception. How? I summarized the steps in the following model:
Let’s look at each step…
STEP 1: WE PERCEIVE A FONT
You see a font…and that’s it. Pretty straightforward.
You see a font…and that’s it. Pretty straightforward.
If you want a deeper understanding, Koch (2011) explains the biological components of font perception (see pgs 17-27).
STEP 2: WE ACTIVATE PERCEPTUAL ASSOCIATIONS
Fonts contain various components (e.g., line, weight, size, orientation). When you see a font, your brain disentangles those perceptual components:
Big whoop, right?
Well…yeah. It IS a big deal. To appreciate the importance, you need to understand a crucial concept.
Look at the traits from the previous image:
Fonts contain various components (e.g., line, weight, size, orientation). When you see a font, your brain disentangles those perceptual components:
Big whoop, right?
Well…yeah. It IS a big deal. To appreciate the importance, you need to understand a crucial concept.
Look at the traits from the previous image:
Heavy
Thin
Small
Large
Loose
Tight
Notice something? Those traits are general adjectives. They describe stimuli outside of the font world. And that’s crucial.
Fonts share visual characteristics from the real world. If you want to choose an appropriate font, then choose a font that visually resembles your context:
Thin
Small
Large
Loose
Tight
Notice something? Those traits are general adjectives. They describe stimuli outside of the font world. And that’s crucial.
Fonts share visual characteristics from the real world. If you want to choose an appropriate font, then choose a font that visually resembles your context:
Here’s an example.
Kang and Choi (2013) created ads for a cell phone. When ads emphasized the “slim” nature of the phone, condensed typefaces performed better:
However, some ads referenced the elegant nature of the phone. In those cases, the opposing font performed better:
In both cases, the font matched the visual qualities of the product.
Kang and Choi (2013) created ads for a cell phone. When ads emphasized the “slim” nature of the phone, condensed typefaces performed better:
However, some ads referenced the elegant nature of the phone. In those cases, the opposing font performed better:
In both cases, the font matched the visual qualities of the product.
However, font traits can also be metaphorical. Suppose the ad emphasized the phone’s speed. Even though technological speed is intangible, we associate visual traits with general speed — such as a forward tilt:
“What artistic conventions are used to convey the motion of animate and inanimate items in still images, such as drawings and photographs? One graphic convention involves depicting items leaning forward into their movement, with greater leaning conveying greater speed.” (Walker, 2015, pp. 111)
“What artistic conventions are used to convey the motion of animate and inanimate items in still images, such as drawings and photographs? One graphic convention involves depicting items leaning forward into their movement, with greater leaning conveying greater speed.” (Walker, 2015, pp. 111)
Need to convey technological speed? Then tilt your font forward. Maybe add a slight blur. Incorporate traits that are visually related to speed.
It might sound far-fetched, but Lewis and Walker (1989) found that people identify “fast” related words more easily in slanted fonts.
It might sound far-fetched, but Lewis and Walker (1989) found that people identify “fast” related words more easily in slanted fonts.
STEP 3: WE ACTIVATE DIRECT ASSOCIATIONS
Conversely, direct associations refer to the aggregate combination of font traits — usually the font family.
“…[direct] associations refer to the influence of historical precedence on affective response to typography. The typeface Fraktur has many associations with Nazi Germany, and Helvetica is commonly associated with the U.S. government since it is used by the IRS on tax forms.” (Shaikh, 2007, pp. 21)
Those fonts acquire meaning through your semantic network. Whenever you see a font (e.g., Fraktur), you associate meaning — based on the context. That includes semantic meaning (e.g., Nazi Germany) and emotional meaning (e.g., disgust).
Whenever you encounter that font in a future context, you modify the original connections in your network:
Conversely, direct associations refer to the aggregate combination of font traits — usually the font family.
“…[direct] associations refer to the influence of historical precedence on affective response to typography. The typeface Fraktur has many associations with Nazi Germany, and Helvetica is commonly associated with the U.S. government since it is used by the IRS on tax forms.” (Shaikh, 2007, pp. 21)
Those fonts acquire meaning through your semantic network. Whenever you see a font (e.g., Fraktur), you associate meaning — based on the context. That includes semantic meaning (e.g., Nazi Germany) and emotional meaning (e.g., disgust).
Whenever you encounter that font in a future context, you modify the original connections in your network:
If the context is SIMILAR, you’ll STRENGTHEN the connections
If the context is DISSIMILAR, you’ll WEAKEN the connections
If the context is NEW, you’ll ADD new connections
That’s how fonts acquire meaning (see Shaikh, 2007). It’s a never-ending process that we’ve been performing our entire lives.
STEP 4: ACTIVATION SPREADS TO RELATED NODES
When you encounter a font, you activate the perceptual and direct associations in your network. In turn, the activation spreads to related nodes.
Suppose you see the logo for Avon — a women’s beauty company:
You’ll activate the node for that overall typeface and logo. Thanks to spreading activation, you’ll activate direct associations:
Where have you seen it?
Which topics do you associate with it?
How was your experience — good or bad?
In addition, you’ll disaggregate the perceptual font traits. Since the typeface is tall and thin, for example, you’ll activate those nodes in your network.
But wait…tall and thin? Aren’t those traits usually associated with beauty? Aha! Yes they are. When you see those perceptual traits, you’ll trigger an extra wave of activation toward the node for beauty.
Good job, Avon.
However, don’t jump the gun. At this point, you might be thinking: Well, if their node for beauty is activated, then people will perceive the font — or product — to be more beautiful.
It’s tempting. And I used to believe that explanation. When I published my article on advertising, I said:
“Activation spreads toward your node for beauty. That activation gives you a new temporary lens. With your concept of beauty more prevalent, you perceive stimuli in the immediate environment to be more beautiful.”
But that’s wrong. My bad. I deserve a punch in the face.
Font evaluation is more nuanced. In a few steps, you’ll see why that explanation is wrong.
When you encounter a font, you activate the perceptual and direct associations in your network. In turn, the activation spreads to related nodes.
Suppose you see the logo for Avon — a women’s beauty company:
You’ll activate the node for that overall typeface and logo. Thanks to spreading activation, you’ll activate direct associations:
Where have you seen it?
Which topics do you associate with it?
How was your experience — good or bad?
In addition, you’ll disaggregate the perceptual font traits. Since the typeface is tall and thin, for example, you’ll activate those nodes in your network.
But wait…tall and thin? Aren’t those traits usually associated with beauty? Aha! Yes they are. When you see those perceptual traits, you’ll trigger an extra wave of activation toward the node for beauty.
Good job, Avon.
However, don’t jump the gun. At this point, you might be thinking: Well, if their node for beauty is activated, then people will perceive the font — or product — to be more beautiful.
It’s tempting. And I used to believe that explanation. When I published my article on advertising, I said:
“Activation spreads toward your node for beauty. That activation gives you a new temporary lens. With your concept of beauty more prevalent, you perceive stimuli in the immediate environment to be more beautiful.”
But that’s wrong. My bad. I deserve a punch in the face.
Font evaluation is more nuanced. In a few steps, you’ll see why that explanation is wrong.
STEP 5: WE COMBINE THE ACTIVATION INTO A COLLECTIVE MEANING
In the previous step, the font activated related nodes in your network. At this point, you combine those activated concepts into a collective meaning for the font.
The collective meaning is a combination of semantic concepts (e.g., beauty) and emotional feelings (e.g., pleasantness). Because of the concoction of meaning, you often can’t articulate it. The font just “feels right” or it doesn’t…which is the next step.
In the previous step, the font activated related nodes in your network. At this point, you combine those activated concepts into a collective meaning for the font.
The collective meaning is a combination of semantic concepts (e.g., beauty) and emotional feelings (e.g., pleasantness). Because of the concoction of meaning, you often can’t articulate it. The font just “feels right” or it doesn’t…which is the next step.
STEP 6: WE COMPARE THE COLLECTIVE MEANING TO THE CONTEXT
Let’s revisit the explanation from my advertising article.
I explained that we associate beauty with tall and thin traits. Because of that connection, tall and thin fonts activate the concept of beauty (which will cause you to perceive stimuli to be more beautiful).
So…why is that explanation wrong? Well, consider the font, Fraktur — which was used for Nazi propaganda:
With the previous explanation, you should NEVER use Fraktur. Since people associate it with Nazi Germany, spreading activation would trigger negative emotions. And those negative emotions would transfer to the immediate stimuli.
But it doesn’t work that way. When you evaluate fonts, you consider the appropriateness of the font (see Doyle & Bottomley, 2004).
Once we generate the collective meaning, we compare that meaning to the context:
Let’s revisit the explanation from my advertising article.
I explained that we associate beauty with tall and thin traits. Because of that connection, tall and thin fonts activate the concept of beauty (which will cause you to perceive stimuli to be more beautiful).
So…why is that explanation wrong? Well, consider the font, Fraktur — which was used for Nazi propaganda:
With the previous explanation, you should NEVER use Fraktur. Since people associate it with Nazi Germany, spreading activation would trigger negative emotions. And those negative emotions would transfer to the immediate stimuli.
But it doesn’t work that way. When you evaluate fonts, you consider the appropriateness of the font (see Doyle & Bottomley, 2004).
Once we generate the collective meaning, we compare that meaning to the context:
If the meaning is CONGRUENT, we develop a POSITIVE EVALUATION
If the meaning is INCONGRUENT, we develop a NEGATIVE EVALUATION
That’s why you can use Fraktur in certain contexts (e.g., documentaries). It doesn’t matter if people associate negative emotions with it. Those negative emotions won’t tarnish their evaluation, as long as the font is appropriate for the context.
It sounds like common sense. And it is. But I needed to verbalize that step because the underlying mechanism is important.
So…what’s the mechanism? Why does appropriateness lead to a positive or negative evaluation? That’s our final step…
If the meaning is INCONGRUENT, we develop a NEGATIVE EVALUATION
That’s why you can use Fraktur in certain contexts (e.g., documentaries). It doesn’t matter if people associate negative emotions with it. Those negative emotions won’t tarnish their evaluation, as long as the font is appropriate for the context.
It sounds like common sense. And it is. But I needed to verbalize that step because the underlying mechanism is important.
So…what’s the mechanism? Why does appropriateness lead to a positive or negative evaluation? That’s our final step…
STEP 7: WE FORM OUR EVALUATION BASED ON THE DEGREE OF FLUENCY
We evaluate fonts —positively or negatively — through processing fluency.
When you process stimuli quickly and easily, it feels good. And you misattribute those positive emotions to the stimulus. And that’s the answer.
Suppose that you see the logo for Avon. That exposure will activate beauty-related concepts in your network (due to the perceptual and direct associations).
You’ll then compare that collective meaning to the context. Aha! Here, the context is beauty products. It’s congruent with the activated nodes. Because the concept of beauty is already activated, you’ll experience higher fluency:
In turn, that higher fluency will trigger positive emotions that you’ll misattribute to the context. The font will “feel right.”
Now, in that example, you processed the font and THEN the context. But the mechanism also works in reverse.
If you’re watching a documentary on World War II, Nazi-related concepts are activated in your network. If you THEN see the font Fraktur, you’ll process the font more easily because of the overlapping connections. That ease will make the font feel right.
And that’s it. That’s how we evaluate fonts. Still with me? Good.
Now that you understand the cognitive process, let’s apply it…
We evaluate fonts —positively or negatively — through processing fluency.
When you process stimuli quickly and easily, it feels good. And you misattribute those positive emotions to the stimulus. And that’s the answer.
Suppose that you see the logo for Avon. That exposure will activate beauty-related concepts in your network (due to the perceptual and direct associations).
You’ll then compare that collective meaning to the context. Aha! Here, the context is beauty products. It’s congruent with the activated nodes. Because the concept of beauty is already activated, you’ll experience higher fluency:
In turn, that higher fluency will trigger positive emotions that you’ll misattribute to the context. The font will “feel right.”
Now, in that example, you processed the font and THEN the context. But the mechanism also works in reverse.
If you’re watching a documentary on World War II, Nazi-related concepts are activated in your network. If you THEN see the font Fraktur, you’ll process the font more easily because of the overlapping connections. That ease will make the font feel right.
And that’s it. That’s how we evaluate fonts. Still with me? Good.
Now that you understand the cognitive process, let’s apply it…
Next time: PART 2: WHICH FONT TRAITS SHOULD YOU CHOOSE?
No comments:
Post a Comment