How to set the correct line length and font size in web design

Published on: Updated: March 26, 2018

In this guest post from Ben Wilson, we learn about how to set the correct line length and font size for optimum readability.

Every now and then, we hear a lot about how responsive web design has become the “need of the hour”. There are several factors that contribute in making a responsive design successful, and the most important one is the readability factor.

Since more and more users are getting inclined towards using different devices to fulfill their reading needs, it’s important to deliver users a good reading experience on different device screens – be it a Smartphone, tablet, or a computer screen. This depends on two aspects: line length (also referred to as measure) and font size. While line length helps to improve reading experience, font size, on the other hand, is necessary to make it comfortable for the user to read content.

This post will explore how to maintain the correct line length and font size in your responsive design, so as to give users a great screen reading experience. But before that let’s first have a look at the common reading pattern that people follow to read web content.

How do people like to read?

Well, it’s obvious we read something to meet our needs: to gain some information, to find new ideas and to increase our knowledge base. For instance, you’ll to read some programming tutorials if you love to work with codes or want some coding help for your project. A lot of discoveries have been made on screen reading and one of the most famous ones is – the “F-Shaped Pattern” for Reading.

Jakob Nielsen a well-known web usability expert and co-founder of the company “Nielsen Norman Group” along with Donald Norman in 2006, discovered a pattern using which people read web content. The company release heat maps by conducting eye-tracking study, according to which people read in a F-shaped pattern, which includes three components:

  • Users start reading the text casually in a horizontal movement, and covers upper part of the content area.
  • Next, users skips a few line of text and move down the page. They start reading across in a second horizontal movement covering a shorter area than the previous movement. That is people scan the content to find the text that serves their purpose, and thus they’ll move from one section to the other – until they get what they were looking for.
  • Finally, users read the content in an engaging manner when they’ve found the content they were interested in. They’ll slow down and read the text carefully. But in case their interest is lost they won’t be able to focus on the content and will continue reading on the left edge of the text.

How does line length influence reading?

font-sizes-comparison

Readers often tend to follow a horizontal reading motion to read text. When casual readers get tired after while reading a long horizontal line, they’ll most likely glide over to the left edge of the text quickly – that is probably the next line or may be two to three lines of the text. In contrary, when some engaged readers get exhausted of reading a long horizontal line, they’ll probably read the same line of text more than once.

Therefore, it becomes essential for web designers to set a reasonable line length for text: that is 45 to 75 characters line length for printed media, in particular, 66 characters including spaces. Having the right amount of characters on each line enhances the readability of your text.

How does font size influence reading?

Apart from line length, maintaining comfortable font size is also very important to make the text readable. When creating a web design the text will be too small or too big to achieve an ideal line length. There are three crucial aspects to consider:

1. Maintaining font size for static web pages

The biggest benefit of reading on a responsive website is that people don’t have to pinch or zoom to read text on their hand-held devices. But if a website is fixed width, then setting an ideal line length won’t work and your text will be too slow to read on a small device such as a phone.

2. Maintaining font size for small devices

When you’re working on a responsive site, make sure to set a comfortable font size and an ideal line length for your text. But in case your text is not readable on some devices, it is better to replace the ideal line length with less-than-ideal line length to ensure the best experience on all devices.

Text usually looks smaller on phones compared to larger devices, but that isn’t a problem, given the fact that people hold their handheld devices close when reading. However, keeping too small text can make it difficult for the users to read comfortably. And thus is why, it becomes essential to exceed the ideal line length of font sizes to provide more comfortable reading experience for the pocket-size devices.

3. Maintaining font size for large devices

Even though, people are increasingly using hand-held devices for reading purposes, still a majority of people uses laptops or desktops. And so, bear in mind that a responsive website line length and font size wouldn’t only affect reading experience of people using hand-held devices but also the ones using large devices.

Many responsive designs place text in single-column that easily expands and contracts according to the size of the device. This will help provide good reading experience – except the case when font size is used to preserve the ideal line length, rather than the column’s width.

Moreover, just as we discussed above that setting font size too small can make reading a difficult task, similarly too big font can distract reader’s eyes and they won’t be able to stick to reading a single line of text. We’re accustomed to view larger text online than the printed one. That’s not a problem since we often read something on large devices like laptops or desktops at a distance while reading. But using overly large text will frustrate the reader, as they’ll have to slow down to read the text properly and adjust how far they’ll have to move their eyes to skip the text they’re reading.

When reading horizontally becomes burdensome, the reader will most likely start reading the text vertically.


Wrapping up

There’s a constant struggle between reading the text in a horizontal or vertical motion, especially when different device screen is used to read the text. And line length and font size are the two most important factors of a responsive website that makes text readable to users. In the case, you’re using line length to determine break points in your responsive web design, then more likely you care about type and reading. And you should preserve the line length. But your type truly works on a smaller device requires looking at it closely, if it doesn’t work make sure to balance the line length and font size that makes reading comfortable.

About the author

Ben Wilson is a WordPress web developer experienced in getting HTML website to WordPress friendly with having more than half decade of exposer in this field. He loves sharing insightful idea online.

Filed under: WordPress Web Design