Google embraced a new CSS text property and made it the default Chrome link underline style in its Chrome browsers. This may not have been the right move.
A few months ago, I was looking at a web page (minding my own business) when I noticed that the links looked odd to me. They were just simple blue text links with underlines… but the underline style was different than it had been the day before.
Instead of one continuous line, the underline stopped and restarted to avoid crossing over the descenders of lowercase letters like g and y, as in this example:
Depending on text size, font, etc., the broken underlines were sometimes innocuous, but sometimes really snagged my eyes while reading across the page.
What was up?
It turned out that, starting with Chrome 64 (on desktop and mobile), the browser supports a new CSS text property called
text-decoration-skip-ink. This property allows for the underline style that “skips” letter descenders, punctuation, etc. that cross below the text baseline.
Chrome not only supports the new style (let’s call it “skip-ink”) but made it the default for all text underlines.
I’m not convinced that Google’s change is a good one. I’ll explain why.
But first, a few qualifications:
- To be clear, the Chrome link underline style change not a big huge deal. It’s just a deal.
- Skip-ink not a new visual approach. Some website implementations that have accomplished the same or similar effect for several years.
- Chrome is not even the first browser to do this. Safari and iOS made this visual style the default by the end of 2014.
Still: it’s a design change, it’s new to many, and its benefits are murky. This is worth thinking about, both for what it is and as an example of how we don’t want browser changes handled in the future.
6 reasons to question the Chrome link underline change
1. Additional visual distraction
When it comes to cognitive load, a solid line is less information than a broken line. Irregular breaks in a line garner more attention around the locality of the breaks. In some cases, bits of underline may look out of place, or resemble other symbols.
The level of additional cognitive load will vary based on user, font choice, text size, browser implementation, etc.
Of course, not all web designs use underlined links. If your website’s links don’t use underline at all, skip-ink does not affect you. If your links only display underline on mouseover, then I’d wager the effects of skip-ink are minimized (just as the negative impact of the traditional underline is minimized in the same circumstance).
2. An unproven approach
Use of the link underline on the web has always been a compromise. From a typography point of view, underlining is considered a scourge that arose from the age of typewriters and must be stamped out. On the other hand, underlined hyperlinks have been helpful and even necessary for web page usability since the beginning of the world wide web.
Underlined text is not as clean non-underlined text, and is somewhat more difficult to read. Research indicates that old-school underlined links decrease readability by a small but statistically significant amount. We have, however, been addressing these concerns over the years with different approaches to link styling (see below).
An underline crossing a descender (the bottom of a “y” for example) does make the character less recognizable to some degree. But it’s also worth remembering that we don’t read individual characters, we read words as chunks, and mentally correct in context as we go.
So, compared to traditional underlining, skip-ink certainly makes certain individual letters and symbols easier to make out when inspecting them. But does the skip-ink approach help or hinder readability overall? It’s unclear. And without data on the suspected pros and cons, I am unconvinced that skip-ink is a great solution, let alone so clearly superior that it should be our default.
3. There are other approaches
Here are a handful of the possible visual treatments for links:
Possibilities include things like: removing the underline, styling it separately from the text, and using alternatives like
border-bottom, which the CSS standards team happens to do for links on their own website.
Skip-ink, which is included in the figure for comparison, is not obviously better than any of the other approaches for all applications.
4. Defaulting to this approach may discourage others
Making skip-ink the default Chrome link underline style may signal to designers that the problems of link underlines have been empirically solved in a one-size-fits-all fashion. This may discourage the continuation and exploration of better approaches.
5. It causes new problems (aside from visual distraction)
Users should be able to determine at a glance what is part of a link and what isn’t, and whether it’s a single link, or more than one.
By breaking up the Chrome link underline, skip-ink can insert ambiguity into those rapid assessments. The user can stop to inspect a link more closely for clues—e.g., adjacent underlined space characters—to determine the answer, but users can’t be and shouldn’t be expected to do that.
6. An external entity changed your site design instead of giving you an option
Google, as did Apple a few years back, effectively changed your design on you. Whether this is a significant change or a minor change is up to you to decide. But Google did change an aspect of your web design without asking or warning, and without having your users opt in.
Google could have instead provided you with a new tool to use (skip-ink), and let you apply it as you see fit. Or Google could have given their browser users skip-ink as an accessibility option to use if they wish.
Google did neither. They provided users no option to opt in or opt out of their new link decoration effect. As a designer or developer, you are able to override their design choice, but you must modify the code of your current and old websites to do so.
Learn about how BetaTesting can help your company launch better products with our beta testing platform and huge community of global testers.