Styling Links with Real Underlines

Before discussing how to style the underscore, let’s first think about a question: Should we use underscores?

In graphic design, underscores are often considered to be inadequate enough. There are better ways to emphasize focus, build hierarchies and distinguish titles.

Butterick's "Practical Typesetting" has clear suggestions:

If you want to use underscores, use bold or italics instead. In special cases, such as the title, you can also consider using all capitals, small capitals, or changing the font size. Still don't believe it? I suggest you find a book, a newspaper or a magazine to see if there is any underlined text. This style is mainly associated with supermarket tabloids.

But the network environment is different. Hyperlinks are the defining characteristics of the Internet; they have been underlined since the birth of the Internet. This is a generally understood convention, and its meaning is very clear - underlined to indicate links .

However, many popular websites have already un-underscore: for example, The New York Times, The New York Magazine, The Washington Post, Bloomberg, Amazon, Apple, GitHub, Twitter, Wikipedia. Google's chief designer Jon Wiley explained in 2014 that removing the underscore from the search results page can create a cleaner look. It is worth noting that most of these sites retain a slightly different bright blue (#0000EE) that has been the default setting for browsers since the birth of the web. While this provides visual tips for most users, it may not be enough to pass the WCAG accessibility compliance test.

Color cannot be used as the only visual means to convey information, indicate actions, prompt responses, or distinguish visual elements. — WCAG 2.1

WCAG does not strictly require underscore for links, but it does recommend doing so. Color blind users need to be able to recognize links. You can differentiate them in other ways, such as using bold font weights. Or you can keep this long-established visual assist feature. But if we were to use underscores, we wanted them to look pretty . Medium designer Marcin Wichar describes the perfect underscore as:

[…] Visible but not overly conspicuous – make people realize what content is clickable but not overly attracting attention. It should be at the right distance from the text, comfortably below the text, and even the descending body occupies the same space.

Traditionally, achieving this requires some CSS tricks .

Tips we used in the past

This is a trick that all developers are familiar with: border-bottom . By using border-bottom to simulate underscores, we can control color and thickness. There is one problem with these pseudo-underscores: the distance from the text is too large. They are located below the letter descending body. You can solve this problem by using line-height , but this will bring about its own problems. Similar technologies utilize box-shadow . Marcin Wichary pioneered the most complex technology, using background-image to simulate underscores. These are all useful tips, but no longer needed.

Set a real underline style

Ultimately, thanks to two new CSS properties, we can distinguish links without sacrificing styles.

• text-underline-offset controls the position of the underline.
• text-decoration-thickness controls the thickness of underscores, overscores and strikethroughs.

According to WebKit Blog:

You can also specify from-font for both properties, which will extract the relevant metric values ​​from the font file itself used.

UX agency Clearleft boldly uses (pseudo) underscores to clearly attract people's attention to links with colorful styles. Here is an example of a pseudo-underscore:

 <code>a { text-decoration: none; border-bottom: #EA215A 0.125em solid; }</code>

Note that this pseudo-underscore is clearly located below the descending body of the letter "y":

Here is the same paragraph, using DevTools to apply the same style to the true underscore using the new CSS property:

 <code>a { text-decoration-color: #EA215A; text-decoration-thickness: .125em; text-underline-offset: 1.5px; }</code>

You will notice that I used the em unit in the sample code. The specification strongly recommends using it instead of pixels so that the thickness scales with the font.

These properties have been published in Safari and will appear in Firefox 70.

As Microsoft Edge browser migrates to Chromium, we will eventually get cross-browser support for text-decoration-style property, which provides the following options: solid (default), double, dotted, dotted, and wavy lines. Using these new properties in combination opens up a range of possibilities.

However, perhaps the biggest improvement on the underscore on the web is that it can be achieved without the developers doing anything. In the past, the descending feeling was ruthlessly cut off by underscores, which is far from grace. Developers used to solve this disadvantage by applying text shadows that match the background color. text-decoration-skip-ink provides a better way to leave room for the descent body.

Conveniently, it is set to the new default value for underscores; this means that the appearance of underscores has been improved, and most web developers are still unaware of the existence of this property. If you want the underscore to span the glyph, you can set this property to none .

The above is the detailed content of Styling Links with Real Underlines. For more information, please follow other related articles on the PHP Chinese website!