Designing the Perfect Hyperlink - The Ultimate How-To
About
Read on Omnivore
Read Original
The design of hyperlinks can affect the usability of your web pages and also the user experience. Here are some tips to improve hyperlink designs.
This page is powered by Omnivore ‐ you can read more about how I use Omnivore here: Omnivore - Saving Articles for Citations in Obsidian.
Highlights
Hyperlinks Need to Look Like Hyperlinks
All your hyperlinks need to stand out and clearly say to your readers, “Hey I’m a link. You can click on me.” Hyperlinks should appear interactable.
As web designers, we like to innovate and experiment with different navigation techniques, but sticking with certain design conventions is important. One of the things that need to remain conventional is our hyperlinks. According to a study in link readability, the regular Web user sees blue-and-underlined text as links.
Blue and underlined is a good standard to stick to, for no other reason than it’s what we Internet users have been acclimatized ourselves to. ⤴️
Hyperlinks should be underlined and blue because it is the standard convention.
There is a study that shows that readability decreases when we underline the text in our hyperlinks. The study says that underlined links have “seriously underestimated effects on the usability of Web pages.” The study reports that our current convention of underlining hyperlinks “can significantly reduce the readability of the text.” ⤴️
The standard convention is flawed - underlined text can reduce readability.
What’s the Solution to This Readability Issue?
We can fix this readability issue ourselves. We don’t have to wait for a change in the way web browsers render underlined text by default. How?
We can use the CSS
border-bottomproperty instead of the CSStext-decorationproperty to underline our hyperlink elements. Using theborder-bottomproperty can place the underline a few pixels below the affected characters, making the hyperlink easier to read.⤴️
Add padding to make the underline sit further below the text so it doesn't cut through characters.
Even more powerful than just fixing a readability issue, we can also control the underline’s style independently from the hyperlink text color, thereby decoupling these two components of a hyperlink.
For example, we can reduce the hyperlink underline’s distinctiveness to make the text more legible, or we can make it more distinctive to make the entire hyperlink design really stand out. ⤴️
Make underline colour subtly different from hyperlink text to improve distinctiveness and readability.