---
title: Human-Centered Typography
teaser: Viewing typography as a human-centered field of design
tags: design,typography,user experience
author: Carolann Bonner
published_on: 2014-10-24
---

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](http://www.cameronmoll.com/archives/001296.html)
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_](http://books.google.com/books/about/The_elements_of_typographic_style.html?id=940sAAAAYAAJ),
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][index-after]

![thoughtbot-blog-article][article-after]

#### 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](http://www.slate.com/articles/technology/technology/2013/06/how_people_read_online_why_you_won_t_finish_this_article.html)
_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.

[index-after]:https://images.thoughtbot.com/blog-redesign-post/index-after.png
[article-after]:https://images.thoughtbot.com/blog-redesign-post/article-after.png