Dublin Library

The Publishing Project

Reading on the Web

  • 4 min. read

 

This post will look at two areas related to reading online:

  • How people read online
  • How to determine optimal font sizes? Is there such a thing?

If people scan the content of your page, what font size will make it easier to scan and what font sizes will drive people away?

How do people read online? #

Starting in 1997 with his report How Users Read on the Web, Jakob Nielsen, and later his team at the Nielsen Norman Group, have researched how people read, or don't read, online.

Their latest research blog post: How People Read Online: New and Old Findings confirms their past results of how people read online... they don't.

People still primarily scan, rather than read. Scanning all of the text on a page, or even a majority, is still extremely rare. Even when users do scan content in its entirety, they never scan it perfectly linearly. They still jump around pages, skipping some content, backtracking to scan what they skipped, and rescanning content they’ve already scanned.

However, they also point out that user interest in reading will vary based on a variety of factors. Most of these are outside our control as content creators but it's worth keeping them in mind as we write content.

Though light scanning is the primary method used to process information online, the amount of time any individual user is willing to spend reading depends on four factors:

  • Level of motivation: How important is this information to the user?
  • Type of task: Is the user looking for a specific fact, browsing for new or interesting information, or researching a topic?
  • Level of focus: How focused (or unfocused) a user is on the task at hand?
  • Personal characteristics: Does this individual show a proclivity for scanning and tend to scan even when highly motivated? Or is she very detail-oriented in her general approach to reading online?

The post also contains guidelines on how to structure the content to support their scanning of your page.

As in 2006, content creators need to accept this fact: People are not likely to read your content completely or linearly. They just want to pick out the information that is most pertinent to their current needs. We can design content that supports scanning by:

  • Using clear, noticeable headings and subheadings to break up content and label sections so that people can scan to find only what they’re most interested in
  • Placing information up front (in other words, “front-loading”) in the structure of our content, as well as in subheadings and links, to allow people to understand the message quickly while scanning
  • Employing formatting techniques like bulleted lists and bold text to allow the eye to focus on the most important information
  • Using plain language to keep content concise and clear

Is one-size-fits-all good enough when it comes to font sizes for web content #

We've seen how people read online. Now let's look at how large we need to make the font size to help with readability.

There is no universal font size for our content since we now live in a world of responsive design, multiple form factors, and screen resolutions.

Here are some aspects to consider:

Screen size
It’s impossible to predict what form factor users will access your content from.
Responsive Design aims to accommodate these different dimensions but there is a big difference between an iPhone, an HDR Laptop and a Gaming monitor in a Desktop machine.
Screen resolution
Pixel density plays a big part in text legibility. Technological advances have made hi-res screens more accessible to the masses.
16px (the default font size for browsers) will look different on a phone than on a tablet or a large display.
Designers should keep in mind both the outliers with older tech and the different densities available across devices.
Dynamic Range
A monitor's dynamic range is the range of luminosity it can reproduce, from its black level to its peak brightness. It's measured in bits per color channel, and a higher number means a more vivid and accurate image can be rendered.
Dynamic range determines how close to reality images can appear on a monitor, as well as what levels of brightness are best suited for different tasks.
High-dynamic range (HDR) is a specification that determines whether a display can render an image that has deeper contrast, a wider color gamut, and generally a better representation of brightness than that of a standard-dynamic range (SDR) display.
Accessibility
Surprisingly, only the APCA contrast guidelines have specific font size and weight combinations to address contrast readability. Sadly, these combinations do not address pixel density or screen size.
Character similarity
Does font size affect the way we read similar characters like O (capital o) and 0 (the number 0) or l (lowercase l) and 1 (the number).
The similarity depends on the font and whether the font provides support to differentiate the similar numbers.
Some fonts may implement the slashed zero open type feature to differentiate between 0 and O when they are used in the same document.

Controlling font size with CSS #

Edit on Github