CSS text-decoration-skip-ink: auto Explained

The CSS property text-decoration-skip-ink: auto controls how underlines and overlines interact with text glyphs, specifically preventing lines from cutting directly through descending letters. By dynamically creating small, clean breaks in the underline around descenders like "g", "j", "p", "q", and "y", this property enhances typography, maintains letterform integrity, and significantly improves readability across web pages.

Understanding Descenders and the Problem

In typography, the baseline is the invisible line upon which most letters sit. Characters such as "g", "j", "p", "q", and "y" have strokes called descenders that extend downward past this baseline.

Historically, default browser behavior drew continuous underlines directly across the baseline. When an unbroken underline strikes through a descender, it creates visual noise, distorts the character's shape, and makes text harder to read—especially at smaller font sizes.

How text-decoration-skip-ink: auto Works

When text-decoration-skip-ink is set to auto, the browser examines the font glyphs and automatically introduces an intentional gap in the underline wherever it encounters a descender or any stroke that crosses the decoration path.

Key behaviors include:

• Symmetrical Clipping: The browser calculates a small margin around the character's stroke, clearing the line smoothly without disconnecting the underline too far from the word.
• Smart Detection: It applies to Roman letters, accents, and symbols that hang below the baseline, preventing the line from colliding with commas, semicolons, or diacritics.
• Context Awareness: The underline only skips when an actual stroke intersects the line; letters resting entirely on or above the baseline remain continuously underlined.

Default Browser Behavior

In modern web browsers, text-decoration-skip-ink: auto is the default value for the text-decoration-skip-ink property. This means underlines created using text-decoration: underline naturally skip descenders without requiring manual CSS intervention.

Syntax and Values

The property accepts three primary values:

• auto: The default setting. The browser automatically skips descenders and character strokes to optimize legibility.
• none: Disables ink skipping entirely. The underline passes directly through all descenders as a continuous line, which is useful for specialized designs, mathematical notations, or scripts where gaps might cause confusion.
• all: Forces the underline to skip across the entire glyph bounding box or any glyph with descenders, often creating wider breaks (support varies by browser).

/* Enable ink skipping (default behavior in modern browsers) */
a {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

/* Disable ink skipping for a continuous strike-through line */
.continuous-underline {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

Typographic Benefits

Using text-decoration-skip-ink: auto mimics traditional print typography, where typesetters avoided running rules through characters to keep text distinct. By allowing the letterforms to remain whole, web typography appears more polished, refined, and legible across all screen resolutions.