Do you use underlines on links?

Last updated by Tiago Araújo [SSW] about 1 year ago.See history

Ensure your links are easily distinguishable from the background and surrounding text by always making them underlined. Users expect underlined texts to be a link; and links to be underlined.

Keep in mind:

  • Underlines are not necessary on obvious links, like menu items or buttons
  • Never underline a text that isn't a link - Use bold or another styling if you need emphasis.

When you develop on SharePoint, you do not have a full copy of web.config in your Visual Studio project.

Figure: Bad example - Never underline the text when it isn't a link

For more information on this, please go to SSW website.

Figure: Good example - The link is nice and clear

Tip: You can use a different color on underlines as a nice touch.

Mouse hovering effect

Rollovers are also important as they offer visual feedback to a user that this link that will take them somewhere. While there is a myriad of ways to do this; you can't go wrong with a color change. Hover the good example above to see this working.

The basic CSS for changing the link color on hover is:

a:hover { 
    color: #cc4141;

CSS - Avoid borders on text

The default implementation of underlines in CSS is:

text-decoration: underline;

Another way to add look-alike underlines is by adding border-bottom: 1px;, for example. In this case, you can even have a dotted underline. However, it's not recommended you use this method unless you are a designer and know what you are doing. It may create extra pixels in the interface, which can potentially cause other problems in your UI:

Figure: Bad example - The different border size pushes the content down

border problem 2
Figure: Bad example - Borders going over the text area

We open source. Powered by GitHub