Boycot the underline

To many people the humble underline has been used as a form of emphasis, and while once upon a time it was OK, the advent of the web browser has made this practice a usability no-no.

When we’re online, the underline is indicative of a link, a way to communicate to the user that this is something that is actionable – in this case being to reveal more information. How the information is revealed may vary. It may be opening a new web page, an AJAX function that shows more information on the same page, or in the olden days, to launch a pop-up. What’s important though is regardless of the technical implementation, the concept is still the same – to indicate that this is something you activate.

Here’s an example of why it’s confusing to use the underline for emphasis in the content of web pages.

Your cat has fleas, so do not play with your cat!

If you know how to interact with a web page, instantly you believe the words “do not” must link to a page about something related to this sentence. Passing your mouse over those words and trying to interact with it reveals this to be false. This not only momentarily annoys the user, but also casts doubt to the integrity of all underlined words on the rest of your site.

If you want to place emphasis on words, the Internet Gods have kindly provided us with 2 very good suitable means – good old fashioned italic and bold. Or you can do something fancy with CSS.

With this in mind, I’ve always made it a point to remove the ability for my clients (and contributors on my other blog) to use underline by completely removing the option from the Content Management System.

Who is That Web Guy?

Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, occasional judge for the Australian Web Awards (2011, 2012, 2013) and creator of Task Rocket.

  • Storm

    let’s see then :)

    I prefer to just use a standard blue colour via css (with a nice orange when on hover) to indicate links, and ditch the underline altogether. Not that I love blue, but I think ditching two link standards at once is just a step too far for most people :)

  • Falk Wussow

    I think like Storm: Underlines for emphasizing aren’t a no-go everytime. When a link is recognizable by a unique color (and it should be on a good website), there’s no problem.

    When there is a grey text with one red word and another word that’s underlined. Which one would you click first? :-)

  • Float:Left

    I would expect to click the underlined one. The web guy is right. You can’t assume people are OK with having to learn how your particular site works. Underlined links are a usability expectation on any site.

  • CSS Babe

    Makes a lot of sense but I’m guilty of text-decoration:none most of the time. I notice you went against your own advice in the “about the author” bit. Love your work though :-)

  • That Web Guy

    Am honest oversight and you were right to call me out on it – especially given the subject of this article!

    Problem rectified.

  • Design Demi

    I guess it’s called a best practice for a good reason.

  • Placehold

    I’d agree with this post, undelining text unless its a link is NON essential

    Instead of using an underline for emphasis why not use either a block of nice complementing colour, bottom dashed border or coloured text?

    Makes it easier for users to see the actual links and allows the bots to index properly

    Regards

    Craig

  • Jeff Chapman

    It seems to me that if you’ve clearly established your underline color for the page, using underlines WITHOUT color can be okay, when used sparingly.

    For instance, if you’ve got black text on a white background, and it’s clear that all of your links are underlined and turquoise blue, then an occasional black underline used on black text here and there wouldn’t throw people off too much, it seems to me.

    There may be a larger question here, namely whether underlining text is typographically meaningful and aesthetically pleasing or not. But maybe the whole issue in question is common usage, which Mike addresses here.

    It’s interesting to note that all versions of Windows from 95 and up (to my recollection) give the user the ability to underline links in Windows Explorer ONLY when hovered over. But it’s easy to see how that practice of hiding links until the user actually hovers over them can be a problem on the web.

    The other issue that supports what Mike is saying here is users with troubles perceiving color on screen. Underlines work fine and are easily recognized by any user with color blindness, but simply changing the text color may not work for them.

BTT