The Definitive Guide To Styling Web Links

Advertisement

Hyperlinks (or links) connect Web pages. They are what make the Web work, enabling us to travel from one page to the next at the click of a button. As Web Standardistas1 put it, “without hypertext links the Web wouldn’t be the Web, it would simply be a collection of separate, unconnected pages.”. So without links, we’d be lost. We look for them on the page when we want to venture further. Sure, we pause to read a bit, but inevitably we end up clicking a link of some sort.

Styling Links

When you style links, remember that users don’t read; they scan. You’ve heard that before, and it’s true. So, make sure your links are obvious. They should also indicate where they will take the user.

Let’s start by looking at CSS selectors and pseudo-classes:

  • a:link { }
    Unvisited link.
  • a:visited { }
    Visited links.
  • a:hover { }
    The user mouses over a link.
  • a:focus { }
    The user clicks on a link.
  • a:active { }
    The user has clicked a link.

tlc172
The TLC3 uses not only plaint text links, but also icons to communicate the corresponding file types.

Ensure Contrast

Links should stand out not only from the background but from the surrounding text. If the font color is black and the link color is black, you have a problem. Make your links stand out by using one or more than one of the following techniques.

  • text-decoration: underline;
    Underline.
  • font-weight: bold;
    Bold.
  • font-size: 1.4em;
    Enlarge.
  • color: #ed490a;
    Color.
  • background-color: #c0c0c0;
    Background.
  • border-bottom: 2px solid #a959c3;
    Border.

If you decide to make links blue, then make sure no other text (including headings) is blue, because users will expect it to be a link, too.

Also, don’t underline text that isn’t linked because users expect underlined text to be a link. And keep in mind users with poor sight. Red won’t stand out to someone who is color blind, so consider underlining or bolding links, in addition to changing the color.

komodo4

hicks5

A helpful technique that I always use is to slightly blur the focus. Links with good contrast should still stand out when you look at the page.

Don’t Forget About Visited Links

Visited links are often overlooked, but they are very helpful, especially on larger websites. Knowing where they’ve been before is helpful for users, whether because they want to avoid pages they’ve visited or to make a point of visiting them again.

Give visited links a darker shade of color, so that they stand out but aren’t as obvious as unvisited links.

google6

lee7

Use the Title Attribute

The title attribute is usually overlooked, but it’s a convenient way to add descriptions to your links and can be especially useful for those who rely on screen readers.

<a href="example.com" title="This is an example link">Example</a>

Use Button Styles

To make really important links stand out—say, a call to action or a “More info” link at the bottom—use a button style. And you can reuse the style again and again without having to edit any graphics.

notable8

ux9

For more information, check out “Super-Awesome Buttons With CSS3 and RGBA10” and “Call to Action Buttons11.”

Hover State

Offering feedback to users that they’re hovering over a link is good practice. The best way to do this is to change the background color, change the text color or remove the underline.

a:hover { text-decoration:none;
text-shadow: 0 0 2px #999;
}

adii12

cars13

The mouse pointer usually turns from an arrow into a hand when the user hovers over a link. But this functionality is sometimes lost; for example, in IE when the link contains a span element, or on “Submit” buttons. Fix this by adding the cursor type via CSS.

a:hover span { cursor: pointer }

Active State

Provide visual feedback to the user to indicate that they have clicked a link, so that they know to wait. One nice effect is to move the link down one or two pixels, which gives the link the appearance of being pressed.

a:active { padding-top: 2px; }

tim14

elliot15

Apply Padding

Here is a good usability tip. Add padding to your links. This way, the user doesn’t have to hover over the exact point of the text. Instead, they can hover in proximity and still be able to click. This works well for navigation links.

a { padding: 5px; }

simple16

Use Icons for File Types

If your links point to files in various formats, inform the user of as much using icons. This prepares them for the file type they are about to open, whether it’s PDF or JPEG, for example.

tlc172

For some great resources, check out “Fam Fam Fam Silk Icons18” and “Social Media Mini Icon Pack19.”

Use Icons for Recognition

Just as you would use icons for file types, use icons to identify where links go or what they do. This user can more quickly absorb a visual icon than text.

sam20

wufoo21

Make Anchor Text Descriptive

Use meaningful text, not “Click here.” The problem with the latter is that it forces the user to read around the link to understand why they should “Click here.” Anchor text such as “See Britney on a beach” speaks for itself. It’s also more SEO-friendly.

clickhere

Link Your Logo

Always link your logo to the home page. Most users expect this convention across the Web. That said, don’t assume that users know this. Regular surfers expect it, but a number of users still look for the “Home” link.

<h1><a href="/" title="Homepage">Site name</a></h1>
h1 a {
background: url(images/logo.gif) no-repeat top left;
display: block;
text-indent: -9999px;
width: 200px;
height: 60px;
}

Don’t Open New Windows

Just don’t do it. Let the user decide when and where to open a new tab or window. Users expect links to open in the same window. If you really must do it, at least add an icon to show that this will happen. There are exceptions; for example, it you don’t want to break the flow of a check-out process.

Micro-Formats

As the Web becomes more semantic, consider incorporating micro-formats into your link structures, to help machines understand how a link fits into a page and its relationship to other pages. For example, the following…

<a href="http://myfriend.example.com" rel="friend met">My Friend</a>

tells search bots that this text links to a friend who I’ve met, which is useful for discovering connections between links. You can also read more about micro-formats22.

Showcase Of Links In Web Design

Komodo Media23

1komodo24

Hicks Design25

1hicks26

Notable App27

1not28

UX Booth29

1ux30

Max Voltar31

max32

Elliot Jay Stocks33

1elliot34

The TLC35

1tlc36

Sam Brown37

1sam38

Adii Rockstar39

1adii40

Forty Seven Media41

14742

Stefan Persson43

1stefan44

Huge45

1huge46

AWP47

1awp48

Simple Bits49

1simple50

Andy Rutledge51

andy52

Brian Hoff53

hoff54

Simon Collison55

simon56

Further Reading

(al)

Footnotes

  1. 1 http://webstandardistas.com
  2. 2 http://www.thetlc.org.uk
  3. 3 http://www.thetlc.org.uk
  4. 4 http://www.komodomedia.com
  5. 5 http://hicksdesign.co.uk/journal/
  6. 6 http://www.google.com
  7. 7 http://www.leemunroe.com
  8. 8 http://www.notableapp.com
  9. 9 http://www.uxbooth.com/
  10. 10 http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
  11. 11 http://www.leemunroe.com/call-to-action-buttons/
  12. 12 http://adiirockstar.com/
  13. 13 http://carsonified.com/blog/
  14. 14 http://maxvoltar.com
  15. 15 http://elliotjaystocks.com
  16. 16 http://simplebits.com/
  17. 17 http://www.thetlc.org.uk
  18. 18 http://www.famfamfam.com/lab/icons/silk/
  19. 19 http://www.komodomedia.com/blog/2008/12/social-media-mini-iconpack/
  20. 20 http://sam.brown.tc/
  21. 21 http://www.wufoo.com/
  22. 22 http://microformats.org
  23. 23 http://www.komodomedia.com
  24. 24 http://www.komodomedia.com
  25. 25 http://hicksdesign.co.uk/journal/
  26. 26 http://hicksdesign.co.uk/journal/
  27. 27 http://www.notableapp.com
  28. 28 http://www.notableapp.com
  29. 29 http://www.uxbooth.com/
  30. 30 http://www.uxbooth.com/
  31. 31 http://maxvoltar.com
  32. 32 http://maxvoltar.com
  33. 33 http://elliotjaystocks.com
  34. 34 http://elliotjaystocks.com
  35. 35 http://www.thetlc.org.uk
  36. 36 http://www.thetlc.org.uk
  37. 37 http://sam.brown.tc/
  38. 38 http://sam.brown.tc/
  39. 39 http://adiirockstar.com/
  40. 40 http://adiirockstar.com/
  41. 41 http://www.fortysevenmedia.com/
  42. 42 http://www.fortysevenmedia.com/
  43. 43 http://www.stefan-persson.se/
  44. 44 http://www.stefan-persson.se/
  45. 45 http://www.hugeinc.com
  46. 46 http://www.hugeinc.com
  47. 47 http://www.awpny.com/
  48. 48 http://www.awpny.com/
  49. 49 http://simplebits.com/
  50. 50 http://simplebits.com/
  51. 51 http://andyrutledge.com/
  52. 52 http://andyrutledge.com/
  53. 53 http://www.brianhoff.net/
  54. 54 http://www.brianhoff.net/
  55. 55 http://colly.com
  56. 56 http://colly.com
  57. 57 http://37signals.com/svn/posts/1048-padded-link-targets-for-better-mousing
  58. 58 http://www.useit.com/alertbox/9605.html
  59. 59 http://www.useit.com/alertbox/20040510.html
  60. 60 http://www.andyrutledge.com/styling-text-links.php
  61. 61 http://www.askthecssguy.com/2006/12/showing_hyperlink_cues_with_cs_1.html
  62. 62 http://24ways.org/2009/dont-lose-your-focus

↑ Back to top Tweet itShare on Facebook

Lee Munroe is a freelance web designer from Belfast. You can see his other writings on web design on his blog.

Advertising
  1. 1

    great article, thanks
    couldn’t agree more

    0
  2. 52

    wow, tell the bots via micro-format about a ‘friend met’ – very interesting. have to find out more bout that.
    Great posting.
    cheers

    0
  3. 103

    I wonder, why designers rarely use :visited on links, sometimes it’s annoying (on wiki-style sites or tutorials sites), so I have to write custom css for sites that I visit often.

    I found that when site background is bright, it’s better to use blue-coloured links (dark-violet for visited links), and when background is dark, orange links look cool (pale yellow for visited).

    0
  4. 154

    Firstly, all of you guys bitching and complaining about the links on this site not opening a new window need to realize something; there is an equal number of us who absolutely hate it when links open new windows—but we have a good reason for it. What is that reason you ask? Consistency. I don’t know about you guys but I like to be able to expect. I expect that when I click any link it will open in the window I am currently in. I don’t like to be surprised—having a 50/50 chance of the link opening in a new window. Luckily by control-clicking links I can rely on them always opening in a new tab, regardless of what is specified in the HTML. Similarly if I knew that links would always open a new window I could adjust my browsing behavior accordingly. What seems more logical to you guys, links which always open a new window, or links which simply take you to the linked content in the view you are currently in? Yes, there are cases where opening a link in a new window makes more sense, to you, or me, but maybe to someone else it doesn’t—the point is it should be up to the user (you, me, and the other guy) to decide when we would like a link to open in a new window, tab, or in the same window. Personally I applaud Smashing Mag for sticking to what’s right—giving us control.

    Now, about the color of links. Although the links in this very article are as you say they should be, i.e., seperated from their surroundings by color and underline, what about the other links present on the page? I’ve struggled with this a number of times myself. The links in the footer, for example, are all grey and have no underline… oh wait, not all! The “Sven Lennartz & Vitaly Friedman” and “Back to top” links are underlined and blue, but not the links of each category. Why? What about the links in the Interact and Popular bar? They too only become obvious links only once the user rolls over them. From a visual standpoint I understand all of these decisions… but how and why do we justify them?

    0
  5. 205

    I’ve been wondering lately if there are any guidelines for making links stand out with css audio properties. Are the any consistent defaults there along the lines of “links are underlined and blue” and “don’t make them sound like X or users will think they are something else”?

    0
  6. 256

    I think its a great article thanks

    0
  7. 307

    What’s Going down i’m new to this, I stumbled upon this I’ve discovered It absolutely useful and it has aided me out loads. I hope to contribute & assist different customers like its aided me. Good job.

    0
  8. 358

    Interesting thing about Opera is that there’s an option in preferences to underline visited links and it seems to be checked by default, so the browser applies ‘text-decoration: underline’ for visited links even if you specify ‘text-decoration: none’ for ‘normal’ link. No other browser seems to do it.

    You have to literally declare ‘text-decoration: none’ for visited links if you declared it for ‘normal’ state using ‘a:link’. See the code below.
    a:link { color: #e63e62; text-decoration: none; }
    a:visited { color: #ed7b93; text-decoration: none; /* up your ... Opera */ }
    a:hover { color: #e61b47; text-decoration: underline; }
    a:active, a:hover { outline: 0 none; }

    2
  9. 409

    Great info! Thanks for this!

    0

↑ Back to top