Human-Centered Typography

Carolann Bonner

The fundamental goal of typography is to make text easy and enjoyable to read. Typography has its own set of rules and guidelines. From there, we bend the rules to prioritize how to make the text easier to read.

Text as an Interface

Treating text as an interface is as much about usability as it is enjoyment and ease. It is the writer’s responsibility to make content compelling and interesting and the typography’s responsibility to make the act of reading feel effortless and enjoyable.

Our blog’s interface is text. The goals of that interface are to:

  • reduce mental effort when reading and deciding what to read.
  • simplify the information on screen to increase its usability.
  • re-use patterns to minimize learning.
  • provide feedback to the user to give them confidence in their actions.
  • create an enjoyable experience.

Built to Scale

In The Elements of Typographic Style, Robert Bringhurst describes typography as a system based on “the structure and scale of the human body,” particularly the eye, hand, forearm, and of course, the mind.

Just as Bringhurst applies the idea of designing with human behavior and physical attributes in mind, we see that practice equally applied in software and hardware design. Typography should take a form that is natural and beneficial for people to interact with.

Applying a Human-centered Approach

After making some updates to our blog, it was interesting to see that many of the considerations made in typographic changes are similar to the considerations we make when designing software.

Here’s a screenshot of the updated designs:

thoughtbot-blog-index

thoughtbot-blog-article

Reduce Mental Effort

The changes we’ve made are centered around one of the jobs-to-be-done by the blog, which is to provide interesting information to the reader. Because of this, one of our goals is to present concise information in a way that allows the reader to make quick and informed assessments of what they’d like to read.

The header elements (our logo and the blog title) have been grouped to stand out from the list of articles. This makes the page easier to scan for content. The title of an article is now emphasized over the date to present the most important information first. This also allows the link to get to the article to be front and center.

Simplify the Information

To help the reader create accurate groupings of information, we increased the white space around each article listing and added simple borders to enclose the information related to each article. This prevents the information from bleeding together and causing confusion.

Create an Enjoyable Experience

To the individual articles, we decreased the line length of the paragraphs and added more distinct styles to the heading tags to emphasize hierarchy.

A Closer Look at Line Length

Using line length as an example, let’s look more closely at the the impact of typography on user experience. Bringhurst advises that:

45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size.

In this blog, we are living on the edge at 85 characters per line, but it seems to feel right.

Since English is read from left to right, the eye travels along three pathways:

  • from the left to the right
  • down to the next line
  • left to the beginning of the new line

The goal is to reduce eye strain by keeping the eye from travelling too far to the right to reach the end of the line. This also means the eye does not have far to travel to get back to the beginning of the next line.

In the end, one of the primary intentions of typography is to make the act of reading text comfortable and understandable.

Impact on User Engagement

The easier it is for a user to read our text, the more engaged they will be with the content and the more value they will gain from it.

In an evaluation of how people read online Slate found that we are conforming to new reading and comprehension patterns as we are reading more and more on a screen and consuming information in a web format.

Adding a more detailed hierarchy addresses our skimming tendencies. Separating chunks of content with a more emphasized hierarchy of headings and subheadings creates footholds for a reader to grab on to. This also helps to inform navigation through the content and where to focus more attention.

Ease of Reading

Good typography has the potential to draw people in to the content. By creating an effortless reading environment, we can combat the habit of skimming. In contrast to consuming the content more quickly, we may want the reader to slow down and enable them to fully engage with a piece. Overall, the reader may view fewer pages on a site, but they will spend more time with the content they choose to consume.

Affection for Communication

The existence of the field of typography is a display of human affection and regard for communication. Beyond getting more visitors on a website, more engagement from users, or more credibility through smart font choices, typography is an expression of how we, as people, value communication and discourse.