Make readability better with simple guidelines

For long-form content on the web like articles and blog posts, readability is very important. The words we see on a screen need to be easy for our eyes to follow and our minds to comprehend.

The problem is that today, there are too often quirks in typefaces and text presentations that can make it unnecessarily difficult to read through paragraphs.

It doesn’t have to be this way. In this article, I’ll present some guidelines to help make readability better on the web.

  • Select a font with a legible typeface.
  • Apply enough font weighting to ensure good legibility.
  • Ensure the color of the text stands out against its background.
  • Make the text abundantly large for reading.
  • Allow spacing between lines of text.
  • Do not make lines of text too long.

These suggestions for web typography and typesetting are mostly drawn from research and insights I’ve picked up over years of learning to create web content.

Select a font with a legible typeface

I’ve covered this in-depth in another blog post. Here, I’ll summarize the essentials.

Basically, you want to select a font with a typeface that is clearly legible, so you can easily make out the individual letters comprising the words that make up sentences and paragraphs.

While there are a lot of creative fonts available out there for the choosing, it’s the fonts built into your device’s operating system that may work best.

The default operating system fonts, including SF Pro for Mac and iOS, Segoe UI for Windows, and Roboto for Android all offer very good legibility.

You can also opt for classic font typefaces available in many operating systems, such as Arial, Helvetica, and Times New Roman. (These fonts are also known as “web safe” for being available across multiple devices and OSes.)

Below is a paragraph of text presented in Helvetica or Arial (depending on your device), and another paragraph in a proprietary web font.

I have created this small paragraph to demonstrate legibility and readability. The font for the text is preinstalled in the operating system for your computing device.

I have created this small paragraph to demonstrate legibility and readability. The font for the text is proprietary to IBM, but available for anyone to use as desired.

To my eyes, the classic font type reads a little more smoothly, enough to make sustained periods of reading more favorable.

Apply sufficient font weighting

A popular design trend has been the use of lightly weighted font typefaces. While this offers a more modern look and feel to web designs, it may be problematic if you’re using this for article or blog content.

This font weighting is way too light for reading purposes.

This font weighting is a little better for reading, but still too light.

This is a good font weighting for reading long-form content.

It’s best to avoid thinly weighted fonts when presenting text in paragraphs.

Text should stand out against its background

Another trend in web design today is the use of shades of gray for text. However, if the shading is too light and the text does not stand out well against its background, readability is compromised.

A generally accepted guideline is to have a minimum contrast ratio of 4.5 to 1 for the text shading against the background. Here is a handy tool to measure contrast ratio between foreground (text) and background colors.

This text stands out very poorly against the background.

This text stands out better, but the 2.85 : 1 contrast ratio is insufficient.

This text is nicely contrasted with the background and is good for reading.

Make the text large enough to read

I have frequently found that in content with paragraphs of text, font sizes tend to be 14px to 16px. This is a personal observation, but I tend to find 14 or 15px far too small for readability on a desktop browser. (This size may be OK on a smartphone.)

To me, text should be presented at a minimum of 16px, with a willingness to go as high as 18 or even 20px if necessary. The exact font size will depend on the typeface and its subjective appearance.

Curiously enough, text content in Microsoft’s blogs is sized at 14px, and sure enough, I find it unacceptably small.

You can see for yourself by visiting their site or clicking this thumbnail below.

Screenshot of a post on the Microsoft Team blog

Here is a comparison between small and larger font sizes.

This text is at 14px font size and is rather small for reading in a desktop browser.

This text is at a larger 18px font size and is better for reading.

Allow spacing between lines of text

Reading articles on a screen can be straining to the eyes. It’s essential to allow some space between lines of text, to offer some “breathing room” when someone is intently glancing over sentences in a paragraph.

You don’t want there to be no spacing, or too much spacing between lines of text, as both will be distracting. Just enough so you won’t have to strain when reading over every word and line.

This is a test paragraph to see how it is easy to read between lines of text. In web development, the spacing between lines is known as line height. The goal is to allow enough, but not too much white space in a paragraph to ensure good readability.

This is a test paragraph to see how it is easy to read between lines of text. In web development, the spacing between lines is known as line height. The goal is to allow enough, but not too much white space in a paragraph to ensure good readability.

Do not let lines of text get too long

Let’s take a look again at Microsoft’s blog. See above. If you look at the screenshot, or visit their site through a desktop browser, you will notice something alongside the small font size: the lines of text are too long.

It’s really important not to have the reader’s eyes travel from one end of the screen to the other. In fact, a common recommended guideline is to have lines of text span from about 45 to 75 characters (including spaces).

If the lines are excessively long, the reader will tend to lose focus and interest in the content.

If you look at articles on the New York Times website, you’ll notice the paragraph text spans about 65 characters. For my blog, lines of text go to about 70 characters wide.

It’s often the sum of multiple factors

Poor readability is usually not due to a single factor, but rather, the result of multiple issues in web typography and typesetting. In the end, if readability matters for the web content you create, it will be important to make the effort to apply all of the recommended guidelines presented in this article.