http://impresslab.com/design/why-not-to-underline-hyperlinks/
While many would say that you should underline hyperlinks (using text-decoration:underline;), we think otherwise. Instead of using the underline feature that is standard in hyperlinks, you should use a bottom border.
The reason for this is from a readability standpoint. If you use the standard underline, the line will be cutting through the descenders of your type in letters like g, y, and p. This is bad practice since you are making it harder to read these letters, especially for serif fonts that are already a bit hard to read. Consider the standard hyperlink style with an underline:
The Solution
We instead recommend that you use the border-bottom style for your hyperlinks:
- Code: Select all
p a {
color:#3366CC; /* Blue font color, or whatever you want */
text-decoration:none; /* No underline */
border-bottom:1px solid #ff9900; /* Orange underline */
}
p a:hover {
color:#333333; /* Gray font color, or whatever you want */
text-decoration:none; /* No underline */
border-bottom:1px solid #CC0000; /* Red underline */
}
This style will look like this:
The bottom border does not cut through the descenders of the type.
You can also specify other links for active and visited. Notice that using the border-bottom style for links opens many more color possibilities in addition to the enhanced readability. You can use red or black or green underlines, whatever color fits your site best.
The difference may be subtle, but is more pronounced when the difference between both styles is viewed:
Simple tricks such as this are what help separate good design from great design with a focus on readability. You do not have to use this technique for all hyperlinks, just your main body text which is usually smaller font and harder to read. For example, headers are already easy to read, so using the bottom border technique on hyperlinks will add little value.
