Design & UX
Article

The Secret to Underlined Links That Don’t Sting Your Eyes?

By Alex Walker

Hypertext Editing System - Brown University

This is the Hypertext Editing System (HES) created at Brown University by the ‘father of the hyperlink’ – Ted Nelson in 1969.

The coolest thing about the system was the built-in lightpen, that allowed the operator to manually underline the text they wanted to link.

Gee Willikers, Mr. Peabody!

You can almost trace that lightpen directly through to the underlined links we still use on the web today. The underline may be the most widely understood convention on the Web, and isn’t going away any time soon.

On the other hand, in typography circles, underlining has always been a serious no-no. Butterick’s Practical Typography goes as far as saying:

Absolutely not. In a printed doc­u­ment, don’t un­der­line. Ever. It’s ugly and it makes text harder to read.

*Source

Butterick identify the practice of underlining as a typewriter hack — a workaround for emphasizing text within a technology that didn’t offer any bold or italic functionality.

So,.. accessibility and UX people tell us we should use them, but we’re told they are typographical poison.

Mr. Rock. Can I introduce you to Mr. Hard Place?

The Problem

So, if we can’t throw away the underlined link convention, can we make it better? What are its biggest failings?

Beside the general cramping that comes with filling in the whitespace between lines, perhaps the biggest single issue is what happens when the underline touches the letterforms.

Problems with lowercase 'q' and 'a'.

One common example of nastiness is where the descenders on lowercase p, g, y, q and sometimes z come crashing into an underline. Light bauhaus-influenced fonts with short descenders seem to suffer more than most typefaces.

As you can see below with Google Fonts such as Rajdhani and Poiret One, it’s visually difficult to discern the difference between a lowercase ‘q’ and an ‘a’ when an underline is involved.

Quattrocentro's capital Q disappears into the underline

Likewise, the tail on capital ‘Q’ is usually fine with an underline, but can present serious problems with certain typefaces. For instance, Quattrocentro has a very low, horizontal tail that almost disappears in an underline. The small tail on the capital ‘J’ also becomes less clear.

Messy, right?

Is there a Solution?

photo credit: Ghostsigns

photo credit: Ghostsigns

Signwriters have often used underlines in their work, but they typically clearly separate the line from letters.

Although we can’t literally break our underline into pieces, we can create the illusion that they break.

Adam Schwartz is someone who’s recently put some serious consideration into the problem. His ‘SmartUnderline’ approach uses CSS drop-shadows to generate a background-colored ‘halo’ around the text — while stripping away the default underline (text-decoration).

He then re-creates the underline using a background gradient, which pushes it back behind the text. This animation shows how the parts stack up.

Animation: Stacking order of the underline.

I think it’s a really nice approach. Not only does it solve the ‘descender crash issue’, but it also hands the designer full control of your underline weight, color and vertical alignment.

I know in some cases it’s been exactly this lack of styling control that has pushed designers towards removing link underlines altogether. Maybe this would change their minds.

The only potential downside I could see, is situations where the halo color and the background aren’t kept in sync — perhaps a gray text box ends up with white glowing links.

Even this issue can be easily avoided with good CSS structuring and stylesguide documentation.

It’s clever stuff. Have a read.

Republished from the SitePoint Design Newsletter (archive)

  • http://www.blue-dreamer.co.uk/ Rob (bluedreamer)

    “In a printed doc­u­ment, don’t un­der­line.”
    – that made me laugh, the web is not print!

    Underlining links is far more important than many so called web designers realise, take them away and you remove an accessibility feature. Certainly for me having less than perfect eyesight I often rely on them, especially when the designer has chosen poor contrast for text colours (that happens a lot, even on “professionally” designed sites).

    I see where you are coming from with this solution, but I can’t help feeling it’s only a problem for designer vanity. If the current browser method of underlining hyperlinks was a major issue then most people would struggle – we’ve had blue underlined hyperlinks for 20 odd years and it’s never been a problem before!

    • Alex Walker

      Fair points @robbluedreamer:disqus.

      To me, any technique that takes away excuses that designers might use for removing underlines is the real news here. The SmartUnderline stuff is the cherry on top.

      I don’t think we consider it vanity for a skilled frontend person to spend time and effort selecting a font, and to set its size, weight, line-height and color for best readability and beauty. Why wouldn’t we want that person to have control of the weighting of any underlines and where they sits in relation to the text baseline?

      I would think that the best vertical positioning of the underline would be strongly related to the line-height/leading. This lack of control seems like more of a CSS oversight to me, than a reasoned decision.

    • StNick

      Alex’s proposal objectively increases readability of a link and as you said it: the way we underline hyperlinks has been the same for 20 fricking years! Time to grow up don’t you think? Also, if a design choses poor contrast on link colors, accessibility obviously wasn’t on the priority list there. That’s not a designer’s error persé, that’s a failure of a team for not pointing out these things.

      • http://www.blue-dreamer.co.uk/ Rob (bluedreamer)

        I have to disagree and say basic accessibility considerations are 100% the responsibility of the designer, after all that is a fundamental part of web design. It shouldn’t really be up to other people (aka the team) to point them out in most cases, the only exception is where the designer actually missed something obvious.

  • M S i N Lund

    And don’t forget to remove all those unsightly borders around buttons and inputfields, and dividers and color-differences, and groupings, and white-space and all depth, and everything.

    Nice and clean design, just like on a crisp new sheet of paper!

    …hmm, wheres the exit?
    *bump*
    *crash*
    owwww!!

  • Tyler Stelmach

    I feel like the new way to underline looks just as unsightly as the hyperlink’s way. Something about the line being broken up along the way really irks me. I feel like it doesn’t enhance my experience, it just looks odd to me. Then again, who am I to say somethings is good or bad.

  • squint9

    Cannot count the number of times I’ve written down an email address wrong because the underline is hiding the underline. Which is why, when I underline, I use a lighter shade of blue so any other character elements hiding there stick out.

  • http://www.moralintelligence.net/ Call Me Ismail

    To me, a far simpler and more elegant solution is to replace the underline with a border-bottom, which can be set to the desired weight and color, and even as dashed or dotted lines instead of solid.

    The result? You can check it out on my site if you like, but in short: The “underline” falls below the descenders, is thin enough (at 1 px) to be unobtrusive, and doesn’t push down or conflict with the next line of text. But it is also unambiguous enough for optimal accessibility, even to users with visual impairments or colorblindness.

    Example: http://pathocracy.moralintelligence.net/the_monster_behind_the_mask.php

  • http://www.moralintelligence.net/ Call Me Ismail

    I guess you didn’t like my pointing this out before, but there’s a simpler, more elegant solution: Replace underlining with “border-bottom.”

    This allows the designer to control the weight, color and characteristics (solid, dashed, dotted) of the “underline” while retaining unambiguous markup for maximal accessibility.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.