Let underlines skip descenders

Lift the underline and carve it around g, j and y.

Paco Courseypaco.me
You'll notice that the underline overlaps the descenders of the text. By adding a text-shadow with a small offset to the right and left with the color of the background, you can hide the underline around descenders.
Custom text underlines · Feb 2020Read article ↗

Modern CSS skips descenders natively, so the 2020 text-shadow trick is now optional.

Good pane

1 · Underlines and g, j, y

Switch the technique, then drag offset and thickness.

Line through lettersBad

Good typography pays off in jigsaw puzzles, kerning and gypsy jazz posters.

background-imageAt the baseline
Text-shadow carveGood

Good typography pays off in jigsaw puzzles, kerning and gypsy jazz posters.

text-shadow: 0.08em 0 var(--bg)
/* 2020: carve the line with background-colored shadows */
.link {
  background: linear-gradient(currentColor, currentColor) 0 1.04em / 100% 1px no-repeat;
  text-shadow: .06em 0 var(--bg), -.06em 0 var(--bg), .12em 0 var(--bg), -.12em 0 var(--bg);
}

/* Now: the browser skips descenders itself */
.link {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 1px;
}

Why it matters, pros and cons

Why it matters

A line drawn through g, j and y merges with the strokes and turns the word into noise.

Pros

  • Gaps around descenders keep every letter shape readable at small sizes.
  • text-decoration-skip-ink does it natively, with no color matching at all.
  • An offset gives the line breathing room, and a thin line stays calm.

Cons

  • The text-shadow trick must match the background color exactly, so it breaks on images.
  • Skip-ink only works on real text-decoration, not on background or border underlines.
  • Shadows add paint cost on long runs of linked text; use them sparingly.