What font should we use? Which size will be the most appropriate for the body text? Is that line spacing the best choice? The questions about typography appear every time a new website or blog is created. The bad news is that there are no simple, clear-cut answers to them. The good is that there are some general frames that can be used as an initial point of reference. We researched them and tested on the actual users in an attempt to answer the question: ‘How to ensure users a truly positive reading experience?’
Typography – The Basics
There are five main factors that have to be taken into account when it comes to the body text section on the website or blog. Let’s take a closer look at them.
1. Font Type
First question that usually appears when choosing font is which type will be more suitable: serif or sans serif? The difference is simple: serif fonts have additional decorative elements such as small lines or specific character parts, sans serif fonts don’t. (Well, the name suggests it: did you know that sans is an archaic word meaning without?)
Whether serifs have any influence on the online reading experience is disputable. Some claim that since they have been used in most books, people are more familiar with them. Others believe that the decorativeness of serifs makes them fuzzy and thus difficult to read on the web. That, however, shouldn’t be a problem on the high-resolution, modern day displays. The conclusion? Simply choose the type you like better.
2. Font Family
Yes, content is the king, but to be truly appreciated, it simply must be legible.If you’ve already decided to opt for serif or sans, the next thing to choose is the font itself. By opting for a given font, you actually choose the whole font family (all its possible variants such as bold or italics). No one will tell you which font family is the best, this is a purely subjective decision. However, there is one thing you should keep in mind when trying to ensure readers positive experience: the font must be legible in each of its variants. What it means in practice? No fancy decorations which distort the shape of the letters, no fonts whose characters are so close to one another that it’s hard to distinguish them (the space between characters is called kerning, by the way), and optimal weight – too bold makes the characters merge and too light strains the readers’ eyes.
Few fonts that we can recommend as legible are: Merriweather or Noto Serif, if you opt for serif fonts and Source Sans Pro, Lato or Sarine if you prefer sans serif.
One last thing that is worth mentioning: people get used to commonly used fonts. What we find familiar is automatically perceived as easier to read and comprehend, thus if a certain font is extremely popular, there’s a high chance readers will assess it positively. Popularity shouldn’t be a deciding factor, of course, but some research on present typographical trends won’t do any harm.
3. Font Size
The font size you should choose is dependent on the font itself. Some of them will visually appear bigger and some smaller, having exactly the same size. The optimal size is said to be somewhere between 14–25 pixels. Compare these:
Typographical factors are all dependent on one another. Test them as a whole.As you see the same font size looks completely different when the font is changed. So there’s no better advice than: use your eyes (and the eyes of at least few other people) to decide which size suits your readers’ needs best. And one more thing: what looks good on desktop, won’t be equally appropriate for mobile devices. You can start testing with around 14 pixels for mobiles phones and 16 for bigger mobile devices and personal computers with medium size screens. Generally, 25 pixels is where you should stop: too big font is as detrimental to reading experience as too small.
4. Line Length
It is believed that the optimal line length on the web should be in the range of 45-90 characters per line. Interestingly, though longer lines with 80-100 characters are generally read faster, those which have 45-72 characters are considered as more pleasant to read and look at. So the choice of line lengths seems to be dependent on your goal: do you want your readers to read fast or like the look and feel of the text.
Obviously in the case of mobile devices the line length has to be adapted to fit smaller screens so it would have to be shorter.
5. Line Spacing
Line spacing is absolutely crucial for positive reading experience. When the text lines are placed too close to one another, they tend to merge and strain the reader’s eyes. Too wide line spacing is equally inconvenient: not only do the text appear much longer than it actually is, but it also forces the reader to jump between the lines which affects the reading flow.
The optimal line spacing is said to be somewhere between 120% and 160 % of the font size. The choice would be dependent on the type and size of font you’ve chosen and, of course, the device that will be used for reading.
Does Theory Work Out in Practice? The Experiment
Ok, there are some general frames, but do they actually meet the readers’ expectations? That question kept bothering us so long that we finally decided we have to find the answer. That’s how the idea of the experiment came into existence. We’ve decided to use quantitative research that applied to social science methodology would give us the most sound result in this case. Below you’ll find a shortened, reader friendly version of the experiment’s description. If you’re a methodology or research freak and want to get more details or discuss some aspect, just contact us.
We’ve chosen a text and followed the general typographical guidelines to arrive at a basic version of the body text.
Font Type: Sans
Font: Source Sans Pro
Font Size: 18 px
Line Length: 60 characters per line (+/- 5% so 57-63 characters)
Line Spacing: 140%
With that as a base, we prepared different versions of the text and divided them into three pairs. In each pair one variable was being changed, the other remained fixed. Since font and its type seemed to be purely subjective, we focused in our experiment on line length, line spacing and font size. The text versions for three parts of the experiment looked like that:
Independent Variable: line length
Text 1A: 60 (+/-5%) characters per line
Text 1B: 80 (+/-5%) characters per line
Independent Variable: font size
Text 2A: 18 px
Text 2B: 24 px
Independent Variable: line spacing
Text 3A: 140%
Text 3B: 160%
The dependent variable in each of the three parts of the experiment was the positive reading experience.
Basically, each experiment looked like that: while seated on a couch, the participant was presented with the same text on two identical iPads. The lighting and conditions in the room were the same in each case. He/she had 5 seconds to take a look at both texts and choose the version they would prefer to read. No additional information about the experiment or the variables was provided. 32 participants aged 25-32 were tested that way in each of three parts of the experiment.
What Came out of It? The Results
I bet you can’t wait to see the results, so let’s skip the introduction, this time.
Let’s start with the line length. We must admit the results surprised us a bit. The theory lead us to expect the readers will prefer shorter lines. Surprisingly, the slightly bigger number of participants opted for 80 characters version. The difference is, however, that small that from the statistical point of view irrelevant. It means that the choice between 60 or 80 characters per line should be optimal for most users.
When it comes to font size, the situation is very similar. Though a bit more participants were inclined to choose bigger font, the result is statistically non-significant. This time, however, one more thing has to be taken into account: some of the participants may have been ashamed of admitting that they prefer bigger font. Unconscious fear of being assessed as having poor sight might have prompted them to choose smaller version. Though, it’s just a hypothesis and the preference of 24 px is slight, if you can’t decide between two font sizes, better choose the bigger one.
Some decisions are made unconsciously: no survey will give as sound results as testing.
Finally, line spacing. Here the difference was clear and statistically significant. Though, a considerable number of participants mentioned they see no difference between the two versions of the text, 75 % of them chose bigger line spacing. Interestingly, the smaller variant in our experiment was regarded as upper limit by many typographical sources we’ve researched. The conclusion? Sometimes testing can really save you from making a major mistake. Line spacing around 160% of the font size should significantly improve the reading experience.
What about Printed Version? The Second Phase of the Experiment
When the experiment was finished, there was one more thing that couldn’t get out of our heads. Namely: Would the results be the same if the text was printed and incorporated into mock-up, paper version iPads? It’s beyond any doubts that the experience of reading electronic texts is much different from traditional reading. But would it be reflected in the readers’ choice of preferable font size, line length and line spacing? Can an experiment on reading digital texts be conducted on their printed equivalents? We couldn’t leave that one unanswered. That’s why the second phase of the experiment was organized.
The rules were the same: 32 participants, the same environmental conditions and 5 seconds to choose one version of the text. The text was printed on 100 g/m² paper, incorporated into graphics representing the real size iPads and cut out. The variants were the same as in the previous experiment: the first pair of texts differed in line length, the second in line spacing and the third in font size.
Let’s see what happened this time.
In the case of line spacing, the results were virtually identical to the first phase of the experiment. Only one more person opted for a shorter line length in the case of printed version. Thus, as in the previous case, the difference in line length preference is statistically non-significant. It means that the choice of line length when in the range of 60–80 characters per line shouldn’t influence the reading experience, no matter if the text is printed or displayed on the screen. This conclusion is enforced also by the fact that many participants hesitated before choosing the preferred text, mentioning that it wouldn’t make much difference to them.
No matter how many sources you consult before, the results of user testing may still surprise you.The result regarding the font size really surprised us. Distinctly predominant number of participants chose 24 px font size. We didn’t expect it, to be honest. After reading numerous articles on the topic, we came to believe that printed texts usually don’t need such a big font size to ensure positive reading experience. The fact that the texts were presented on the mock-up iPads couldn’t have been irrelevant here. Despite being printed, the evaluation of the reading ease was apparently considered in the digital context. That’s a plausible explanation of the bigger font size preference but why don’t the results coincide with the first phase of the experiment? The hypothesis we came up with is that when presented with the real iPads, participants unconsciously took into account that it will be possible to pinch the screen and make the view bigger, if needed. That possibility is excluded in the case of printed text and hence the huge preference of 24 px font.
It’s time for the last variable we tested – line spacing. Here it went without bigger surprises. As in the case of line length, the results of both parts of the experiment, printed and electronic, were practically identical – bigger line spacing is preferred no matter of the text form. Though, again, many participants couldn’t tell the difference between the two versions of the text and remarked both looked equally easy to read, most of them chose the one with bigger line spacing anyway. As before, the difference is statistically significant, which clearly indicates that going below line spacing of 160% of the font size is risky.
Research Conclusions in a Nutshell
- Preference of line spacing and line length can be tested equally well on paper and on the display.
- The results of testing font size are different in the case of electronic and printed texts.
- When there is no potential possibility to enlarge the view, readers prefer bigger font sizes.
- Font size and line length are less significant than line spacing in the case of electronic texts.
- People often aren’t consciously aware of their typographical preferences, thus testing is better than asking.
How to Make Readers Happy
Choosing the right typographical pattern of the body text is more challenging that it may seem. Following the basic rules is a safe strategy and in most cases it should be enough not to put the readers off. However, if the positive reading experience is the top priority, there’s only one thing you can do to make sure your choices are correct: test your target readers.