Designing the Perfect Hyperlink — It’s Not as Simple as You Think

Jul 12 2013 by John Macpherson | 18 Comments

Designing the Perfect Hyperlink — It's Not as Simple as You Think

Hyperlinks are the glue that holds the Web together. Without links, the Web would be a very different place, that’s if it would exist at all. Using a simple HTML element — the <a> element –you can create a bond with any other web page on the Internet. Hyperlinks are magical.

Hyperlinks are fundamental to the Web. They are always just there. Maybe that’s why many site owners and web designers don’t pay them the attention they deserve.

The design of the HTML <a> element is crucial in the user’s reading experience; we should take enough time to design them well.

I’m about to share with you some hyperlink design tips that will lead to a better user experience, enhanced web accessibility, and maybe even bring improvements to your search engine rankings.

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.

Examples of Hyperlink Designs

Below you will see 3 different hyperlink designs. They are from top newspaper websites.

On the surface, these are all good hyperlink designs. They are some shade of blue. They stand out amongst the surrounding body of text.

But why is The New York Times hyperlink design better than the other two examples?

Allow me to explain.

A Simple Way to Test Your Hyperlink Design

Let me show you an easy method of testing if your hyperlinks clearly stand out from its surroundings.

If you blur and remove the color from the design, you will see what stands out if someone was quickly skimming or reading the page or if someone has particular problems with their vision such as low-vision or color blindness. (Read more about color testing tools.)

You can do this by:

Modifying your CSS property values for <a> and <p> elements to blur them and remove their colors

Taking a screenshot and editing it in Photoshop

  1. Image > Adjustments > Desaturate
  2. And then Filter > Blur > Gaussian Blur

Let’s look back to our earlier examples, but this time we are going to view them when they are blurred and in black and white.

Here is The Guardian’s; you can see that the hyperlink is hard to spot:

BBC uses a bold font weight to create emphasis on their hyperlinks, which is marginally better than The Guardian’s hyperlink design because it at least stands out a bit more.

With The NY Times, it’s still possible to work out where the link is.

The Problem with Underlining Links

Now here’s where it gets tricky.

Here is where hyperlink design gets a bit unsimple.

Here is where our convention of underlining links fail.

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 researchers go as far as saying, "alternatives should be carefully considered for the design of future Web browsers."

Essentially, the researchers are saying that our current conventions for hyperlinks — underlined text — should be changed systemically.

The reason why underlined hyperlinks reduces legibility is that certain characters that go below the base line — characters with descenders extending below the underline such as p, g,  j, and q — are getting affected by the text-decoration: underline CSS property value.

Here is the default style of hyperlinks in the Google Chrome web browser (version 28):

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-bottom property instead of the CSS text-decoration property to underline our hyperlink elements.

Using the border-bottom property can place the underline a few pixels below the affected characters, making the hyperlink easier to read.

Here is the CSS used for the image above:

a {
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid blue;
}

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.

For the purpose of illustration, I changed the underline color just a little bit, making it a lighter shade of blue:

CSS:

a {
	text-decoration: none;
	padding-bottom: 1px;
	border-bottom: 1px solid #8d8df3;
}

Make Hyperlink Text Longer

This next concept I’m going to discuss goes a bit into content strategy territory (which is a big part of web design process).

Some of you might dislike this suggestion because it deals with the content creation process, and some of you might not have control over that part of the web development process.

The basis for this next tip I’m going to share is Fitts’s Law.

The concept of Fitts’s Law is simple. The law states that the larger something is, the easier it is to see and interact with.

That makes sense, especially in the context of touchscreen devices where the size of your elements matter, where the input device (our fingers) is less precise than a mouse pointer.

Using a finger to click on a hyperlink can be a pain; often times you will have to zoom in for small links, adding an additional barrier towards users getting the action they desire (which is to interact with the hyperlink).

But there is only so much we can do with the style of our links.

We can bold them, underline them, change their color.

How about making them bigger by changing their font size?

If we change the <a> element’s font-size property, it affects the reading flow, and can affect the consistency of our line-heights.

Look at how the continuity of the reading experience is disrupted by increasing the font size of hyperlinks:

So we can’t expand them vertically. We will need to expand them horizontally.

User-friendly SEO Benefits

Having longer anchor text is a user-friendly SEO tactic. That is, hyperlinks with longer link titles is better for users according to Fitts’s Law, but it also has the nice side benefit of being better for search engine rankings.

Anchor text should be descriptive and should tell the user and search engines what the page you are linking to is about, according to Google’s Search Engine Starter Guide.

Say you were writing about walls.

Compare the two ways a hyperlink is used in these sentences below:

"I would like to talk about advanced wall-building techniques. Click here to learn how to build a basic wall because what I will talk about is beyond the basics."

Versus:

"I would like to talk about advanced wall-building techniques. You will need to learn how to build a basic wall because what I will talk about is beyond the basics."

Not only is the second version better for our user, but it is additionally better for search engines too because there is more context than the anchor text that just says "here".

Should Hyperlinks be Blue?

According to a study by Google blue links got more clicks than greenish-blue links.

The study I referenced earlier about underlined text readability likewise affirms that Web users immediately recognize links when they are blue and underlined.

However, in my opinion, not all hyperlinks absolutely need to be blue.

The important thing about hyperlink design is that your links are obviously links.

If you can achieve that with a different color other than the conventional blue color, go for it.

Microsoft Development Network (MSDN) supports this concept.

The fundamental guideline about designing hyperlinks "is users must be able to recognize links by visual inspection alone—they shouldn’t have to hover over an object or click it to determine if it is a link," according to their link design pattern guideline. They didn’t say anything about links needing to be blue.

There are some cases where blue-colored links aren’t the best option.

For example, if the background color makes it hard to read blue links, then usability and readability triumphs over the standard blue link convention.

Always do what is best for the user, even if that means breaking conventions.

Summary

Here are the big ideas:

  1. Designing hyperlinks should be well-thought-out.
  2. Blurring and removing color from the design is a quick way of demonstrating how well your links stand out.
  3. Underlined text is a strong and familiar convention. The problem with underlining text, though, is that readability decreases. The solution is to use CSS to remedy the issue.
  4. Using longer descriptive anchor text can improve usability (Fitts’s Law), with the added benefit of being better for search engines.
  5. The one thing that is important in the design of hyperlinks is this: hyperlinks should obviously look like hyperlinks.

Related Content

About the Author

John Macpherson works for Media Surgery, providers of ExpressionEngine development services. He runs a podcast and video series about web development at Web Payload.

18 Comments

Joe Joiner

July 12th, 2013

By removing the color on the `border` property, it will simply inherit the color of the link text as it would with `text-decoration: underline`, meaning that you will only have to edit one color.

e.g. `border-bottom: 1px solid;`

Steve eMailSmith

July 12th, 2013

Hey John..

Excellent article! I’ve read a lot about web-usability, but as a rule of thumb, blue underligned hyperlinks were always considered tabu when speaking of change.
Your ideas have great merit, although I wouldn’t personally lengthen the text artificially by increasing the space between characters. It doesn’t ‘feel’ right.

However, the technique you described with the border-bottom property is brilliant. Sometimes I wonder why such simple ideas haven’t already occurred sooner, ha, ha, ha… Kudos for that!
I’m really pondering it and I think I’ll implement on my sites, too. Thank you!

Angelica Costa

July 12th, 2013

Very awesome advice. I am definetely re-think my link strategies.

Tim

July 12th, 2013

Interesting that the links on this page don’t really look like links. They look like regular text. To someone that has difficulty seeing the color blue, this is especially true. In addition, the blue you are using is pretty dark.
Don’t you think the links on this site should at least have underlines?

Alex

July 12th, 2013

Thanks for the in-depth guide.

Arshad

July 12th, 2013

‘Study in link readability’ (mentioned in this article-PDF) is a great source for designers and also please read “2.1 Colors and Wavelengths” in that PDF; useful, interesting, etc.

Thanks John.

Sreejesh

July 12th, 2013

Amazing. I never thought links needs so much attention like this. Thanks for sharing it.

Douglas

July 12th, 2013

Great ideas, I find that making the link bolder and only having the underline display on mouseover works well, but then again I rarely make links blue, so what do I know.

Also, pay attention to the :active pseudo class, you can really make your link more user friendly by changing to a lighter shade when it is being clicked.

John Macpherson

July 13th, 2013

@Joe Thanks for that tip. My personal preference is to have a different coloured (UK spelling) underline but i never knew if you left it then it inherited. Thanks!

@tim The links on this site show as an underline for me.

Thanks for the other comments, i certainly learned a lot writing this article and hope i can do another here soon.

Jesper

July 13th, 2013

Thanks for posting this great article! I particularly like the idea of using border-bottom. However…

When an image is placed inside an anchor with a border-bottom, I can’t figure out how to remove the border-bottom from the image link. Can anyone come up with a way to remove the border-bottom from the anchor, when the anchor contains an image (without using JavaScript :-)?

Anthea Cossette

July 13th, 2013

Agree 100% with this statement:
“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.”
Great article!

Justin

July 14th, 2013

Thanks for sharing this John, I had no idea you were going to make hyperlinks look a little better than they usually are, I’m going to implement this technique into my blogs posts. Thanks!

Jacob Gube

July 15th, 2013

@Jesper: Try:

a img { border:0; }

If that doesn’t work:

a img { border-bottom:0; }

If that doesn’t work, send me a link that shows the issue so I can study it.

Tim

July 15th, 2013

@John Macpherson They were not for me when I made my comment. Someone must have updated the CSS after I commented.

Geoff

July 15th, 2013

@jacob: That only removes the border on the img element not the anchor?

Yuna

July 16th, 2013

John,

Great article, I’ve used this technique a lot in the past. One word of caution, older browsers (example IE7, blergh) don’t always go well with border-bottom. If you still need to support those, test it well. (display: inline-block will do the trick actually.)

Alan Smith

July 16th, 2013

As per me hyperlink(landing page) should contain informative content as per text on which we give hyperlink.

Lars Faye

July 17th, 2013

@Jacob, that wouldn’t work, as the border is being applied to the anchor element, not the image element. CSS does not have a way to target something like “image with anchor around it”, since that is the reverse of the cascade. I had this same issue with a client wanting a background color on every link upon hover.

One fix is to apply an additional class to the anchors that contain images, such as

a.image-link {border:none}

To make it dynamic though, I had to use JS.

Leave a Comment

Subscribe to the comments on this article.