Hyperlinks should be seen but not heard  JUL 15 2002

With all the underlines disrupting the flow of the prose, reading link-rich hypertext can be difficult, akin to reading some early desktop published newsletters or HTML email (I can use 4 different fonts at 3 different point sizes in 8 different colors? And italics? Then I shall do so!). All the underlines disrupt the flow of the prose and add extra emphasis to words and phases that might be unwanted in the context of normal text. The same problem occurs when setting hyperlinks in bold text. Making links a different color with no underlines is an option, but sometimes it's hard to tell the difference between text and links.

If possible, simultaneously reading hypertext and using hypertext should be simple. The text should be as readable as plain text but you should also be able to easily discern linked words. As with most design issues, balance is the key.

Over the past few weeks I've noticed a number of sites using CSS borders instead of underlines to designate hyperlinks (like this). As Martha Stewart would say, this is a good thing. Used properly (dashed, dotted, or with a lighter color), the CSS border techinique makes for a more subtle hyperlink; it reads easier but the reader can still tell where the hyperlinks are at a glance without undue emphasis on the linked words. The technique is a CSS hack**, doesn't work on some older browsers, and is probably not standards kosher, but it gives the Web designer more flexibility in designing their hypertext.

** Here's the CSS code for adding dotted underlines to your hyperlinks:

A:link {
    color: #000000;
    text-decoration: none;
    border-bottom: #666666;
    border-width: 0px 0px 1px 0px;
    border-style: none none dotted none;
}

Adjust the link color, the border color, the border width, and the border style (solid, dotted, etc.) to suit your specific needs. In order to not display the border on linked images, you'll have to specify the appropriate borders for the IMG tag in your stylesheet. That code can probably be consolidated some, but I'll leave that in your capable hands.

There are 58 reader comments

Anil14 16 200212:14AM

It's completely standards-kosher and stays within both the letter and the spirit of the rules. They're designed to give flexibility like this, and it'll still leave a regular link for people with user agents (browsers) that don't support it.

You can adjust the a:hover properties if you want the word to stand out more (perhaps have the normal hyperlink underline return) when someone points their mouse at the link.

Please, please, don't do that bold-on-hover thing. Ugly.

Zach04 16 2002 1:04AM

I recommend making the links 'blend' into the main text by contrasting the color and using a non-evasive hue.

Even though the link isn't underlined, making it completely clear and user friendly, I'm willing to trust the intelligence of the everday web user and assume that they know the difference in color means 'link.'
And I agree with Anil, bold-on-hover thing is pretty cheesy.

Graham01 16 2002 2:01AM

Crazy. I was actually peeking at your source CSS earlier today (before the post) to see exactly how you did this, since it clearly didn't look like your ordinary everyday garden-variety underline.

Micah30 16 2002 4:30AM

Not only is bold-on-hover cheesy, it causes the text to reflow on hover in some browsers (eg IE5/Mac), which looks very tacky. Border-bottom-on-hover does the same thing. So please hover responsibly.

Rich35 16 2002 5:35AM

I agree that hyperlinks should be blended into the design and style of the site, however I fail to see how this method makes it blend any better than using the standard underline. How is a dashed underline any easier on the reader than a solid underline? I try to stay with blue underlined hyperlinks since it is an Internet standard (thus making it easier to understand as a hyperlink), but I will change the color if blue greatly clashes with the design. I have on occasion even omitted the underline altogether and just went with a different color.

Anyway, although I wouldn't use it, the CSS workaround for the dashed underline is interesting.

Matt40 16 2002 5:40AM

You could replace

border-bottom: #666666;
border-width: 0px 0px 1px 0px;
border-style: none none dotted none;

with

border-bottom: dotted 1px #666;

Matt

np48 16 2002 5:48AM

The funniest are asparagirl and plasticbag - and probably many others. You know only from the context that it's a hyperlink or from dragging the mouse over the word. I like that but it does not work for fast scanning; it's quite time-consuming. Then again, wasting time on the Web is time-consuming. Sorry to disagree here, but I don't see why the dotted line would be different from continuous underline. They are both about equally distracting.

Mariann52 16 2002 5:52AM

Ah, thanks so much for that little snippet of script. I've been admiring how you handle hyperlinks for some time and I've been trying to figure out how to implement it myself. To my eye, it's simple, yet classy.

The next thing I must figure out is how you automatically insert the "http://" into the URL portion of the comments! :)

John55 16 2002 5:55AM

I agree Jason, reading a paragraph (or 2 or 3) can be made difficult with many hyperlinks sprinkled all about. And I agree, the dotted-underline is cool, I've used it myself on a few projects.

Aside from the philosophy of responsible hovering (in the classes I teach, we try 36pt font size changes on hovers to see how obnoxious we can go), which has its obvious place, I don't see the color, dotted-ness, solidity, or boldness of a typeface the solution to your original concern: links breaking up paragraphs.

The link (in Jakob Neilsen blue) or any other color should be recognizable. True. But if links are breaking up your paragraphs, consider a list with several links (if you have so many, and 5-12 suggests you do), and placing your links (one per paragraph) at the end of the paragraph. This may require you to rewrite your prose somewhat, but the punch (the link) appears at the end of the paragraph or sentence, which is natural in English. Papers by Sun and IBM both suggest making pages more usable by placing links at the very beginning, but especially the end, or paragraphs.

Brent46 16 2002 6:46AM

Spymac's menus have interesting markup - they are dotted until you mouse over the link, at which point they fill in solid. I'm not totally sold on the aesthetics, but I thought it was an interesting idea nonetheless.

Garrett00 16 2002 7:00AM

While I think that the dotted underline is a nice touch, I must agree with others that it does nothing toward making your text balanced. If anything, now my eyes wander right to the links now instead of the prose.

majick18 16 2002 7:18AM

This technique has one strong disadvantage: It causes links to be underlined when the user has instructed the browser not to do so. I find that no underlining at all is preferable to the prettier but nonetheless distracting dotted underline, but CSS hackery has overridden my browser preferences.

Ed Bilodeau31 16 2002 7:31AM

Changing the solid underline to a dotted one makes the links only slightly less eye-grabbing. I personally prefer the links to remain blue and underlined. Depending on the design, I might play with the shade of blue used, but the links remain blue. This is putting aside the idea that color should only be used as a secondary means of providing UI information.

I'm not a big fan of link-rich text, however, and so I might not have come up against the same design issues that you've encountered. I prefer to keep the links to a minimum, but make them clear and obvious (read: underlined and blue).

sarah55 16 2002 7:55AM

i like the dotted underlining on the links specifically on this site. i think it goes well with the design (it matches with the other dotted lines). in general, i prefer a simple color change with no underline because i think it makes the text flow a lot more smoothly. just my $.02

David56 16 2002 7:56AM

I think the dotted lines are more eye-catching, not less. I'm used to the basic underline; a dashed underline is more compelling because it's different.

I like simple underlined links. They don't have to be a different color, imo--match the body text, for example, and there will be minimum intrusion, yet links will still look and behave like links. Color variations and broken lines are far more jarring than the basic underline.

milov07 16 2002 8:07AM

Plus, it sorta conflicts with the (old) Windows Help standard, when dotted underlines indicating you can click/hover a word and get a small tooltip with more info, rather than click it and jump to a new page (or so I remember).

jason22 16 2002 8:22AM

Someone above mentioned using no underlines and no boldness to show a link, just color. The only problem with that is if your reader has a disability, for instance color blindness. Mark did a section in his 30 days to a more accessible blog that you can check out where he shows what certain colors look like to people with different types of color-blindeness.

http://diveintomark.org/archives/2002/06/25.html#day_12_using_color_safely

merlin26 16 2002 8:26AM

I love that look (and use it), but I think it's more conventional as a style for "acronyms" or "help" rollovers.

For myself, I'd love it if people would use "acronym" instead of linking if it's just to identify or clarify; for example the way some folks like to point to dictionary definitions. Then you really do minimize the clutter.

jorge42 16 2002 8:42AM

kottke is mixing some design tutorials into his blog.
great stuff.

if he could only reveal to us the secret of life ...

richard04 16 2002 9:04AM

bookmarklets to the rescue, at least for non-netscape users. install "highlight links" from http://www.bookmarklets.com/tools/look/index.phtml to help find the non-underlined, same-color-as-normal-text links (like those on microsoft.com). one imagines you could easily change the working method to bold or underline all links, depending on your preference.

bryan boyer dot com coded a great dictionary bookmarklet a while back, but i lost the link to it. oops.

Patrik17 16 2002 9:17AM

An alternative would be to hide all links unless the cursur enters a certain area, prefably the text area. At that moment all links appear underlined and colored.

So if you simply want to read the text, you just make sure your cursor is placed out of the text region.
There is a little javascript needed for this, but I made a quick example at : text example

Jonathan36 16 2002 9:36AM

Is it just me? I see no underline on Windows 2000 and IE5. No underline and no hover change.
At home, however, I could see the dotted underline on my trusty iMac running Mac OS X and IE5.1.

Micah42 16 2002 9:42AM

Patrik: That's a pretty cool trick. Using the CSS :hover pseudoclass, you should be able to do that without Javascript. However, you would have to forget about older-browser compatability.

#linkArea:hover a {
color: blue;
text-decoration: underline
}

Justin43 16 2002 9:43AM

I don't see the underlines here neither, running Win2k and IE6. What gives?

jkottke59 16 2002 9:59AM

Here's a screenshot showing a number of different ways of designating links. The black links with the dotted underline is quite nice IMO and a good option for designers to have when compared with some of the alternatives.

I try to stay with blue underlined hyperlinks since it is an Internet standard (thus making it easier to understand as a hyperlink)

Is blue underlined text still the standard for links? With exceptions that might prove the rule (Yahoo!, Google), much of the Web built since 2000 uses whatever link color is most appropriate for the design of the rest of the page. Looking at the examples here, only the yellow highlighter links cause a bigger mess than the blue underlined links (at least for me).

While I think that the dotted underline is a nice touch, I must agree with others that it does nothing toward making your text balanced. If anything, now my eyes wander right to the links now instead of the prose.

You're right, but keep in mind that I changed the link color as well, going with something a little stronger than black. I'm not convinced that the red link text is the way to go yet...still evaluating that choice.

This technique has one strong disadvantage: It causes links to be underlined when the user has instructed the browser not to do so. I find that no underlining at all is preferable to the prettier but nonetheless distracting dotted underline, but CSS hackery has overridden my browser preferences.

Mine is not a popular view these days, but in the instance of my personal Web site, I don't really care what the user's preferences are for viewing text on my site. The text is presented in the context of the rest of the site design, and I'm going to design the text display so that I get the response that I want from the reader. This may seem antithetical to the goals of user-centered design -- of which I'm a big proponent -- but it's not. User-centered design is design with the user in mind (as opposed to design by committee or design by whatever the vice president's favorite color is), which is very much what I'm doing. I'm trading the control that some readers want for a better overall experience for the majority of readers.

But that's just me. There are advantages and disadvantages to any possible approach (that's the part that Jacob never tells you). For kottke.org, this is a good approach...for another site, maybe not so much.

jkottke05 16 200210:05AM

An alternative would be to hide all links unless the cursur enters a certain area, prefably the text area. At that moment all links appear underlined and colored.

I toyed with doing that when I redesigned but decided that I didn't want to make the interaction too complicated. But I really like the idea and will probably end up using it in another situation.

Is it just me? I see no underline on Windows 2000 and IE5.

Yeah, it doesn't work in IE 5 on Windows. It should work in 5.5+ though....not sure why Justin isn't seeing anything.

Eric Scheid24 16 200210:24AM

the problem of text-reflow on a:hover {border-bottom:whatever} occurs because some dumb browsers treat the border as inside the padding box, some outside. If you are getting reflow, try setting a margin which you remove on hover, or even don't add/remove the border, simply change the colour to match/contrast with your body colour.

kirsty49 16 200210:49AM

i'm another who doesn't like having my preferences for non underlined links overridden by css so i keep a stack of bookmarklets like this around to override the author's preferences:

change links to no borders

(if jason's comment system lets me post javascript links anyways....)

kirsty51 16 200210:51AM

that's a no then ;-) (which is fair enough! but makes my comment fairly meaningless now....)

Ben23 16 200211:23AM

I disagree. I think links should be heard, preferably by playing "Eye of the Tiger" by Survivor when hovering over any link.

Here is the code:

Link

And here is some CSS code which will play the song clip before any link in a voice-capable browser:
A {
cue-before: url("http://www.ptinet.net/~hayzlett/sounds/eyetiger.mid")
}

Ben25 16 200211:25AM

Sorry, the first bit of code got wiped out by the commenting system.


Link

Link

RobbyB43 16 200211:43AM

Aren't blue, underlined links inherit to the web? (Even the comment area below has the trademark blue underline to insert a link into your comment.)

For most experienced users of the web, I would think the underlines fade into the background as you concentrate on the prose, much the way background noises disappear when having a conversation in a noisy, public place. When the normal link not a standard solid underline, but a dotted border or otherwise, your eyes are first directed to the change, and then you start to notice the rest of the site.

A great example of this is 'Trading Spaces' on TLC. Pay attention to what the homeowners notice first, and it's usually something smaller than the color or decoration on the walls.

peter27 16 200212:27PM

imao, the difference between this and a regular underline is marginal at best. especially on kottke.org where the redness of the links disrupts the flow of prose much more than an underline would.

Andy30 16 200212:30PM

The underlines look great, but they have the marked disadvantage that they make links un-clickable in Netscape 4.76 Mac+Win.

I'm all for getting users to upgrade their browsers, but making an important portion of web content entirely inaccessable to some users could have some drawbacks.

John03 16 2002 1:03PM

Yes, Jason, the dotted-underlined links in your example are superior, but you use red on your site.

Steven Garrity05 16 2002 1:05PM

Is blue underlined text still the standard for links?

At his User Experience 2001-2002 Conference in Washington (I wasn't there, but some of my co-workers were), I understand that Jakob Nielsen acknowledged that users were starting to expect that not all links are blue-underlined. I think it's still a good convention, but not carved in stone.

Garrett Murray00 16 2002 2:00PM

Jason--I think the links look different for you in OSX than they do for me in IE6. I noticed in your example GIF that you pointed out "the black links with the dotted underline is quite nice," but I don't see anything in that GIF that looks like your links look. I would imagine you're speaking of the third paragraph. If so, yes, that does look good. But in IE6/PC, we see something different. It's not as smooth. Looks like this: image.

Then again, maybe I just misread what you wrote. But I think I'm on track here...

Darrel24 16 2002 2:24PM

I have to agree with those that point out that the problem isn't really a matter of visual style, but of writing style. I personally find it hard to read paragraphs of text littered with links. I either stop at each link, click on it, view it, and then go back (which is disorientating, to say the least) or I read the entire page, and then go back to try and remember which links seemed interesting (which means I inevitably miss something).

I personally find the best solution to be when you post the links at the bottom of the article/comment/paragraph.

...though I am impressed with Patrick's Javascript trick. Very slick.

jkottke26 16 2002 3:26PM

Jason--I think the links look different for you in OSX than they do for me in IE6.

Aside from the color (I used black in my example, not the red I'm currently using on the site), they're pretty much the same. It looks a bit chunkier on the PC, but not too bad.

I personally find it hard to read paragraphs of text littered with links. I either stop at each link, click on it, view it, and then go back (which is disorientating, to say the least) or I read the entire page, and then go back to try and remember which links seemed interesting (which means I inevitably miss something).

Yeah, but I like the inline links...that's my posting style and I'm going to stick with it. I had a reading technique for dealing with this on the PC. Read the passage normally, shift-clicking interesting links as you go, which opens them in a new window. As the new windows pop up, a flick of the Alt-Tab brings you back to the original window so that you can keep reading. After you're done with the original passage, you can close that window and deal with all the links you opened in new windows. It was a great way to surf weblogs. Unfortunately, Cmd-Tab (or Cmd-~) on OS X doesn't work in quite the same way which makes it hard for that technique to work well. It's one of the things I miss most about Windows.

pdd42 16 2002 3:42PM

Unfortunately, Cmd-Tab (or Cmd-~) on OS X doesn't work in quite the same way which makes it hard for that technique to work well.

To open a link in the background (on a mac) hold down shift + Cmd while you click. Works in IE 5+, Mozilla opens it in a new tap.

Martin43 16 2002 3:43PM

I've been using this on The Copydesk, it's really nice.

By the way, you spelled technique 'techinique'.

pdd46 16 2002 3:46PM

Sorry: I forgot to italicize the first paragraph.

Jesus30 16 200211:30PM

IE for Windows treats 'dotted' as 'dashed', which makes for some ugly borders. Opera and Gecko and IE for Mac get it right.

Kurt56 17 2002 2:56AM

well, I think these dotted lines are becoming so ubiquitous today that soon I predict they'll become today's version of the "left-hand margin", in other words yet another tired old design trick that will be de rigeur for any corporate site or any joe schmoe who wants to add some design spice to his H1 headers.

Jake Dobkin30 17 2002 6:30AM

I'm surprised at how many people are willing to discard the old HTML standards. It's not that I don't understand the design necessity of matching link color and font to the style treatment of a site- I agree that the old blue/red link distinction doesn't always make sense for sites like this one. However, I still believe in the traditional underline as the definitive decoration for signaling that a piece of text has been hyperlinked. For one reason, because other techniques may not show up the same way in all browsers. For another, it is a simple and obvious convention. For three, it has historical value.

np02 17 2002 8:02AM

I just realized that plasticbag underlines hyperlinks but that does not show up on some of my computers - evidently I turned off that feature. Or whatever. Anyway, I really like it that way but that would not be appropriate for our site. On our site most of the hyperlinks are titles of articles or short quotes from somebody's writing - it's quite appropriate if they are loud. The posts are brief, the people who visit are extremely busy, they only need a quick fix then they move on. Hopefully to the article that we recommended, then they come back later or the next day. Anyway, it's only an experiment since March and it works just fine this way.

Darrel04 17 2002 8:04AM

Jason:

As pdd pointed out, with IE in OSX, you can pop-up windows behind the one you have.

Of course, IE in OSX sucks. Really bad. Take a look at Chimera. It's got a ways to go, but it is quite impressive for only being at version .3

sam28 17 2002 9:28AM

Jake -

Blue underlined links are (or, these days, were) a convention, not a standard at least in the sense that the word 'standard' is normally used with relation to HTML. This isn't a criticism - just that it's best to be careful not to overload words IMO.

Personally I don't see underline as the key link marker, but colour (and *any* colour different from the mass of body text will work just fine). I will see a red word as a link more easily than I'll see a black, but underlined, word as a link. I don't know how this breaks down in the general population, of course.

I've done some sites with slightly interesting link techniques. Several years ago I made this site which uses a light grey background colour as link indicator (it goes darker on hover). IMO that works really well without being distracting. However, if you want mild amusement, figure out what colour my light grey becomes on an 8-bit 'websafe' display...

I tried to use dotted borders for links on another project some time back but eventually I decided against it because it looks really, really bad if the link is more than an entire column-width long, as the link only goes along the bottom edge of the text and therefore misses out the top line of the overlapping part. (Yes, we did have links that long. You might well ask why.) However, given that most links are short enough, I think it works really well.

One thing is that I'd be hesitant if the links were black text with black dotted border... that's a little bit too subtle. If the text is left as black, then I think the border probably ought to be coloured.

--sam

Ryan03 17 200210:03AM

The link to movabletype at the bottom of this page is bordered. Whereas this is easily avoided when border attributes are not set for <a>, I don't know how you'd get around it here.

tomcheng35 17 200211:35AM

The main advantage of dotted underlines, IMO, is that it makes it easier to see the drops in letters (e.g. "y" and "g"). Since we read in large part by recognizing word shapes, our eyes are forced to slow down to read text with solid underlines. The dotted underlines make the shape of words a little more recognizable and are thus slightly less disruptive when your eyes are scanning across a page. (The same benefit can be obtained, of course, by using a lighter color for the underline than for the hyperlink text.)

placenamehere13 19 2002 6:13AM

For those who have underlined links turned off in their browser prefs and don't like something like this getting around that consider using a User Style Sheet rather then the 'dumb' browser prefs. For instance, a line like this would prbably do the trick and be easier then a bookmarklet:

a { border:none !important; text-decoration:none !important }

The first item is obviously for borders, the second to stop underlines/overlines/linethroughs. Its the important that keeps page authors from changing it.

Each browser has a slightly different place to put that... for IEs put it in a file and point to it in the prefs (accessability prefs in IE/PC, Web Content in IE/Mac, the existing userContent.css file in mozilla, etc.).

Mark15 19 200210:15AM

I'm afraid my webpage must look really ugly and cluttered to all of you then, since I totally indulge myself with silly colours for some links, meanwhile colouring some words which aren't links anyway....

My apologies in advance to every visitor who gets an aesthetic shudder of disgust at my pastel-coloured sweeties approach to weblog decoration! All totally vulgar and childish, I'm afraid.

By the way - thinking of the listening-to-URL page you mention further up - is there a lot of signalling links with sounds? A discreet ping might be nice, no? Or even a soft background nurmur to indicate the mouse is an inch or so away from a link and approaching? That must have been done, surely?

We could always turn the sound down or off, after all....

-

c3o22 19 200210:22AM

Hmm, I believe I've noticed a trend to use dotted and dashed underlines for text that has a .. around it, not actual links.
I think that's a good thing and more logical ("this is not quite a link, but you can do something/get more information by moving your mouse over here"). Mozilla even adds dotted underlines automatically for tags.
Different line types could also be used as visual clue whether a link is internal or external - but if webmasters use them for regular links in general, sufers won't get used to them and be confused by different kinds of underlining, in my opinion.

c3o24 19 200210:24AM

Whoops, that ".." should be [span title="some info"] ... [/span], with pointed brackets of course.

Mark24 19 200210:24AM

-
Sorry Ben. I should read comments above more carefully before posting.... Sound-signalled links are obviously with us already, if not with me.

But Eye of the Tiger?

-

c3o24 19 200210:24AM

and Mozilla is using them for [ACRONYM] tags.
(Is that normal that MovableType swallows all html? why don't they convert the tags to entities instead?)

Paul Watson20 23 2002 1:20AM

The only negative comment I have is that dotted underline was normally reserved for acronyms or tooltip like help pop-ups. Not for linking.

Most times I see a dotted underline I think it will tell me what that word is, not go to another site.

Oh and my grandma says she cannot make out the links on your site because the dotted underline effect is too subtle.

Can't please em all huh? :)

lloydi39 24 2002 5:39AM

I recently used the dotted trick for an underline in some 'less important' links at the foot of the company homepage . However, it seems to me that the most sensible thing would be to have a new style for underlines? After all, a border is really something that you apply to a block level element, and an a href is inline.

Someone's probably said as much already but that's my five pence worth

This thread is closed to new comments. Thanks to everyone who responded.

this is kottke.org

   Front page
   About + contact
   Site archives

You can follow kottke.org on Twitter, Facebook, Tumblr, Feedly, or RSS.

Ad from The Deck

We Work Remotely

 

Enginehosting

Hosting provided EngineHosting