Design View | Articles and opinion on design professionalism, technique and culture by Andy Rutledge

Why and How: Styling Text Links

March 19, 2008

Text link styling is a design issue impacted by all of the very same issues that affect the overall site design. Poorly styled text links can detract from or ruin an otherwise well-designed page, while appropriately styled text links can add significant support to the brand and enhance the user experience. Since text links are a significant feature of the online experience, it’s an element of design worth getting right.

To have the right design approach to styling text links, you must first fully understand what precisely you’re working to accomplish by styling them. Here it is useful to look directly to fundamentals because when styling links we are generally working to do one or more of the following fundamental things:

There are other aims in addition to these that your text link styling may also work to accomplish, like indicating an already visited link, indicating an external link, or indicating additional functionality (flyouts, dropdowns, popups). But in this article I want to concentrate on the fundamentals of what are often considered to be nothing more than arbitrary decisions or are relegated to pure aesthetics. For like everything else on a page, link text must be designed—with as much attention to contextual effectiveness and appropriateness as the other page elements.

The Basics

Color
In a general sense, if you’ve made links conspicuous and have distinguished them from non-link text you’ve done a pretty good job. Even so, there are opportunities for mistakes with these simplest of link text design actions. For instance, color is an efficient way to make links conspicuous and to distinguish them from the rest of the text, but consider the quite common instance of a color blind site visitor. About 8% of men and 0.4% of women have some sort of visual color deficiency. These statistics mandate that every CSS developer take this branch of accessibility into account when making link text styling decisions. For this and other reasons, it often makes good accessibility sense to be sure that a link’s color is not all that distinguishes it as a link upon first glance. Otherwise, links can disappear into the page for those with certain common disabilities. Take for instance these examples:

Colored links as seen normally
Colors as seen with Deuteranopia
Colors as seen with Pratanopia
Colors as seen with Tritanopia

As you can see, different forms if color blindness can cause some colors to become indistinguishable from others. If your links then have no other distinguishing features, they’re invisible to some users.

One helpful tool for checking on how colors are affected by various forms of color blindness is Color Oracle. As it states on the site, it takes the guesswork out of designing for color blindness. I highly recommend it. I use it almost every day and it is likely that you should, too.

Decoration
Given that color is not always sufficient indication of a text link, decoration is another basic choice for distinguishing text. Decorations can include an underline, various border types/positions/configurations, background colors/images, and even less advisable decorations like a line-through.

An underline is a standard and universally recognized way to augment color as a text link identifier. In fact, it can be argued that even without using a different color, an underline is sufficient decoration for distinguishing links. Beyond a simple underline, the aforementioned elements can be used in all sorts of ways to achieve different and interesting results. For instance:

Various Link Decorations
Other considerations

Differentiating text links by color and/or decoration is just a fundamental approach. Your decisions for what color or what sort of decoration to use hinges on some important issues that reach beyond considerations of contrast and distinction. So these decisions cannot often be made arbitrarily. After all, you’re designing for a specific client with a specific brand in a specific context and for a specific audience (or set of audiences). If you’re faithful to your responsibilities, these factors must impact your text link styling decisions.

Context and Brand Consistency
For instance, if the target audience is primarily made up of people who are not very web-savvy it makes sense to choose an underline for all links, since this is a universally recognized indication of a link. If the brand’s colors are red and white, it makes sense that links might be red rather than some color chosen from outside of the brand’s color palette. If the logo or some other significant element of the brand’s identity includes text on a colored field (like an enclosure), it makes sense that links might either have a background color or perhaps might have one on the :hover state.

Aside from purely brand-centric considerations, there are basic style consistency considerations to keep in mind. The overall site experience consistency and stylistic integrity can be supported by your choice of link styling. This sort of approach helps to make the brand or stylistic experience to be more immersive and gives the design greater scope. Generally speaking, this sort of integration of style or brand generates a more positive impression in the minds of users. Here are some examples of brand- and style-consistent link styling:

Erratic Wisdom has links styled in the minimalist and high-contrast manner of the site's identity:

Erratic Wisdom

Design View's links are decorated to reflect the character of the branding and the content delineations:

Design View

J.R. Velasco's site has a strong consistency of identity and styling:

Jesus Rodriguez Velasco

By contrast, here are some examples where link styling might stand to be reevaluated. Behance might get some brand benefit from working to reference its own branding:

Behance

While FontShop might consider the same thing:

FontShop

In conclusion, it just makes good design sense to treat text links with the attention and consideration they deserve. There’s more to be gained from styling text links than mere differentiation from non-link text. Spend time considering ways that you can use these pervasive and important page elements to support your design efforts, your client’s brand, and the site visitors’ experience.

Archives

Archive

Practice