Underlined Text
A team removes underlines from body links across a help center. The pages look calmer, the brand blue reads well against the text, and the design review approves it in a minute.
Links people can actually see: learn the rules while you're out and about.
Listen to the full Underlined Text course on DesignPath
Support tickets arrive over the following weeks from people who read a paragraph containing the answer, in the form of a link, and did not see it. Nobody reports a broken link, because nothing is broken. The link is invisible as a link to anybody who cannot separate that blue from that black.
Steve Krug put the underlying job plainly: a large part of what people do on the web is looking for the next thing to click. Making clickable text obvious is half of that job.
The other half is the link saying where it goes before anybody commits to it, which is a writing problem as much as a styling one.
Anatomy of a Link
A link looks like the simplest thing on a page. It carries six parts and five states, and a design file usually shows two of them.
Naming the rest is what turns a link review from a matter of taste into a list of things that are present or missing.
The Parts
Six, and the last one appears only where the destination behaves unexpectedly.
The anchor text, which is the words themselves. The underline. The color. The container, meaning whether it sits in a paragraph, a list or a navigation bar. The destination. And an indicator where the destination behaves unexpectedly, such as opening in a new tab or downloading a file.
Five States
A link is not one appearance, and a design file that shows one has specified a fifth of the component.
Default is the state everyone draws. Hover is the second, usually drawn. Visited tells somebody they have already been there, and browser resets strip it constantly. Focus is what a keyboard user sees, and it decides whether the page can be used without a mouse at all. Active is the moment of the press, and it matters least.
Three Components That Look Alike
Three things on the same page carry link styling, and they answer to different rules.
A body link sits inside a sentence and has to be findable in running text. A navigation link sits in a structure that already announces itself as navigation, which changes what the styling has to do. A link styled as a button is still a link, and it goes somewhere. Separately, a button performs an action on the current page and never navigates, which is a distinction article 6 returns to.
What Each Part Answers
Each piece answers a question somebody has before they commit.
Is this a link at all, which the underline and the color answer together. Where does it go, which the anchor text answers. Have I been there, which the visited state answers. Can I reach it, which the focus ring answers. A link missing one of those has left one of the questions to guesswork.
Pro tip: Open the link component in your design system and count the states in it. Fewer than five is the finding, and visited is the one missing about half the time.