Boycot the underline

Written by That Web Guy on 3rd February 2009. 8 comments

Boycot the underline
  • Avant Innovations
  • Advertise Here

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.

Is this worth sharing?

That Web Guy

About That Web Guy

That Web Guy (Mikey to his friends) is a veteran web designer based in Perth, Western Australia, and currently Design Director at Perth Web Design. When he's not XHTML'ing or messing around in Photoshop, Mikey can usually be found preaching web standards evangelism onto unsuspecting victims.

Feel free to send That Web Guy a message some time, follow him on Twitter, or make a donation.

Comments

Storm

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 :)

Wednesday 20th May 2009 | 03:57 PM Reply Comment URL Profile Back to top

Not a Member

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? :-)

Thursday 21st May 2009 | 09:21 PM Reply Comment URL Back to top

Not a Member

Float:Left

Responding to this comment by Falk Wussow

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.

Friday 22nd May 2009 | 07:57 AM Reply Comment URL Back to top

CSS Babe

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 :-)

Saturday 23rd May 2009 | 07:33 AM Reply Comment URL Profile Back to top

That Web Guy

That Web Guy

Responding to this comment by CSS Babe

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

Problem rectified.

Wednesday 27th May 2009 | 08:05 AM Reply Comment URL Profile Back to top

Not a Member

Design Demi

Responding to this comment by Falk Wussow

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

Friday 17th July 2009 | 10:04 PM Reply Comment URL Back to top

Not a Member

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

Friday 17th July 2009 | 11:07 PM Reply Comment URL Back to top

Not a Member

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.

Sunday 19th July 2009 | 01:34 PM Reply Comment URL Back to top

FYI: You are currently not logged in. It's cool though - you can still comment. But only members get a profile page, access to the download section and they can pimp their own web sites. Feel free to register or Login now!

Your name:

Your comments:

Note: HTML tags are automatically stripped from comments.

Are you human?
Turing

Sorry, I have to ask. So what sort of animal is this? (Hint: you don't have to be perfectly specific)

Back to top

Login to That Web Guy Blog

Login

Not registered? | Forgot your Password? Cancel Login