How To Use Underlined Text To Improve User Experience

About The Author

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on … More about Nick ↬

Email Newsletter

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

Links make the Internet what it is. A robust visual design is essential to making the user journey joyful. While underlining has its downsides, it remains one of the most explicit ways to indicate the presence of a link. Underlining text makes links both easy to find and easy to understand for visitors. In this article, Nick Babich will explain the concept of underlining and provide a few tips on how to use it to improve the web experience, and help you find out when and why underlines should be used in our digital products.

(This article is supported by Adobe.) An underline is a horizontal line immediately below a portion of text. In our everyday experience, we underline to emphasize key sections of text, sometimes drawing an underline by hand below printed text. But underlines have their own place in the world of digital design. In fact, underlined text has become one of the most common, most recognizable features of our online experience. When we see an underlined word or sentence on a web page, we immediately assume it’s a link.

In this article, I’ll explain the concept of underlining and provide a few tips on how to use it to improve the web experience.

Historical Context

Text has been underlined way before the web was invented. It was used by print designers to emphasize important parts of a text:

Underlinig was the only realistic method of highlighting
(Large preview) (Image credit: Marcin Wichary)

It has been used in advertising:

Wrigley's Spearmint Ad
Wrigley’s Spearmint ad (1915)

We even find it in our immediate environment:

underlined text in environment
Some road signs with important information contain underlined text. (Large preview) (Image credit: Tyler B)

Today, designers usually don’t underline text for emphasis because such styling is considered distracting.

When Tim Berners-Lee initially presented the concept of the World Wide Web in 1991, he stated: “The [World Wide Web] consists of documents, and links.” Since then, links have become a fundamental element of the online experience, the glue that holds the web together.

The toolbox of the earliest web designers was way too limited — only simple typefaces and a limited number of colors (colored monitors displayed only 16 colors, and many were just black and white). But emphasizing links with a different style was essential, so that early adopters could figure out which elements on the page were important. The simplest solution was to underline. Since then, underlining text has become the standard decoration of HTML hyperlinks. And while designers have tried different styles for links for the last 30 years, underlining remains favored by many web designers.

blue underlined hyperlink
The blue underlined hyperlink is one of the most widely understood conventions of the web. (Large preview) (Image credit: Cern)

Underlined links have a few major benefits:

  • Familiarity
    The underline is one of the most widely understood conventions on the web. Underlines provide a strongly perceived affordance of clickability — the vast majority of users understand that underlined text is a link.
  • Scannabilty
    Underlined text is a great visual cue that guarantees link visibility when scanning text. As we scan pages vertically, any horizontal line will cut right through our line of sight. Underlining guides users to important information as they skim.
  • Accessibility
    When color alone is used to differentiate clickable elements, some groups of users (such as color-blind people) might have problems identifying links. According to the WCAG 2.0, color shouldn’t be the only visual indicator of a potential action. If you want your website to be accessible, you’ll have to add another visual cue to links, and underlining is a logical choice.

Despite all of its advantages, underlining can hinder the user experience in some ways:

  • Readability
    The interruptive nature of an underline is excellent for skimming, but it can affect readability. A study by the University of Hamburg shows that underlining has a detrimental impact on text readability. Based on the study, avoid underlines when the main goal of the content is comprehension.
  • Aesthetics
    Underlines add visual noise to text and the overall design. A lot of underlining spread throughout a block of text can make for a busy look.

Designing The Perfect Underline

Before we dive into the details of how to design the perfect underline, it’s worth defining our goal. We want to create a visible yet unobtrusive underline. Users should be able to understand that the element is interactive — when they see it, they should immediately know that it’s a link — but it shouldn’t draw too much attention to itself or stand apart.

Don’t underline any text that’s not a link (even if your links aren’t underlined). Underlines provide a strongly perceived affordance of clickability, and users will be confused and frustrated if underlined text doesn’t match their expectations. If you need to emphasize certain words or sentences, using italics or bold is much safer.

Keep It Short

Try to keep linked phrases short, three to five words. Anything more will clutter the text.

Make Anchor Text Meaningful

Anchor text is the clickable text in a link. It should be descriptive — users should be able to predict what they’ll get when they click a link. For this reason, avoid anchor text like “click here” because that says almost nothing about the content behind the link and forces users to hunt for more information on what exactly they will be clicking on. “Click here” links also make a website less accessible for people who use screen readers. Most screen readers say “link” before each link. For example, a “cars” link would be read as “link cars” by JAWS. Thus, you can expect that JAWS would read a “click here” link as “link click here,” which is utterly uninformative.

According to Google’s “Search Engine Starter Guide,” putting words that anticipate the target page at the start of the link text is critical.

click here example
By itself, “click here” is completely meaningless. The second link sets an expectation of what the user will get when they click the link. (Large preview)

Consistency is the key to teaching users what links look like on your website. There shouldn’t be a situation in which some of the links on your website are underlined and some aren’t. Different visual signifiers being used on different pages can easily confuse visitors. Pick a link design and stick to it.

Design consistency is important not only for small websites. For example, different sections of CNN’s website have different styles for links. CNN Style uses underlined text:

David de Rueda
All links in the article are underlined (see “David de Rueda” as an example) (Large preview)

CNN Sport, meanwhile, uses color to visually distinguish links:

CNN example
All links in the article are visually separated with a different color (see “READ: Inside the Kodokan -- judo’s spiritual home”). (Large preview)

Avoid Descender Crashes

Descender crashing is perhaps the second most significant issue caused by underlines (after clutter). This happens when characters containing descenders (such as lowercase p, g, j, y and q) aren’t taken into account and the underline touches the letterforms. This can cause a cluttered, ugly look and make the text less legible.

example of underlined text link
Descenders y, g and p crash into an underline, reducing legibility.

A good underline is positioned below the baseline and skips descenders. Hiding the underline below certain characters not only will improve legibility but also will look more refined:

underlined text in Adobe XD
Here’s an example of underlined text in Adobe XD. Underlining is used only where it does not touch or closely approach a glyph. (Large preview)

How do you prevent the descender crash issue. Links on the web are styled with the text-decoration: underline CSS property by default. Unfortunately, this property doesn’t take descenders into account.

Among the solutions that address this problem, the simplest is the text-decoration-skip CSS property. It specifies which parts of an element’s content should be skipped over by text decoration. It controls all text decoration lines drawn by an element and also any text decoration lines drawn by its ancestors.

The text-decoration-skip property isn’t supported in all browsers yet. Alternatives (such as box-shadow) would be worth exploring if your text is hard to read without it.

Update: On Nov. 8, 2017, the property has been renamed to/superseded by text-decoration-skip-ink:, with auto as an initial value in Chrome 64.

white space around underlined text
If your browser supports the text-decoration-skip property, you’ll notice that the descenders here (like y and p) have a little white space around them.

Color

Color is a powerful tool in the designer’s toolkit. It can be used to distinguish links from other text.

Avoid Coloring Non-Interactive Text

Avoid coloring text unless it’s a link because visitors can easily confuse colored text as being a link.

Not necessarily. According to Jakob Nielsen, “Shades of blue provide the strongest signal for links, but other colours work almost as well.” However, if you are free to select a color for links, blue is always best. It is still the color with the strongest perceived affordance of clickability — an experienced web user associates “blue and underlined” with links. And the color has one significant advantage over others: It’s the most accessible for people with color deficiencies (people who suffer from protanopia and deuteranopia can see it).

Tip: Because blue is strongly associated with clickability, avoid it for non-link text, even if blue is not your chosen link color. Blue text that is not clickable leads to frustration.

Visually differentiating visited and unvisited links will make the user’s journey easier because users will be able to keep track of what they’ve seen. The two colors should be variants or shades of the same color, so that they’re clearly related. The color for unvisited links should be more saturated, and the color for visited links a bit duller.

two examples of underlined text links

For lists in which every item is a link, not underlining is OK. In this case, the layout clearly indicates the area’s function.

wiseGEEK
There’s no need to add underline for each element on this list. (Image credit: wiseGEEK) (Large preview)

Mobile Considerations

Today, almost 50% of users access the web from a mobile device. Optimizing the web experience for mobile users is a top priority for web designers.

Do not use underlined links in mobile apps. Underlined links are a part of the website model, not a part of the app model. Apps should have buttons, not links.

TD Bank app for iOS
TD Bank app for iOS

Using a thumb to tap links can be painful, especially when you have trouble spotting a link and then have to zoom in to tap it. On a touchscreen, the sizes of objects are critical. Make interactive elements big enough to be both easy to see and easy to interact with.

Conclusion

Links make the Internet what it is. In his classic book on usability, Don’t Make Me Think, Steve Krug writes, “Since a large part of what people are doing on the web is looking for the next thing to click, it’s important to make it obvious what’s clickable and what’s not.” A robust visual design is essential to making the user journey joyful. While underlining has its downsides, it remains one of the most explicit ways to indicate the presence of a link. Underlining text makes links both easy to find and easy to understand for visitors.

"This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design."

Further Reading

Smashing Editorial (ra, al, il, mrn)