Ephram Zerb

Recently, Jonathan Nicol, who is ever so generous with his comments on this site, curated a nice collection of approaches to styling and denoting links. To return the favor of furthering the conversation, here is my remix of the topic. Styling links is something I have thought about for a while and is a recurrant problem with every new website design. Before this topic becomes less relevant to me, I figured I might jot down some thoughts on how I have approached this design decision in the past.

As I was writing this, I found things getting very drawn out, so this post will be mostly confined to links that live within content (i.e. inline links).

Jacob Nielsen’s Design Guidelines for Visualing Links is probably the best document to provide prescriptive advice on styling links. The value of the work lies in the quantifiable HCI research that led to the final synthesis. My ideal starting point for a link is largely the prototypical link that would emerge from applying Jacob’s advice: blue and underlined, in all of its default-browser-styles glory.

I favor, what I’ve referred to in the past as, design conservatism – which, unfortunately, can be a really misleading term to use. The central concepts of the approach are tradition and culture.

Tradition can be seen as the collective synthesis of meaning across a culture. By ignoring it, you run the risk of diluting the communicative potential of your work. There’s such a long and established tradition (largely thanks to browser defaults) of denoting links with blue, underlined text that having such treatment not be a hyperlink is as jarring as an inverted traffic light. By appealing to tradition, you leverage cultural expectations of interaction and meaning for greater clarity. Maximizing perceived affordance is a closely related strategy, but I feel that confines the approach to interaction design.

From Type: The Secret History of Letters:

It has been remarked that ‘extreme conservatism as to the presentation of reading matter has always been the oustanding characteristic of the reading public’. In other words, if it looks strange and unfamiliar, the reader won’t go near it.

In the case of links, the most conservative choice would be to make them blue and underlined. This represents a starting / reference point. But since links don’t live in isolation, but rather in the context of a web page that introduces its own set of design tensions, this style is not always the end point. One needs good reason to transcend the treatment, where the end result extends and never subverts the tradition of the device.

Putting Blue in Context

One of my favorite takeaways from toiling through Robert Bringhurst’s Elements of Typographic Style was a morsel of advice on how to choose the appropriate typeface. I think these excerpts sum it best:

Choose a face whose historical echoes and associations are in harmony with the text.
…
If, for example, you are setting a text by a woman, you might prefer a face, or several faces, designed by a woman
…
But perhaps a text by a French author, or a text dealing with France, might be set in a French typeface.

These assertions tie a decision like choosing a typeface closely to the cultural context under which it was conceived - in other words, a cultural artifact always carries with it the baggage of its past. Similarly, choosing blue speaks heavily to the history of the medium, which can often be too specific or wrong under the circumstances of your design goals. Some of the first sites on the web were those created by those with ties to academia, technology and government. The pedigree of the style make it an appropriate choice for non-profits, academic sites, archives, sites with a long heritage and those made for the tech-savvy audience. Sites meant for ubiquity, like Google, are complimented nicely by adopting this style as the core of their visual language. Communicating a novel, modern brand with blue underlined text can prove a challenge, making the color a good candidate to cycle through some transformations.

More obvious reasons not to use blue as your link color is if the content is set on a dark background or if it clashes with the already-defined color pallette of a brand’s identity.

When I go through design iterations, something I frequently try out is setting the link color to one found in the identity’s palette – especially when it’s a color that provides good contrast within the design. I like the way this associates “action” (that of clicking on a link) and instills a certain dynamicism to a company’s brand. This doesn’t always work, but using an identity’s color to constitute a specific piece of your visual language is also an option: doing so with buttons and headings can also further a cohesive and logical experience. Dan Cederholm’s Cork’d serves as a nice example of this:

Notice how the colors of the buttons “search” and “sign up!” match the wine glass logo. The relationship suggests: “search cork’d” and “sign up (to) cork’d”.

Transcending the Conventional Underscore

Getting past the underscore is not as natural as choosing a different color for the link, as the device is more closely associated with the concept of the link than the color is. Still, the default underscore (text-decoration: underline) leaves something to be desired.

I find underlined links can often be disruptive to the rhythm of the text. Content densely populated with such links begins looking busy with all of the extra lines crowding the leading. The default underline also tends to cut off the characters’ descenders. For example, take text set in 11px Verdana (figure 1). It is composed of 81 pixels, with the underline contributing 70 more. This effectively amounts to a 45% increase in the footprint of the link, which can quickly add up 1 + 1 = 3 clutter.

figure 1 - Along with obscuring descenders (notice the bottom of the ‘g’), the default underline adds 45% more pixels to this text. On link-heavy sites like Wikipedia, this can easily become a burdensome treatment at the expense of the content.

From my perspective, link text that distinguishes itself by color alone (without an underscore) is a bit too anemic and fails to stand out. More importantly, I’ve always taken to the almost-axiomatic idea, endorsed by accessibility professionals, that color alone shouldn’t be used to convey meaning. A crude test you can perform is take a screenshot of your website, drop it in Photoshop and desaturate the image. Upon desaturation, you might also find that the color of the type is far too light to be a comfortable read. Simply removing the underline is not the solution for me.

Instead, I find the light-colored underline to be a pretty fair compromise. It allows you to maintain the underscore to denote the link while minimizing the noise a conventional underscore can introduce. Most people use a light grey, or a darker, but dotted underline (effectively same thing). To accomplish this, I’m currently using a light color from this site’s color palette to underline my inline links. The only way to achieve this is to use the border-bottom CSS property, which has the added benefit of placing the underscore below your descenders.

Having made the leap of faith to embrace links with a light underline, this style can now serve as a valid future starting point.

I think it’s time to wrap up this overwrought prose. To be continued in the comments.