Usability-Conscious Link Styles Done In CSS

The main reason why most sites use similar styles of links is to avoid confusing their users. When compiling my list, usability was a very important criterion for me and I excluded anything that did not look like a link at first glance.

In this post, I will first go over the usability conventions and then explain how to design great link styles that respect them. I will also explain the code behind the more intricate CSS3 examples.

Embracing The Usability Restrictions

Nobody wants to confuse their users, that’s a given; however, even keeping this in mind, a lot more can be done with links, given that you understand the conventions they have to follow.

  • Color — This is one of the main things to consider when designing a link. Studies show that an effective link has a distinct color, different from the main content color.
  • Contrast — It is important to consider the contrast of the link with the main content and with the background of the page. An effective link will stand out, but won’t overshadow the rest of the text (unless it is intended to do so).
  • Style — There are many styles that can be applied to links: adding underlines, making them bold, changing font family, and more. A link should not have the same style as other elements on the page.
  • Behavior — Often, links are unsuccessful simply because they do not behave the way users expect them to. The hand cursor, change of style upon hover, immediate response — these are all important behaviors of a successful link.

Keeping in mind these restrictions, you can easily design effective and good-looking links. Some of the CSS properties that can be used are: background, color, font, text-decoration, border, etc. Many combinations can be found, while following the conventions mentioned above.

I would like to warn you against using links that are the same color as the content around them, even if they have other styling; they will be difficult for most people to identify and could be mistaken for emphasized text. I’m an experienced user and I still have issues with those.

Leave a Reply

Your email address will not be published. Required fields are marked *