Versus: Two Designers Debate the “Chunderline”
The Chunderline is TradeMark jargon––a portmanteau of two words, “chunky” and “underline.” It’s the word we use to refer to the underline that indicates a link on a webpage.
Here’s an example:
But two of our designers, Mike and Marty, have very different takes on the chunderline. Marty, the visual designer, loathes the chunderline. Mike, the information architect, evangelizes for it.
Here, the two debate the beauty (or lack thereof) of the chunderline. #chunderline
Marty the Visual Designer:
The chunderline––i.e., "chunky" + "underline"––is created when large webpage headlines utilize the same styling as text hyperlinks. The chunderline is, by definition, ugly. And worse, it’s often much fatter and visually abrasive than other underlines.
Mike the Information Architect:
It’s difficult to answer a question like, “Should hyperlinks always be underlined?” in the abstract. Every design is a unique mix of placement, colors, patterns, and meaning.
But when we conduct usability tests––and have in-depth conversations with real users––certain patterns emerge time and again. One of them is the all-too-familiar, “Oh! I had no idea that was a link!”
Information architects (like Mike) looooove the chunderline. They believe that every time something is underlined, it’s clickable.
Hey, Mike! The 1990s version of the Internet called. It wants its visual cue back. (BOOM!)
Users often have to search out links, even on a site they use regularly. This typically happens when a designer has decided that since they know that a certain text or object is a link, the user will know this as well.
This violates a foundational rule of UX (user experience): You are not your user. It also reinforces the worst stereotypes of designers, i.e., "My genius is so obvious that people will just ‘get it.’" The field of UX grew as a response to this kind of thinking.
Don’t get me wrong! I would be all for the chunderline if there was a way to style its height value and not depend on a font. But currently there’s not a good way to do that without hacking through the CSS––and that may not work on every browser.
I’m looking at you, developers! (And, while we’re at it, I am also looking to the manufacturers of mobile devices to find a way to create hover states.)
We have an established pattern on the Web about how links work. I understand that many fonts don’t have an underline effect that looks clean and neat. Sometimes underlines are "fat" or "chunky" and can be distracting from the text.
When that happens, the designer has two choices: Go with an established pattern that is imperfect, or attempt to create a new, parallel pattern and assume the user will understand what to do. You can guess which side I fall on.
If you have a beautiful website, adding underlines everywhere just makes for a lot of visual white noise––like on news websites for example:
The lines everywhere are unpleasing to the eye, and it’s harder to read (a cardinal sin online). They feel distracting, not helpful.
Not to mention that the chunderline goes through every dangling line that falls below the baseline for text. So every g, q, j, y, and p would have a line straight through them––spearing them in the heart with ugliness.
Rarely does the underline interfere with the understanding of the text. We don’t read letter by letter, but phrase by phrase. Font descenders (like g and y a q) are barely perceived by users. I have never had a user say they can't read a word because of an underlined link.
I would opt for more of a visual cue approach. What do I mean by that? Well there are many ways to approach this:
1. Use an icon to show heading hyperlinks.
Some designers use an icon before or after text (in headlines in particular) to indicate that it is, indeed, clickable. No need for a chunderline! We recently did this for the City of Pecos, whose tourism website we launched a few months back:
The icon helps illustrate clickability without fat-spearing the underside of the typeface. We chose to put it before the text––and not at the back-end––so that it doesn’t accidentally dangle below a headline that’s too wide for the screen.
2. Add a carrot (>) to the end of the heading hyperlinks.
Then, show an underline for the text only when a user hovers over it. We recently did this for EEA Consulting Engineers, a website we launched in December:
You have to be a little more cautious with this approach, as you can have the (>) dangle off the end and appear as a mistake.
But the carrot (>) is not an established pattern on the Web for a link! And besides, it might also indicate pointing to something else on the page, and away from the text you want the user to click. Icons can mean all sorts of things. Very few of them say "this is a link."
Ahem. As I was listing…
3. Utilize a specific color.
The tricky part here is to use a color that is totally separate from your branding (if possible) but which still “fits” the brand and stands out on the screen.
This can be more problematic when dealing with large color palettes. Which is why we used the Chunderline for Crossroads––a brand new website we designed for the Texas School for the Deaf––that uses a rainbow of colors on its site.
What we do on our (the TradeMark) website is a great alternative when you don’t use the underline––i.e., using a sharply different color from the regular text (orange on black):
There are also established patterns where links don’t need underlines, like news sites, Google search results, etc. These are unique structures that have a meaning unto themselves.
It comes down to this: When there is a question about whether to underline, your own gut feelings are not a good test. When someone feels like they don’t need to underline, ask them if they sit with users and discuss the issue. They usually don't.
User feedback, as usual, is the real test. Usability people don’t prefer underlines because we like how they look. We prefer underlines because the data is clear: they work.
Whatever your approach to hyperlinks, make the right one: #teamvisualcue
In most cases, the answer is obvious: When it isn’t clear whether you should underline a link, you should underline it 9 times out of 10. Go Team Chunderline! #teamchunderline