Table of Contents
Designing with content is hard. It requires understanding the connection between psychology of design and the science of how we read. Unfortunately, a lot of us are working with content without knowing anything about it. It is no surprise, then, that readability and legibility of the content often suffers. Let’s change it today. In this article, we will take a look at seven most important and sometimes shocking facts every designer needs to know about how people read. In the end, you will also find seven best practices for great readability.
Psychology of design and how we read
In the last couple decades, our world went through amazing changes thanks to constantly evolving technology and improving living conditions. As a result, the literacy rates across the world increased significantly. It is safe to say that in, the terms of global population, rate of literacy among adult is higher than eighty percent. It is, therefore, no surprise that reading became one of the main forms of communication, if not the main. Still, there is a lot of theory about reading psychology of design is missing.
No.1: Capital letters are NOT more difficult to read
Have you ever read at least couple of articles or books about typography or psychology of design? Well, then you’ve probably heard that words written in capital letters are usually more difficult to read than words written in capital and small letters or just small letters. If not, here you have one article saying exactly that. The main argument used to support his theory is that we read by recognizing the shapes of the words and groups of words.
When you take a look at some words written only in capital letters, you will always see the same shape because all letters have the same height. On the other hand, when you take a look at word written either in capital and small or only small letters, you will see different shapes. Individual letters will vary in height. This variety contained in words using capital and small or only small letters is what is supposed to make reading easier.
Does this explanation sound plausible to you? I bet it does. However, there is a difference between something sounding plausible and something being scientifically proven. In psychology of design, I think, we should always prefer the later. Unfortunately, there is not a single scientific research that would verify this theory. This theory of “capital letters are more difficult to read” originated in 1886. The author of this theory called “word shape model of word recognition” is James Cattell.
Since then, there were couple of studies and theories disproving “word shape” theory by James Cattell. According to the latest scientific evidence, when we read we really recognize and predict individual letters. Then, we use these visual information and the context of the text to recognize the words. If you want to test this theory, take a look at article on livescience called Breaking the Code: Why Yuor Barin Can Raed Tihs. So, is text written in capital letters more difficult to read?
Well, yes. Text written only in capital letters is indeed more difficult to read. However, it has nothing to do with psychology of design or psychology in general. Words written only in capital letters are more difficult to read because we are not used to them. Just think about it. How often do you read text written only in capital letters? Probably not so often. The vast majority of text we read thorough the day is composed of both, capital and small letters. Therefore, we are more used to this style of text and our brain is more trained to read it.
The takeaway
First, people are more used to and “trained” to read text containing, both capital and small letters. People also perceive text written only in capital letters as “screaming” and even uncomfortable. Therefore, use text written in capital letters only in special occasions. Second, use text written only in capital letters for headings and situations when you want to attract people’s attention.
No.2: There is a difference between reading and understanding
When you read something it doesn’t mean you automatically understand it. Meaning, you can read research paper from start to finish without knowing what the paper is actually about. I know, this is not a secret related to psychology of design. It is also not anything new. By the way, if you want to increase the chance of understanding new information or concepts, connect them to information you already know. This way, your brain will not have to create new connections.
We briefly and indirectly discussed understanding of the text in previous topic, but now it is time to go deeper. Here is another secret from psychology of design related to reading. When we read some text, we are not reading every single letter in a word. We are even not reading all words. In many cases, we actually predict which letters or words will follow. And, the more information about the topic and context of the text you have, the easier this prediction and interpretation of the text will get. You can verify this by reading that article from livescience previously mentioned.
One quick side note. According to study done by Bartlett, and consequently supported by study done Anderson and Pichert, the amount of information we remember from reading is directly dependent on our opinion of the text. The conclusion of these studies is that our memory is very inaccurate because our memories are based on our pre-existing schemas or mental constructs. In other words, you are more likely to remember information that makes sense to you and your current knowledge. Information going against you knowledge is more likely to be forgotten.
The takeaway
First, if you want to help people remember the text, it has to be in accordance with their previous experiences, opinions on the text and the instructions you gave them. Second, to think that people will remember concrete information from the text is naïve. They will not. Third, make text easier to understand by using meaningful and descriptive headline. Fourth, always adjust the text to your target audience. If your audience is general public, use simple words and fewer syllables.
No.3: Pattern recognition helps us recognize different types of fonts
For a long time, almost since the invention of Gutenberg’s printing press, designers have been trying to find out which typefaces are better and more legible. The two main typefaces often discussed are serifs and sans-serifs. If you’ve ever worked on any design that required use of typography, you probably had to choose the right typeface and font or fonts for your project. Personally, I think that choosing the typeface and font is one of the hardest parts of design.
There are basically two groups of people. One group claims that sans-serif typefaces are more legible because these typefaces are simpler and, therefore, easier to read. The second group claims that serif typefaces helps people read the text because serifs help guide the eye from one letter to another. Since we want to base the psychology of design on science, let’s take a look at which statement is verified by research. The answer is … None of them.
If you want to base your decision on scientific evidence, you will get on the same place where you are right now. There were a lot of attempts made by designers and studies trying to finally find the absolute truth. All these attempts failed. The only conclusion researchers made is that there is no significant difference in legibility or reading speed between serif and sans-serif typefaces. As we discussed in Psychology of design pt1, our brain hugely relies on pattern recognition. This means that we will recognize letter if it matches the pattern stored in our brain, be it serif or sans-serif.
Another option we can use to choose the right typeface for our projects is focusing on emotions. Every typeface induces certain mood and associations. Designers are making typeface-related decision precisely on these two factors. For example, some typefaces look more traditional or historic and conservative while others look more modern and audacious. Also, some typefaces are more playful while others are more serious. In the terms of legibility, the difference is insignificant.
The only exception to this statement are decorative typefaces. The problem with some decorative typefaces, not all of them, is that sometimes the design of letters makes it hard for people to recognize what letter are they looking at. This also why one of the tips for legible typography is to use decorative typefaces only for short chunks of text. One example of relatively safe use of decorative typeface is in bigger headlines. In this case, the text will be still big enough to sustain sufficient legibility.
The takeaway
First, there is no real difference between serif and sans-serif typefaces. From the point of psychology of design, legibility and reading speed depends rather on specific font. Second, fonts that are overly decorative or too unusual can decrease people’s ability to recognize patterns which will result in lower reading speed. Third, when people have problems with reading specific font, they will transfer this feeling on the whole text. As a result, the text will be seen as being too hard to understand or follow (in case of instructions).
No.4: Font size does matter
By now, we know that it doesn’t matter whether we use serif or sans-serif typeface. What matters is font size of the text. Text with bigger font size will be more legible than text so small you will need a magnifying glass to read it. This doesn’t apply just to older generations. When you reach certain size of the font, people will start to complain regardless of the age. It’s also important to mention that some typefaces can be perceived differently although their size is identical.
Psychology of design has an answer for this illusion. The reason is different x-height of the font. The x-height is literally the height of small “x” in the font. Since different font families have different x-height, some letters will naturally look bigger than others, even though they are using the same font size. This is also why, when you compare two paragraphs using different font families with the same font size, they will look differently.
The takeaway
First, make sure to use font size that will keep the text readable for people from different age groups. Second, for typography on screens it is better to use fonts with big x-height. This will create the illusion of bigger text. Some of the newer font families, such as Verdana and Tahoma, were designed with big x-height. This makes these font families good choices for screens.
No.5: Text on screen is more difficult to read
Let’s stay with screens for a moment and discuss how psychology of design can affect health. Screens, eBook readers and paper all provide readers with different reading experience. Unfortunately, it looks like the text on screens is more difficult to read than text on the paper. The problem is that text on the screen is in constant “motion”. Meaning, computer screens are refreshing displayed content in specific frequency or rate.
Next problem is light emitted by displays. This causes our eyes to get tired. Paper has neither of these problems. Page of page doesn’t have to constantly refresh and it also doesn’t lit light right into our eyes. This is why you can read paper book much longer than on your computer. In case of eBook readers, the situation is better. The majority of eBook readers use special electronic ink that imitates the ink used in paper books. These readers also reflect light and doesn’t refresh text.
The takeaway
First, again, make sure to use sufficient font size for text displayed on the screen. Sufficient font size can decrease the speed at which eyes will get tired. Second, divide text into smaller paragraphs. A good rule of thumb is break the text after every five or six lines. Third, keep sufficient contrast between the content and background. If you are in doubt, use black text on white background. You can use contrast ratio to double-check yourself.
No.6: We read faster longer lines, but we prefer shorter
Have you ever thought about how many characters per line should you aim for in the text? I was dealing with this decision for a long time and did small research. The result was the golden rule of 66 characters mentioned in Typography in Web design article. However, there is much more than that that can psychology of design tell us when it comes to line length and how many characters should be line.
There was couple studies that set out to find the optimal number of characters per line in relation to reading speed and attractiveness of the text (or design). One of these studies was done by Mary C. Dyson. This study is called How physical text layout affects reading from screen. The result of this study was that, from the point of reading speed on screen, the optimum number of characters per line is about 100. Wait, this is not the whole story. This study also revealed that people actually prefer text with 50-70 characters per line.
One theory why longer lines are better for faster reading is that longer lines allow to sustain better flow of saccades and eye fixation without any disruption. The issue is that every time you will get on the end of line, your eyes have to break the flow of saccades and fixations. Then, your eyes have to start and create this flow all over again on the beginning of the next line. Therefore, the shorter the line is, the more of these disruptions will occur.
The takeaway
This one is a little bit harder. You have to decide what kind of experience do you want people to get. People will prefer shorter lines and more columns from, mainly from aesthetic point of view. In the terms of reading speed, text with longer lines and fewer columns is a better choice. If reading speed is your priority, aim for 100 characters per line and one column. If reading speed is not important, keep aim for 50-70 characters per line and feel free to use couple columns.
No.7: Flushed left text is easier to read
Flush left, centered or justified text, that’s the question we have to ask on a daily basis. Let’s answer this question with using both, psychology of design and aesthetic. First, is it better to use left flushed aka ragged right or centered text? Left flush means text aligned along the left margin, i.e. left-aligned. The answer is flush left (ragged right) and it is based on how our brain works. Flushed left text is easier to read because as the eye travels to the end of the line, it immediately looks for consistent location for the beginning of the next line.
When we use flushed right (ragged left) or centered text, every line begins on different place. As a result, reader is constantly forced to look for location where the line begins. In case of longer paragraphs, this can get annoying. Therefore, we should avoid using ragged left (right-aligned) text. Wait, there is one exception where to use centered or ragged left (right-aligned) text is relatively safe. This situation occurs when you work with short chunks of text, three or four lines at max.
Imagine you are designing a landing page. There is section in the layout where you want to quickly describe the benefits of the product or service. Let’s say you want to implement one short column for every benefit, three in total. Then, you can use centered or ragged left (right-aligned) text because the text is short enough and potential reader will probably not be annoyed. For example, I used center text in “Our Process” section in Trinity template (see live preview).
Now, let’s answer the second question. Is it better to use ragged right or justified text? Quick answer is that it depends on two factors. The first factor are your skills. People skilled in typography can use justified text to create sense of symmetry, neatness and also formality. Another benefit of justified text is that it often allows you to use more text in the same place thanks to better use of space. Without necessary skills in typography, there is a chance that justified text will result in rivers (gaps between words that create vertical patterns).
The second factor is the amount of control you have over the medium. Less control over the medium and less “stable” the environment means that using justified text is a bad idea. Print is a medium that allows designers to have complete control. It is also stable environment – page will not change its size. Web is something completely different. We have only relative control over some properties of this medium. And, pages can change their size as infinitely.
Nothing is impossible. There is a chance to use justified text with amazing results also in less controllable medium such as web design. The question is whether it is worth designer’s time to test every possible resolution and create corrections. Also, think about how many media queries and additional lines of CSS will you need. All this time and space can be used in other areas of the project to test and fix more important issues.
The takeaway
First, if you are working on design for web, it is best to avoid justification completely. It is too time-consuming to test and fix every pixel. Otherwise, Justified text can create rivers. Client’s money can be spent on better places. Just stick to left-aligned text. Second, use centered or right-aligned text only if the text is short. Meaning, it doesn’t exceed three or four lines.
7 best practices for better readability
Let’s apply the findings to psychology of design and quickly run through couple of tips and best practices for achieving optimal reading experience on screen.
No.1: Choose fonts wisely
As we discussed, our brains are using pattern recognition to recognize letters and understand the text. The first thing you can do to improve readability of the content is choosing fonts wisely. Meaning, if you really want to use decorative fonts, use these fonts only for shorter text elements such as headings. One great way to use decorative fonts, without putting readability at risk, are big headlines and titles in headers and as overlay text for her images.
Another reason why it is better to use decorative fonts in text elements with bigger font sizes is that bigger font size increases the readability of the text. As a result, people will be often able to read the text even in case of overly decorated font. This can’t be said for example about body text. Using decorative fonts at this instance is, I think, equal to design suicide. There are too may factors that has to play right to ensure the font will not be harmful to the content and overall experience.
No.2: Use fonts to set mood and tone
When it comes to choosing between serif or sans-serif typeface, you are free to choose whatever you want. As we discussed in No.3, there is not any real difference between use of serif or sans-serif typeface in the terms of psychology of design. One way to choose the best font(s) for your projects is by thinking about what mood should the design evoke and in what tone should it communicate. You need to consider your target audience to make sure the font(s) are appropriate.
No.3: Limit the number of fonts
One of the biggest mistake, not in the terms of psychology of design, but in the terms of design in general, is using too many fonts. If there is a quick way to kill any design with potential, it is trying to mix together too many fonts. Unless you are building font catalog, I suggest that you limit the number of fonts per project to two at max. There is really no reason to exceed this number. If you choose font with a larger number of styles, you can create mind-blowing designs with just one font. In many situations, even two styles – normal (400) and bold (700) are enough.
No.4: Choose right size for body copy
Choosing the right font size for body copy is not just about psychology of design. It is about user experience, engagement and also business. The danger of text that is too small is that it will discourage people from staying on the website and reading the content. A good rule of thumb is making sure that the body copy is readable if you are, let’s say, 28 inches from the screen. This basically means that you should never go below 16 pixels on desktops.
I would even suggest that you set the font size for body text to 18 pixels. I currently use this font size on my blog. If you think that this is too much, take a look at some article on Medium. Medium is using 21 pixels for paragraphs. I think that it is better to make a mistake and choose bigger font size than smaller. Anyway, no matter what font size will you decide to choose, keep in mind that different fonts have different x-heights. Test the font with the content that will be used in the design and test on different devices. Font size that fits desktop may not fit mobile and otherwise.
No.5: Use appropriate line height
Working with line spacing (line-height in CSS) is another way that can help you significantly improve readability of the content. Line spacing is the vertical space between lines of text in paragraph. For most situations, it is a good idea to set line spacing to somewhere between 140 and 160 percent (1.4 and 1.6 in CSS). Keep in mind that this rule is not set in stone and you will have to experiment because different fonts will work better with different line spacing.
Let’s take couple fonts that are widely used on the web as an example and compare them in online type tester. Fonts I chose are Arial, Verdana, Open Sans and Georgia. Notice that all these font families have different x-height. Therefore, some font families, such as Georgia and Arial will look smaller than Verdana and Open Sans. This is also one of the reasons why you will need to adjust line spacing when working with certain font families. Luckily, the fonts we tried work very well with line spacing set to 150 percent (1.5 in CSS).
Is it safe to say that 150 percent, or 1.5, can be a gold mean we are looking for. Still, you should always double-check typography settings with your own eyes. Finding the right line space is, I think, more about intuition than science. It is possible that many designers are using this approach based on intuition when working with type. I’m not even sure whether there are any specific rules for line spacing in psychology of design or typography in general. Anyway, just make sure the gaps between lines aren’t too big.
No.6: Keep line length to 50-70 characters
Based on the scientific evidence we discussed, different line length will bring different results. Longer lines are better for higher reading speed and shorter for aesthetic impression. What’s the golden mean we should stick to? Assuming that people scan the page before reading the content, I would suggest that shorter paragraphs are better. This means that we should limit line length to 50-70 characters. If you want more precise number, you can experiment with the “66-character line” rule coined by Robert Bringhurst.
No.7: Keep typographic hierarchy consistent
Creating well thought and readable typography requires consistent typographic hierarchy. It also requires clearly defined relationships between typographic elements. Before you start designing anything, focus on creating style guide for typography. This style guide should contain styles for headings, body, labels, meta content, paragraphs, small text, bold text, captions, quotes, etc. Every typographic element you are going to use in the project has to have defined specific styling.
When your style guide is finished, you have to follow it meticulously. There is no place for exceptions. The main benefit of keeping typographic styles consistent is that it will help users understand the content and its structure. It will also help you create consistent user experience through the design. And, consistent user experience is one of the corner stones of psychology of design and one of the keys to build credibility. Design with better experience and higher credibility will always have higher chance of achieving higher engagement on the side of users.
Closing thought on psychology of design and how we read
Designing and working with content on professional level requires more than just knowing which fonts are currently hot and where to find them. It is about learning psychology of design and how it influences the way we read. There is a saying that rules (laws) are made to be broken. Why not. However, we should first at least learn about these rules before we attempt to break them just for the sake of breaking them. Your designs will be used by real people. Remember this and think about them.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
