How fonts help your customers find their way

Picture yourself in a bustling metro hub, sprinting through crowds to catch your next train. Your eyes scan the walls and ceilings for signage, reading the directions in a split second as you wind your way to your platform.

The text on those signs needs to be legible, unambiguous, and properly sized for both the location of the sign and the significance of the text, so you don’t have to pause and search for the information you need. Those lost seconds could be the difference between making your appointment and walking in unfashionably late.

A website is, functionally, no different, save perhaps for the urgency of a potential missed meeting. But the interaction between users and website content is almost equally frantic, and as in a metro station (or airport, for that matter), a thoughtful approach to text can turn a poor experience into a positive one.

Blink twice and you’ll miss it

A study by the Nielsen/Norman group found that “on the average web page, users have time to read, at most, 28% of the words during an average visit; 20% is more likely.” That percentage varies somewhat depending on how much copy is on the page, but, coupled with the fact that most people spend an average of 15 seconds on a web page, the numbers underscore a basic truth: For the most part, users don’t come to your website looking to read.

Instead, they come looking for information. Put differently, a website is something that, generally speaking, people use, hence the term “user.” After all, most websites are geared toward simple tasks like shopping, banking, planning travel and the like, in addition to digital publications and other sites aimed at longer-term engagement.

This means that regardless of your website’s purpose, users almost always want and expect the quickest, most efficient path to completing their task.

“Minimum interaction cost”

“People do not read from left to right, start to finish,” says Theresa Mershon, Creative Director for UX and Product Design at Hearst Magazines Digital Media (HMDM). “When people come to our sites, they’ll get the lay of the land from the title and first sentence. Then they scroll through the full article, mainly looking at images and headings—everything that isn’t body text—before deciding if it’s worth engaging with the body text.”

The term for this is “minimum interaction cost,” which is basically the minimum effort required to determine if a piece of content is worth reading. Chances are you and most of the people reading this article did the exact same thing before deciding to read even this far.

“Users are very good at filtering out everything that isn’t the thing they think is important on the page,” says Mershon. “They’re used to fighting to get the things they want.” Customers have come to expect a combative experience when they visit a web page. They have to swat away ads they don’t want to see, pop-ups that interrupt their flow, and are often browsing surrounded by real-world distractions.

“Nobody has the user’s undivided attention,” Mershon points out. “Outside of the website itself, outside of the other 20 tabs the user has open, there’s also everything happening in the world around them. So, how can we be seen as a helper and not a distraction? Somebody who isn’t tricking them but is providing exactly what they want?”

The point is, you don’t always know how, when, or where users are accessing your site. Think of all the strange, unexpected, or stressful situations in which you’ve found yourself struggling to find a bit of information online. Think of all the times you’ve thought (or shouted) “Why won’t this just work?!”

Fortunately, a smart font strategy goes a long way to ending that frustration.

Font choice is critical

Fonts are crucial to developing a visual hierarchy for your site. As in an airport, they guide the eye from one place to the next, helping the user map their environment more easily.

Fortunately, fonts make it simple to do exactly that. Each of these characteristics, either alone or, often, working together, can quickly turn an intimidating block of information into an inviting, scannable, useful page.

  • Text size: Simply changing the size of a line of text gives the eye a series of anchors throughout your content. The obvious use of this is in headlines, but content subheads, product testimonials, and CTAs are often set in larger text to draw the eye. Also, the type scale becomes even more important as the screen size gets smaller, and text begins to do more of the heavy-lifting over images and other UI. Responsive design often requires eliminating nearly everything but the text at the smallest sizes, so having a clear, consistent font strategy is crucial.
  • Style: Use different font weights and styles like italics or outlines to set blocks of text apart. It is good practice to create visual contrast through weight, like pairing bold headings with light body text, or through letter shapes such as a relaxed hand script for headings with a no-nonsense sans serif for body text.
  • Type system: This idea of using style to create contrast is becoming a large part of many site’s visual strategy. Today, it is not uncommon to visit a site employing two, three, or sometimes up to five different fonts, each used exclusively for different purposes. In this way, you can create energy and hierarchy in content with a “system of type,” whilst also building a palette of font choices that reinforce the unique identity of your company’s digital aesthetic.
  • Color: Simply changing the color can make otherwise undifferentiated text stand out and grab the user’s attention. Even using subtle shades of gray can create meaningful differentiation between blocks of text.

The key is to deploy these tactics consistently throughout your site, so that your users become familiar with the look of your site hierarchy, not just the text. This gives your users visual cues that don’t require reading because they can track the color, style, or font across your site.

It’s no secret that more and more users are browsing on mobile devices, so designing for the mobile experience is vital. Mershon advocates increasing the overall size of the text, particularly for body copy. “I always tell our team to look at our content on a phone that’s two feet away from your face, because that is actually how people are reading it,” Mershon says. “And so we have a pretty high line height and tend to scale our typefaces up a little bit higher,” to improve that mobile experience.

This seems obvious, but for a long time it was best practice to focus on “the fold” and getting as much content onto a single screen as possible. Now, thankfully, the focus is more on readability and the customer’s experience. So, don’t be afraid to bump up your text size a little.

Simplify, simplify

“People like having things segmented and easy to digest,” says Mershon. “A whole page of text isn’t welcoming. Being immediately overwhelmed is one of the driving factors behind page abandonment.”

In other words, make it simple. Remember you have your user’s attention for mere seconds, so those seconds need count for your user and for you. A thoughtful font strategy can make that experience smooth and memorable (in a good way) and keep customers coming back again and again.