Simple Psych for Complex Marketers

This blog post is part of a series on how to use what we know about the human mind and its penchant for simplicity to make our marketing better, our designs more pleasant, and our lives simpler. If you’re coming across this series for the first time, you may also want to check out the rest of the content by clicking here.

Choosing and pairing fonts for your presence on the web doesn't have to be hard if you follow these simple, clear-cut rules.

Asking Google "how do I choose a font for my website?" will send you in a ton of directions, and your eyes might start to glaze over as you learn about things like kerning and tracking and grid alignment. Many will tell you that typography is a nuanced craft, combining art and science, but in hopes of simplifying all of that, we put together the most essential guidelines for choosing your font.

Rule 1: Start with the body

You may be inclined to start picking out snazzy heading fonts. We recommend you avoid this temptation. While headings are important for establishing visual hierarchy (more on this later) you'll want to deeply consider how your type looks in its most plentiful state, as it will largely contribute to how your site and content appears on the web in its first impression. Follow these guidelines:

Your body text must be legible. Robert Bringhurst, author of The Elements of Typographic Style believes this is one of the most important principles of durable typography.

Nothing too fancy: script and decorative fonts are too hard to read for extended periods. Stick with a serif or sans serif for your body.

Rule 2: Evoke emotion and energy

Your chosen font should draw the user in while also endowing your content with a subliminal tone and personality. This is a particularly helpful graphic to get your gears turning: (Source)

Rule 3: Establish visual hierarchy

In choosing your font sizes, use a modular scale. It's a mathematically derived ratio between size and it makes for attractive font size pairings. I'm a fan of the golden section and there's a really useful calculator for exactly this. Without visual hierarchy, your site's visitors won't know how to organize information. Check out the difference below: (Source)

Bad visual hierarchy.

Good visual hierarchy.

Rule 4: Less is more – 3 fonts, 3 sizes. Tops.

The way you emphasize your messaging should be consistent across your site, and if you need to add more emphasis, do so by increasing the weight and whitespace around the element. Failure to do so results in a cluttered experience: (Source)

Rule 5: Create contrast when pairing typefaces

This helps to create visual hierarchy (Rule 3). For example, say you use strong sans serif typeface as a heading, and a light, elegant serif font for your body, like the example below. (Source)

It's important to assign roles to your fonts. Here, by using the clean-cut, modern font League Spartan with its weight and size, you're assigning it the role of introducing umbrella pages and themes. Libre Baskerville Italic becomes your secondary heading to introduce specific topics and content, and Libre Baskerville takes the role of body.

By doing this, you're aiding the reader by allowing them to subconsciously organize information as it arrives, making for a more efficient and relaxed browsing experience.

Rule 6: Use the psychology behind color

There's an entire field dedicated to the psychology behind color. Let Adobe do the thinking for you. Explore their favorite color combos here. Make your own combo here.

Less is more - studies show that 5±2 colors on one webpage is the right range for a pleasant browsing experience. Don't let your fonts take up those colors.

Dark text on white background is easiest to read, but in general, aim for high contrast.

Use Google's color accessibility tool to check if your pairings work for the average eye.

Rule 7: Whitespace is your friend

The human eye likes having a place to rest as it scans pages. Use whitespace to emphasize a message and keep a webpage clean. Line height should be between 120% and 150% the point size. Line length should be around 100 characters long. Mailchimp uses whitespace wonderfully on their homepage:

Thought that was interesting?

Then you'll really dig our free guide to designing for clarity. Follow the link below to get it.