Font For Thoughthome

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.

I am a self confessed font-fanatic! I currently have 1,100 installed, and still find myself trying to find 'just the right one' and inevitably installing more. I am currently studying teaching, and so my focus is really fonts that might be useful in that context. I post fonts in loose categories (see that Font Themes tab above?), so have fun.
Try this web font now! Enter your text and click the 'Change Sample Text' button. 72 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 60 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
Making the web more beautiful, fast, and open through great typography.
EVERYTHING IS PERSONAL. INCLUDING THIS BLOG. Train of Thought.

Hairline thin light regular medium bold heavy black fat.

PDF Bonus: This article is 3,104 words. Click to download the PDF so that you can reference it moving forward.

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).

STEP 1:We perceive a font
STEP 2:We activate PERCEPTUAL associations
STEP 3:We activate DIRECT associations
STEP 4:Activation spreads to related nodes
STEP 5:We combine the activation into a collective meaning
STEP 6:We compare the collective meaning to the context
STEP 7:We form our evaluation based on the degree of fluency

Part 2: Which Font Traits Should You Choose?

In this part, you’ll learn specific findings from research. You’ll learn which font traits (e.g., serif vs. sans-serif) are more more effective in certain contexts.

PART 1: How We Subconsciously Evaluate Fonts

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.

If you’re a newb here, then watch my quirky video about spreading activation:

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. 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:

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:

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.

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)

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.

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:

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.

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.

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:

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…

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…

PART 2: Which Font Traits Should You Choose?

Fonts differ in their perceptual traits. For example:

This section explains which traits perform better in certain contexts. If you want more detail, Henderson et al. (2004) and Li (2009) are helpful references.

Serif vs. Sans-Serif

Serifs are slight projections at the end of typefaces.

Designers love debating serifs vs. sans-serif fonts. Based on the research, though, it seems counterproductive. Other traits play a bigger role.

Nonetheless, here are some findings:

Serif Fonts Are More Readable Via Print

Well…supposedly. Some designers claim that serifs help guide the eye flow:

“Roman typefaces are more legible because the theory states that serifs assist in the horizontal flow of reading and eye movements.” (De Lange et al., 1993, pp. 246)

But I’m not convinced. We don’t read text in smooth patterns. Our eyes jump across lines of text— in movements called saccades (see Becker & Fuchs, 1969).

Since the movement is jerky, the “eye flow” claim seems like a myth.

Sans-Serif Fonts Are More Readable Via Screens

This finding seems more plausible.

Computer screens display information through a pixelated grid. Due to that box-like structure, a serif may be less identifiable.

With today’s technology, it shouldn’t be an issue. But it might play a role if you’re working with very small fonts.

Serif Fonts Convey Elegance and Rationale

Generally, serif fonts are more effective for formal or scientific contexts.

In one study, people evaluated scientific text more favorably when the font contained serifs (Kaspar et al., 2015). Other research suggests that serif fonts seem more elegant and beautiful (Tantillo, Lorenzo-Aiss, & Mathisen, 1995).

Sans-Serif Fonts Convey Informality and Innovation

Conversely, people perceive sans-serif fonts to be more informal and innovative (Tantillo, Lorenzo-Aiss, & Mathisen, 1995).

Light vs. Bold

Light Fonts Convey Beauty and Femininity

I explained the reason in this section.

Medium Weight Fonts Are Most Readable

Luckiesh and Moss (1940) researched the optimal weight for readability. They displayed “Memphis” in different weights, and they found that medium weights were most readable:

Bold Fonts Convey Power and Masculinity

Researchers argue that bold fonts convey an extreme connotation:

“Bold can be made to mean ‘daring’, ‘assertive’, or ‘solid’ and ‘substantial’, for instance, and its opposite can be made to mean ‘timid’, or ‘insubstantial’. But the values may also be reversed. Boldness may have a more negative meaning. It may be made to mean ‘domineering’, ‘overbearing’.” (Van Leeuwen, 2006, pp. 148)

Lieven et al. (2015) also explain a connection between heavy typefaces and masculinity. Since people associate a bulky stature with men, bold fonts match that visual trait.

Rounded vs. Angular

Rounded Fonts Convey Comfort, Softness, & Femininity

Bar and Neta (2006) published a paper called, “Humans Prefer Visual Curved Objects.” They found that…well…humans prefer visual curved objects. Angular shapes trigger an evolutionary threat:

“…sharp transitions in contour might convey a sense of threat, and therefore trigger a negative bias…” (Bar & Neta, 2006, pp. 645)

Now, if context were irrelevant, then people would prefer rounded fonts over angular fonts. However, context DOES matter. As I explained, appropriateness is important.

That said, rounded fonts are more effective for domains related to:

Softness or comfort (Jiang et al., 2016)
Femininity or beauty (Lieven et al., 2015)
Sweet foods (Velasco et al., 2015)

Angular Fonts Convey Formality, Durability, & Masculinity

Conversely, angular fonts perform better for:

Formal or official contexts (Brumberger, 2003)
Masculinity and durability (Lieven et al., 2015)
Bitter, salty, or sour foods (Velasco et al., 2015)

Simple vs. Complex

Simple Fonts Convey Directness

If your message is direct and straightforward, use a rigid typeface without any ornaments (Li, 2009). The simplistic font will match the simplistic nature of the context — thus increasing fluency.

Complex Fonts Convey Uniqueness

Processing fluency conveys abundance and familiarity. Usually, those traits are beneficial. But not always.

With unique products, familiarity is detrimental. You want some disfluency because it’ll reinforce the distinctiveness of your product.

In one study, people perceived more value in a gourmet cheese when the font was difficult to read (Pocheptsova, Labroo, & Dhar, 2010). The complex font became a signal for uniqueness — which was congruent and appropriate with the context.

Slanted vs. Straight

Slanted Fonts Convey Movement

Earlier, I explained why slanted fonts convey movement and speed (see Walker, 2015).

Straight Fonts Convey Stability

Likewise, straight fonts — with their rigid structure — convey stability and durability.

Lowercase vs. Uppercase

Lowercase Conveys Compassion and Innovation

Oosterhout (2013) examined branding and perceptual characteristics. She found that lowercase letters are particularly effective for “caregiver” brands that promote compassion and altruism. She also found that thin lowercase letters are congruent with “creator” brands that emphasize innovation.

Uppercase Conveys Power and Strength

Oosterhout (2013) also found that uppercase letters are effective for “hero” brands that convey qualities related to energy, courageousness, and focus:

“BWM, Diesel, Duracell, Nike and Sony are also using capitals in their word marks, to express their power and strength.” (pp. 39)

Mixed Case Letters Are Most Readable

Garvey, Pietucha, and Meeker (1997) studied legibility in road signs. They found that mixed case letters are most readable.

They proposed two reasons:

EXPECTATION CONGRUENCE: People expect to see road signs in mixed case. Thus, they process words more easily when the format is congruent with their expectations.
GREATER DISTINCTION: Uppercase letters share the same height, thus creating a rectangular block of text. Because mixed case letters are different heights, people perceive more distinction between letters.

Separated vs. Connected

Separated Fonts Convey Fragmentation and Individuality

When letters are separated, fonts convey the perception of individuality:

“[connectivity] has its own metaphoric potential. External disconnection can suggest ‘atomisation’, or ‘fragmentation’, and external connection ‘wholeness’, or ‘integration.” (Van Leeuwen, 2006, pp. 149)

Connected Fonts Convey Unity and Collectivism

Likewise, connected letters portray the perception of closeness

Connected fonts aren’t necessarily cursive. The letters simply need to touch.

Condensed vs. Extended

Condensed Fonts Convey Tightness and Precision

Earlier, I mentioned that a condensed font performed better for an ad promoting a “slim” cell phone (Kang & Choi, 2013). That’s because of the perceptual overlap:

“Maximally condensed typefaces make maximal use of limited space. They are precise, economical, packing the page with content. Wide typefaces, by contrast, spread themselves around, using space as if it is in unlimited supply.” (pp. 148)

Extended Fonts Convey Spaciousness and Relaxation

Conversely:

“Wide typefaces may also be seen in a positive light, as providing room to breathe, room to move, while condensed typefaces may, by contrast, be seen as cramped, overcrowded, restrictive of movement.” (Kang & Choi, 2013, pp. 148)

Short vs. Tall

Short Fonts Convey Heaviness and Stability

Font height resembles our metaphorical conception of gravity:

“The meaning potential of horizontality and verticality is ultimately based on our experience of gravity, and of walking upright. Horizontal orientation, for instance, could suggest ‘heaviness’, ‘solidity’, but also ‘inertia’, ‘self-satisfaction’” (Kang & Choi, 2013, pp. 149)

If you need to portray something as durable or immovable, a short font might work well.

Tall Fonts Convey Lightness and Luxury

Likewise, tall fonts convey lightness and quickness. The meaning can also extend to metaphorical associations of aspiration and ambition (Kang & Choi, 2013).

Other research has linked verticality with luxury (Van Rompay et al. 2012). If you need to portray a luxurious product, a tall font might be a good choice.

PART 3: Putting It All Together

I threw a ton of info at you. But you can use this article as a reference guide. Feel free to download the PDF so that you can reference it moving forward.

Or if you need to choose a font quickly, then use the table below (which I adapted from Henderson, Giese, & Cote, 2004). Just look for a group of traits that describe your context. Then choose a font with similar visual characteristics.

Want some more content? My other articles expand on the cognitive aspects of design and linguistics. You might enjoy:

There are so many components to a killer website design. But all too often I see people overlook minor details, like typography.

I know what some of you might be thinking. How important can a website’s font really be?

Believe it or not, something as simple as choosing the right font can have a major impact on conversion. Plus, website fonts affect the overall appearance of your site.

Now it’s unlikely that you’ve been on a website and thought, “Wow! I absolutely love this font!”

This just isn’t something that our minds are trained to look for and I’m not expecting you to find a font that’s going to “wow” your website visitors. But, I can guarantee that you’ve been on websites that have fonts that were generic, unappealing, difficult to read, or felt out of place. You obviously don’t want people to have that impression of your website.

Do You Need Help With Website Design?

Get help with designing your website or blog today.

Why your website font matters

Here’s something to consider: different website fonts can change the reader’s perception of a particular topic.

Errol Morris conducted a survey in an article published in The New York Times in 2012. He included a passage from a book that claimed we live in an ear of unprecedented safety, and followed the passage up with two questions:

Is the claim true? (yes or no)
How confident are you with the answer? (slightly, moderately, very)

As it turns out, Morris didn’t care about anyone’s opinion. He just wanted to know if the font could influence their answers. Forty thousand people unknowingly participated in this experiment. While everyone read the same passage; they did not all see it in the same typography.

Check out these results.

This graph shows all of the respondents who agreed to the first question. Morris took their levels of confidence in the second question and assigned a weighted value to each response.

In doing so, it’s clear that there was a difference between how confident people were in agreeing with the claims being made based on the font they were presented in. Now let’s look and see the results of respondents who disagreed with the passage.

Compare the two graphs. Do you notice any similarities?

As you can see, the Baskerville font was ranked highest for weighted agreement and lowest for weighted disagreement. Comic Sans font ranked lowest for weighted agreement, and ranked high for weighted disagreement.

Based on this data, Morris was able to conclude that fonts can influence the way people perceive information. Basically, the typeface can actually affect the credibility of your website.

In short — yes, website fonts matter.

The best Google Font pairings for 2021

You don’t want to have the same font everywhere on your site; that’s too boring. Mix it up! But make sure you pick fonts that go well together. I created this guide to help you do just that.

There are plenty of platforms for finding free fonts, but Google Fonts is my favorite. I identified the top Google Fonts pairings for 2021. So check out my list, and pick out a combination that works best for your website.

Open Sans and Roboto

The header of this screenshot is Open Sans semi-bold. The paragraph below it is Roboto regular. I think the semi-bold header just ads a bit more punch than the regular weight of Open Sans, but it’s fine if you go with that option as well.

Font For Fonto

The reason why these fonts work so well together is because they are both crisp and extremely legible.

You’ve got lots of different options here to consider for your website design. This combination could be used to convey the value proposition on your homepage. Use the Open Sans header as a point of emphasis, and then elaborate on the subject using Roboto.

These fonts work well together if you swap them as well. You could use Roboto as the header, and Open Sans for the paragraph. In this case, I’d recommend going with Roboto medium, and Open Sans regular.

Playfair Display and Montserrat

This font combination works best for shorter text on your website. I wouldn’t necessarily use it on a blog post or something like that.

However, this pairing is perfect for a product title and product description, especially for ecommerce shops in the fashion industry. The lighter weight font, like Montserrat light, gives the text a certain level of elegance that fits with a luxury brand persona.

Interestingly enough, if you swap the two and use Montserrat as the header, the persona changes to something that feels futuristic or techy. That combination can work well for some of you who are promoting a game, or even on a landing page to download your mobile gaming app.

Either way, these two fonts work well together. It depends on the theme and overall message that you’re going for on your website.

Lora and Alegreya

Lora bold is strong and legible, which is why it’s perfect for title pages. While the typography is powerful, it’s still friendly and inviting.

Alegreya regular compliments Lora really well, especially when used for captioning images.

While Alegreya is definitely legible, it can be challenging to read for long stretches, which is why it’s better for short text like captions or quick descriptions. I would not recommend experimenting with any other variations of Alegreya. Adding weight or italics to this font loses the legibility.

Now if you swap their positions, Alegreya bold works fine for title and header text. Lora regular is legible, so you could consider using it for longer text. I think this combination would be perfect for something like a customer testimonial or short case study.

Merriweather and Lato

Merriweather light and Lato regular is a very clean and professional combination.

It’s a popular choice because the options are so versatile. Merriweather light is modern, tasteful, and appealing. When it’s followed up with text written in Lato, the pairing feels trustworthy.

I’d recommend using this combination on your homepage. For those of you who have a design that involves scrolling to learn more information, this text combination will work perfectly. I’m picturing a website visitor scrolling down your home screen, seeing an image on the left side of the page and this font combination on the right. When they continue scrolling, the next image will be on the right, and the text will be on the left.

If this sounds like your current design, definitely consider using this combination to add a touch of professionalism to your content.

Amatic SC and Josefin Slab

The font combination of Amatic SC bold and Josefin Slab italic is definitely not for everyone. I can’t say that I would recommend it to the majority of websites, but it’s an ideal combination for artsy websites. If you’re a musician, painter, or photographer, these fonts can be used sparingly on your pages.

The key here is to make sure that the text has plenty of space to breathe. I’d recommend using it against white or very light backgrounds. So check out my post on the top trending website color schemes of 2021 as well.

If you sell ceramics or sculptures, this font can be very appealing to your audience and fit nicely with the overall theme of your business.

Just make sure you don’t go overboard. Using too much of this on the screen is unappealing and challenging to read. So pick something else for longer blocks of text, such as your biography or about me pages.

Cinzel and Raleway

Cinzel is a bold font (no pun intended). It’s all capital letters, which makes it more suitable for short text as opposed to long blog posts or things of that nature.

It’s complemented really by a font that’s a bit more traditional, like Raleway. These two fonts are perfect for websites in the food and drink industry.

You could consider using this to spice up your online menu. Have the menu categories in Cinzel black, the meal titles in Cinzel bold, and the description of the item written in Raleway regular.

If you really want to be unique, you can swap the two and use Raleway for headings and Cinzel for the body text. This could work well for local coffee shops that update their website with daily specials or weekly brews.

PT Sans Narrow and PT Sans

PT Sans Narrow and PT Sans is a classic combination. This versatile choice will work well for nearly any website in 2021.

Since both fonts are so legible, you can use it for text in short-form, as well as long-form content such as blog posts.

I like these fonts because they are easy to read, but not too generic and boring. PT Sans Narrow and PT Sans are inviting, so consider using them on home screens and landing pages.

How to pick the best website fonts

Now that you’ve seen some of the best Google Fonts combinations of 2021, how can you decide which one is best for your website?

The first thing you need to do is determine what type of content the font will be used for. Decide if the fonts are for your blog, homepage, landing page, product description, or navigation menu.

You’ll also want to consider the type of business you have, as well as the audience you’re targeting. Does the font need to be professional? Or do you have some room to be a bit unique?

The key to pairing two fonts together is contrast. The fonts should be different enough that each is distinguishable, but not so different that the reader is distracted.

Font For Vont

You may want to use a few font combinations on your website, but don’t go overboard. Keep it simple. Each page should just have two fonts; three at most. If you want to use more, consider using variations of the fonts already on the page (light, italic, medium, bold, etc.) instead.

Conclusion

Fonts are important, so it time to get rid of the default. Google Fonts is one of the best resources for free website fonts. The platform has some of the top site fonts that go together.

Open Sans and Roboto
Playfair Display and Montserrat
Lora and Alegreya
Merriweather and Lato
Amatic SC and Josefin Slab
Cinzel and Raleway
PT Sans Narrow and PT Sans