Typography and Reading on the Web

reading

 It’s been said that good typography goes unnoticed. It’s only when typography fails that readers take note. One of the ways I encounter good typography is when I’m lost in the pages of a riveting book. Yes, great deal of it has to do with good writing; but the grease the fuels this desire to read is the design of the text. How the text flows on a page, its texture, spacing, composition, rhythm, harmony, emphasis, and the positive and negative space all work together to support the text. Inspired by a friend’s insightful presentation about web typography, I’ve taken it upon myself to learn more about how we as designers can optimize the user’s reading experience. After devouring some great articles about web typography, here are the highlights of what I’ve learned.

“Before users start reading a single word of text on a website, they are already judging the typography. More than any other design element, type sends instant messages about a site’s content and purpose.”
Ellen Lupton

Typeface vs. Font

For starters, we should correct our terminology. Much to my shame, I have been using the wrong terminology for too long. The words “typeface” and “font” are not interchangeable, as many seem to believe.

“Typeface” refers to the name of the design style or family of styles.
For example, “Arial” is a typeface.

“Font” refers to the format or storage for the typeface.
For example “Arial.ttf” is a font.

anatomy-of-type

Meaning in Typography

It’s easy to pick and choose a typeface because it looks interesting, but we must consider what the typefaces mean, what they imply, and what they say in their fine details. Beyond serifs and san serifs, it is crucial to explore the typefaces’ form, weight, strokes, lines, curves, and edges. We should treat text as a breathing presence on the page or screen, give it room to grow, and treat it with unapologetic largeness if need be. All of these factors invoke meaning outside of the text’s message.

Pairing Typefaces

A popular opinion is that two typefaces is more than enough for a project. Of course, this  doesn’t apply to all and every situation, but it’s safe to assume that less is more when choosing typefaces.

But how do we pair typefaces? Here are some things to consider:

  • In terms of contrast, do the typefaces compliment each other or create tension? There is little point in choosing typefaces that appear too similar.
  • Serif and sans serif fonts pair well (usually)
  • Trust your gut

Readability

What makes us want to read on the web, and what doesn’t? How can we make the user’s experience of reading more pleasurable? It’s easy as web designers to set default type settings on a page and continue on our merry way, but just because the text is readable doesn’t mean others will read it.

“Readability doesn’t ask simply, “Can you read it?” but “Do you want to read it?”
Stephen Coles

What can we do with our designs to keep the reader’s attention? Here are a few questions to ask ourselves when evaluating our typographic choices:

  • Is the typeface good for extended reading?
  • Is the typeface large enough to read on the web? (usually 16 pixels or larger is best)
  • Are the headlines distinguishable from the body copy?
  • Is there enough line height to increase readability?
  • Does the typeface accommodate various styles and weights?
  • Am I using too many fonts that distract from the message?

Writing for the Web

Finally, writing for the web is different than writing in print. Web users tend to scan text for key words rather than reading word-for-word. This is why it’s important that writing on websites should be broken up into bite-size sections that are easy to scan. These sections should start with clear headings with the key message first. The rest of the copy should flow in an inverted pyramid style with the least important message at the end. However, some could argue that all the messaging should be important, therefore one must delete unnecessary words.

That being said, not all users are cursory readers. Given the right context, cursory readers can transform into readers who consume lengthy texts if the situation calls for it. Limiting distractions on a page is one way we can keep the attention of our readers. White space helps the reader focus, and helps the text breathe. Keep related links and info at the top or bottom of the page, do not disturb while the user is reading the article.

Don’t Stress about Typography

“We have principles, best practices, and methods that work most of the time, but nothing works all of the time. We can do our best to ensure that something is durable: good-sized type for reading, plety of whitespace, pleasing typefaces, and visual appeal, but we can’t account for all environments and devices, which are often in flux. Learning typography is about figuring out what choices work best for each situation.”

– Jason Santa Maria

Although many people have written insightful articles about good typography, the fact is, there are no set rules in typography.  Sometimes we have to trust our gut when making typographic choices. That’s what makes typography fun!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s