Styling links

A couple of months back I wrote a post about the importance of making links look like links. From the comments left by readers it was clear that peoples opinions differ widely on the best way to style links, so I thought I’d follow up with a brief survey of the various ways it is possible to make links stand out on a page.

I won’t be talking in this article about links in navigation menus, headings, or buttons, only inline links that appear within the body copy of a web page. We cannot rely on visual context to make it obvious to users that inline links are clickable, and therefore their appearance is crucial.

Browser default

Lets start by considering how hyperlinks look when they have no CSS styling applied to them. In any mainstream web browser links are blue and underlined by default, visited links are purple, and there is no hover behavior when the user moves their mouse over a link. Letting the browser determine the look and behavior of links is an approach favored by usability advocates such as Jacob Nielsen, since it won’t disrupt a user’s expectations of how a webpage functions. Nielsen doesn’t admonish designers for changing the color of links, but he considers hover states to be unnecessary visual clutter, and recommends that inline links should always feature an underline.

Mimicking the browser default

For those who adhere to usability principles but still want to get their design groove on, styling links to closely emulate the default browser behavior is a popular option. Consider web application developers 37Signals, whose own website features underlined links colored a tasteful navy blue, with no hover state. Because links styled in this manner look and behave very much like the browser default they are recognizable even to a novice web user, but the customized blue integrates better with the overall page design and stops the site looking ‘vanilla’.

Changing the link color

For designers who consider underlines to be overkill, color differentiation is enough to make links stand out from surrounding text. This approach works well when a unique color is used to style links, however problems can occur when links and headings share the same color. Without an underline it is tricky to tell when text is colored to indicate that it is clickable, and when it is colored merely for decorative effect.

Getting creative with the underline

By using the CSS border-bottom property it is simple to control the look of a link’s underline. For instance you can make it a different color to the link text, make it thicker that one pixel, or make it dotted.

A dotted line underneath link text provides a compromise for designers who dislike the severity of a solid underline but still want their links to stand out. Dotted underlines are not used on a great many websites, possibly because of the fact that browsers render the dots differently (in Internet Explorer 6 a CSS dotted line looks like a series of dashes). I suspect that this unpredictability has been a turn-off for web designers who want their layout to render consistently between browsers, although that is going to change as IE7 usage grows.

Bold

One of the simplest ways to add emphasis to links is to make them bold. Some designers consider that bolding alone is sufficient to make links stand out from surrounding copy. This is practical on personal sites, where the designer can carefully monitor site updates and make sure that link text is the only text that is ever bolded. For sites where the client or a third party is in charge of making content updates links should still be a different color, or underlined, to avoid potential confusion.

Background color

Changing the background color of links is usually reserved for their hover state (see below), but on some sites links have a background color all the time. Usually the background color is quite striking and the link text is reversed out, but in some cases a more subtle background is opted for.

Hover states

As I mentioned earlier, by default links do not have a hover state associated with them – in other words, the visual appearance of a link doesn’t change when the user moves their mouse over it. The widespread adoption of CSS for styling text in the late 1990s changed that situation, and today most links feature a hover state. A hover might be as simple as the text changing color, or the removal (or addition) of a decorative underline. More adventurous possibilities are changing the background color of a link, or varying the thickness of its underline.

Visited links

Links to previously visited pages are traditionally styled to be distinguishable from unvisited links. By default they are purple, whereas an unvisited link is blue, and this difference provides users with a visual clue as to where they have been before. When it comes to styling visited links the key is to give them reduced visual emphasis. This can be achieved by making them a less eye catching color than unvisited links, removing their underline, or adding a graphical cue such as a tick next to them. Not so long ago there was a trend to style visited links with a strikethrough – I am not a fan of this technique at all, because it obscures the text and worse still, implies that that the link is inactive. Thankfully examples of this misguided approach seem to have dried up.

Links that open a new window

When clicking a link will trigger the launch of a new browser window, it is courteous to provide a cue that this is going to occur. The addition of a small ‘new window’ icon to the right of a link lets users know that a browser window is going to open, without the need for a written explanation.

Conclusion

While I would hardly say that the sky is the limit when it comes visually styling links, there is certainly enough spectrum to get creative with the way we design them. The examples I’ve shown in this article cover all the different techniques I’m familiar with, but if you think I’ve missed one out please post a comment below.

Further reading

Where are all the visited links?

Today many websites have done away with the concept of visited links, choosing to style them identically to unvisited links. Lisa Herrod wonders why.

Don’t be the weakest link

Just because you can style a link any which way you fancy, doesn’t mean that you should. Paul Boag explains ‘best practice’ techniques for writing and styling links.

Guidelines for Visualizing Links

Love him or loathe him, Jacob Nielsen delivers some solid advise about the usability implications of changing the appearance of links.