With so much of our precious time spent reading online, you’d think that brands, publishers, and companies would care more about how their words make readers feel.
Unfortunately, few of us take the time and effort to really dive into not just what we’re saying, but how we’re presenting our thoughts and opinions.
Seemingly small things like font and the spacing between letters can impact how we feel when reading online almost as much as the words themselves.
The right font choice, along with the absence of sidebars and popups, makes everything feel easier and better to read.
Just look at websites like Medium, Signal vs. Noise, and Zen Habits. Their presentation of content puts me at peace while reading, allowing me to fully focus on the stories being told without undo distraction.
Don’t know what I’m talking about? Here’s a look at 2 very different sites: Medium and Cracked:
Exhibit A) Medium.com
Exhibit B) Cracked.com
The Cracked layout is painful to look at. Your eyes squint and dart, constantly second-guessing what you’re reading and what you should be reading next.
If you spend the time writing good content that can help grow your business. You owe it to yourself (and your readers) to present it in the best way possible.
Let’s take a look at some of the science and psychology behind how certain typefaces and layouts make us feel, and how we can use this to our benefit.
Click here to join more than 45,000 creative entrepreneurs who get our weekly newsletter filled with essays on design, psychology, and building successful businesses.
How to choose the right font based on how we read
When we read, our eyes follow a natural pattern called a Scan Path.
We break sentences up into scans (saccades) and pauses (fixations). Here’s the Scan Path for a typical reader:
Your eyes typically move across a page for between 7-9 letters before needing to pause to process what you’re reading. As you scan a sentence, no useful visual processing is happening in your brain. Visual processing is completely dependent upon the information taken in when you pause.
So why does this matter?
Understanding the way we read is important for designing how words look because you can directly impact someone’s connection to your writing with the right font and layout.
Why the right font makes you feel good
When I set out to write this post, I wasn’t sure I’d find scientific backing for why we feel a certain way toward certain fonts.
I thought choosing a font was mostly art. That was until I came across a study by psychologist Kevin Larson.
Larson has spent his career researching typefaces and recently conducted a landmark study at MIT about how font and layout affect our emotions.
In the study, 20 volunteers—half men and half women—were separated into 2 groups. Each group was shown a separate version of The New Yorker: 1 where the image placement, font, and layout were designed well, and 1 where the layout was designed poorly:
The researchers found that readers felt badly while reading the poorly designed layout. Sometimes, this feeling would be expressed physically with a frown.
Meanwhile, the participants who read content from the good-reading layout, felt like it took less time to read and felt better.
People exposed to the well-designed layout were found to have higher cognitive focus, more efficient mental processes, and a stronger sense of clarity.
The researchers concluded that well-designed reading environments don’t necessarily help you understand what you’re reading better, but they do make you feel good, causing you to feel inspired and more likely to take action.
How to use fonts to design better content
The quality of your content is the most important thing, but how you present that content by choosing the right font and layout is a close second.
As French poet Paul Claudel put it, ‘The secret of type is that it speaks.’
So how can you design your words to help elicit positive feelings in people? Here’s a few techniques from typography experts that you might find useful:
1. Choose an anchor font
Type designer Jessica Hische recommends first selecting a typeface for the content that is most prevalent in your project (most likely your body copy).
This will be the typeface that you base your other font decisions on like headlines and subheads.
There’s four main categories of fonts to choose from:
Letters with short lines coming off the edges. Viewed as more formal and traditional. Best suited for print.
Letters without serifs. Viewed as informal and playful. Best suited for digital.
Resembles handwriting and often used in formal invitations. Not ideal for body copy.
Informal fonts viewed as original. Best suited for headlines but not body copy.
For reading on the web, it’s best to stay away from script or decorative typefaces. Most Script and Decorative fonts have low legibility which slows down your reading because you are busy trying to figure out what letters are.
You don’t want your readers asking, was that an ‘a’ or an ‘e’? with every word.
Decorative typefaces should be used for content that is meant to be seen at a glance, like in a logo, rather than read as multiple paragraphs in body text.
When choosing your anchor font, it’s usually best to stick with a Serif font or Sans-serif font.
Some typography experts recommend sans-serif fonts for reading online because the quality of screen resolutions is less than in print. But, as screen resolutions dramatically improve, Serif fonts are becoming easier to read on the web. Even content-heavy websites like Medium use a Serif font (probably to give off the vibe of a print editorial).
The most important thing with choosing a font is to make sure the letters are easily decipherable from one another so your readers don’t have to spend precious mental energy identifying letters.
There’s a trick that Hische uses to make sure your font choice is a good one. She recommends that you make your fonts pass the Il1 test:
2. Pick a font size bigger than 12pt
In 1929, researchers conducted a study called The Hygiene of reading where they tried to determine which font size would be best for reading. The study looked at 6pt, 8pt, 10pt, 12pt, and 14pt type sizes.
At the time, the researchers concluded that a font size of 10pt font is the most efficient for reading. But a lot has changed in how we consume content today compared to the 1920s.
As more reading shifts to digital and screen resolutions improve, the way we read content is changing.
Medium has one of my favorite reading environments online and they use a 22pt font size. Several of my other favorite websites have adopted a font size over 20pt for their content:
Signal vs. Noise: 22pt
Zen Habits: 21pt
While having a huge font over 30pt most likely wouldn’t make sense, many blogs are still trapped with a font in the 10pt-12pt range. If you’re using 12pt font, try increasing to 16pt font. If you’re using 18pt font increase to 22pt.
You can feel the difference.
3. Watch your line length
The line length is how far your sentences stretch across the page. And the ideal line length should be between about 50-75 characters.
Here’s an example of the longest line length from Zen Habits. It’s 78 characters, about 6.5 inches:
This line length has been shown to be most effective in helping readers move through their Scan Path.
If the line length is too short, your reader’s rhythm will break because their eyes must travel back to the left of the page too often.
A line length that is too long makes it hard to find where lines of text start and end. It can make it difficult for your reader to get to the next line without accidentally jumping to the wrong place.
Research shows that your subconscious mind gets a boost of energy when jumping to a new line (as long as it doesn’t happen too often) but this energy dwindles as you read over the duration of the line.
Here’s the line lengths from the sites mentioned above:
Medium: 75 characters
Signal vs. Noise: 76 characters
Zen Habits: 78 characters
4. Mind your spacing
Adequate spacing between letters is important for your readers to be able to move through sentences fluidly. The tighter your letters are together, the harder it is for people to identify the shapes that make up different letterforms.
Take a look at another example from Jessica Hische of the readability of Helvetica versus Avenir:
Hische recommends Avenir because of its more open spacing.
Proper spacing makes your readers feel good. Here’s a great tool that lets you see how different Google Web Fonts pair up together. Play around and see what feels right to you.
Packaging content the right way is important and knowing why we feel the way we do about the look of content will hopefully help next time you design a project.
As Aarron Walter, author of Designing for Emotion, writes,
“People will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.”
It’s important to remember that while there is a science connected to how your words are designed, no amount of good design can save bad content.
Write well first. Design well second.