Parapsychologist in session

Links make the web work. They also have some of the strictest styling limits, mostly due to security concerns. Designers like Marcin Wichary have pointed out that these limitations can affect the legibility of links, and have proposed various workarounds and solutions. The good news is that CSS standards have evolved to address many of these problems, improving the look of links and their usability.

text–decoration–skip

By default, text links are blue and underlined. This underlining strikes through descenders - letters that dip below the baeline, such as a lowercase j – making some links more difficult to read. There are many hacked solutions to this problem, but CSS now has one of it’s own: text–decoration–skip. The property has many possible values, but the intention of the property is always the same: to determine where the underline will not be drawn for a link.

I suspect the text–decoration–skip value of primary interest to most designers is ink, which addresses the problem mentioned above: with this value defined, the underline will skip descenders (i.e. it will not go through “ink” that is already present on the page), producing the effect you see at the top of this article.

a { text–decoration–skip: ink; }

text–decoration–skip can also take the value spaces, meaning that the underlining will not jump between words. There are other possible values: see the Mozilla Developer Network article for more possibilities.

text–decoration–skip is currently supported Safari, but not Chrome. However, it is in Chrome Canary, making it likely that the feature will appear in mainstream Chrome in the very near future.

text–decoration–color

Traditionally, a link’s underline color inherits the color of the associated text. There are also many ways around this, most notably by using border-bottom on the link in place of text-decoration, but CSS now has direct control over the color:

a { text–decoration–color: #ccc; }

Support for text–decoration–color is very similar to that of text–decoration–skip: both properties are in Chrome Canary, but not yet mainstream Chrome or other browsers.

Conclusion

While they don’t yet have strong browser support, both properties for customizing the appearance of links are coming, and should be considered for your site stylesheet. If having this kind of typographic finesse is important to you now, I would suggest the following resources:

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.