Codectionary / Developer documentation / CSS

Readable Underlines with text-decoration-skip-ink

Underline ink skipping lets the line avoid areas where it would collide with glyph ink, such as descenders.

What it is and why to use it

Underline ink skipping lets the line avoid areas where it would collide with glyph ink, such as descenders. It is useful for links in body text because the underline can remain recognisable while letters stay clearer. The exact result depends on the font and browser.

Common mistakes and limitations

Do not depend on identical gaps across fonts and engines. Ink skipping does not repair insufficient contrast or an underline placed too close to the text. Retain visible focus styling and other normal link behaviour.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<a class="link" href="#practice">Enjoy practising typography</a>

Syntax

text-decoration-skip-ink: auto;

Examples

Readable Underlines with text-decoration-skip-ink

Run the CSS against the supplied HTML, then experiment with the values.

.link { font: 1.5rem/1.8 serif; text-decoration-line: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; text-decoration-skip-ink: auto; }
  1. The link has an explicit underline, thickness and offset.
  2. auto permits the browser to interrupt that underline around colliding letter shapes.
  3. Compare with none to see a continuous line through relevant descender areas. This is useful for readable editorial links rather than removing link underlines altogether.
HTML used by this example
<div class="demo"><a class="link" href="#practice">Enjoy practising typography</a></div>

Best practices

  • Do not depend on identical gaps across fonts and engines. Ink skipping does not repair insufficient contrast or an underline placed too close to the text. Retain visible focus styling and other normal link behaviour.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading