Patterns & Practices

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." So,.. accessibility and UX experts 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. One common example of nastiness is where the descenders on lowercase p, g, y, q and sometimes z often crashing into an underline. Light bauhaus-influenced fonts with short decenders seem to suffer worse than most typefaces. As you can see below with Google Fonts suchs 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. 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?