Secret ingredients to quality software


Do you use underlines on links?

Created on 16 Feb 2015 | Last updated by Brady Stroud on 21 Feb 2021 11:54 PM (2 months ago)

Users expect underlined texts to be a hyperlink. You should visually differentiate links by underlining them. Of course, this is not necessary on menus, obvious links, or buttons. Never underline a text that isn't a link - Use bold or italics if you need emphasis.

Figure: Never underline the text when it isn't a link (even Scott Guthrie agrees!)

The default implementation of underlines in CSS is " text-decoration:underline; ".

Another way to add look-alike underlines is by adding " border-bottom: 1px solid #000; ". 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 creates extra pixels in the interface, which can potentially cause other problems in your UI, for example:

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

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

Adam CoganAdam Cogan
Rebecca LiuRebecca Liu
Tiago AraujoTiago Araujo

We open source. This page is on GitHub