person jumping - Photo by Paul Gilmore on Unsplash

Body copy link styling — the right way

Link styling inside of body copy seems to have been a hot debate for quite some time. To underline or not to underline? This, is the burning question.

Recently, I have been asked for a second opinion regarding link styling inside of body copy. There is a couple of ways this is done, but seems debatable.

Wind power field with Confucius quote: Life is really simple, but we insist on making it complicated.
Wind power field with Confucius quote: Life is really simple, but we insist on making it complicated.

Dont make me think — Steve Krug

In this delightful read, Steve makes the clear point that for the best user experience you need to make the design and elements of your application so clear that the user never has to question their next move.

“It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.”

Steve Krug

The trend is that links with underlines are old and clunky and could do with a rethink. After a research study by the University of Hamburg, Google decided to ditch the underlined link in search results in an attempt to improve readability and create a cleaner look, Bing started testing shortly after.

Keep in mind that as long as links are glaringly obvious at first glance it doesn’t matter if the link underline has disappeared into oblivion.


The case for link underlines

It is recommended that links inside of blocks of text be underlined but you should never underline anything that is not a link. The Hamburg study discovered that most users found underlines made reading the content more difficult, but failed to make the point from an accessibility perspective. Users with colour blindness or low vision have to think carefully about it or may not even noticed there is a link if it does not have an underline.

“Users have a deep-rooted connection between the blue underline and clickability: anything else simply does not get clicked as often”.

It’s a little unfair to remove the underline, especially when it’s proven that making text harder to read actually helps you to retain it in memory better. That’s why Sans Forgetica was created.


The case against link underlines

Link underlines are a little clunky and look older than the internet itself.

You may argue that by having an underline you are discriminating against people with dyslexia but the CSS 3 spec specifically allows for this by skipping descenders when drawing an underline. This is however, based entirely on the User Agent and not controllable, but will be further defined in CSS Level 4.


Conclusion

Keep the underline in body copy text or stop putting links inside of the body copy.

  • You can use text-underline-position to give the underline some space, this way it does not interfere with the text and is clearly readable.
  • You could even style your own underline and change the opacity on hover using border-bottom.

If you can’t stand the sight of underlines anymore, write the content and place call to action buttons below the paragraph. It’s likely people will skip over the content and click the button if it has a meaningful name and shining as bright as the sun.

  • That way you dont have ugly underlines
  • You don’t need to worry about users having trouble reading the text
  • You won’t lose clicks because they are hidden in amongst the copy


Leave a Reply

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