Hyperlinks should be seen but not heard

With all the underlines disrupting the flow of the prose, reading link-rich hypertext can be difficult, akin to reading some early desktop published newsletters or HTML email (I can use 4 different fonts at 3 different point sizes in 8 different colors? And italics? Then I shall do so!). All the underlines disrupt the flow of the prose and add extra emphasis to words and phases that might be unwanted in the context of normal text. The same problem occurs when setting hyperlinks in bold text. Making links a different color with no underlines is an option, but sometimes it’s hard to tell the difference between text and links.

If possible, simultaneously reading hypertext and using hypertext should be simple. The text should be as readable as plain text but you should also be able to easily discern linked words. As with most design issues, balance is the key.

Over the past few weeks I’ve noticed a number of sites using CSS borders instead of underlines to designate hyperlinks (like this). As Martha Stewart would say, this is a good thing. Used properly (dashed, dotted, or with a lighter color), the CSS border techinique makes for a more subtle hyperlink; it reads easier but the reader can still tell where the hyperlinks are at a glance without undue emphasis on the linked words. The technique is a CSS hack**, doesn’t work on some older browsers, and is probably not standards kosher, but it gives the Web designer more flexibility in designing their hypertext.

** Here’s the CSS code for adding dotted underlines to your hyperlinks:

A:link {
    color: #000000;
    text-decoration: none;
    border-bottom: #666666;
    border-width: 0px 0px 1px 0px;
    border-style: none none dotted none;
}

Adjust the link color, the border color, the border width, and the border style (solid, dotted, etc.) to suit your specific needs. In order to not display the border on linked images, you’ll have to specify the appropriate borders for the IMG tag in your stylesheet. That code can probably be consolidated some, but I’ll leave that in your capable hands.