Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

CSS text-decoration-skip-ink: keep underlined copy legible

Last updated: 5 Oct 20265 min read
tutorial
BeginnerBy AITrove Editorial

Text-decoration-skip-ink controls whether text decoration lines skip areas where glyph ink crosses them. The auto value lets the browser interrupt an underline around descenders; none draws a continuous line through them. Font and browser rendering influence the result.

When to use it

A case report embeds evidence links in dense paragraphs. Keep the underline visible at rest and let the browser skip descenders where that makes the words easier to scan. Set an explicit underline thickness and offset only after checking the real font; too much offset can make the line look detached, while too little can cross glyphs even when skipping is enabled. Test lower-case words with descenders, mixed scripts, high zoom, a light and a dark surface, and forced colors. The effect is typographic polish, not the link's meaning. A link still needs a real href and a focus indicator. Do not remove the underline and depend on color alone. Underline behavior for CJK text and different writing modes may warrant a separate design review rather than applying one global rule to every language.

css
.case-report a { text-decoration-line: underline; text-decoration-thickness: .1em; text-underline-offset: .16em; text-decoration-skip-ink: auto; }
.case-report a:focus-visible { outline: 3px solid #1c5e87; outline-offset: 2px; }

Cost and verification

Decoration drawing has negligible cost relative to font loading or layout. The maintenance cost is visual testing with the actual typeface, weight, and language mix. Skipping ink changes pixels, not link hit targets or text selection. If an underline becomes too fragmented with a particular display font, review its offset and thickness before forcing a continuous line through every descender. The browser may render skip behavior differently; the link should remain recognizable in each result. Keep contrast between the decoration and the surrounding surface, and verify the focus outline does not merge with the underline on tightly spaced lines.

Common Mistakes

  • Do not remove the resting underline and rely only on color.
  • Do not assume skip-ink fixes an underline placed too close to glyphs.
  • Do not treat typographic decoration as a keyboard focus indicator.

Connected lessons

css
reference
web
Storage details