CSS text-decoration-skip-ink Property

Description

The text-decoration-skip-ink property controls whether decorative lines applied to text (for example underlines and overlines) avoid intersecting the actual glyph shapes when those glyphs extend into the decoration area. When enabled, the renderer can create small gaps in the decoration so it “skips” around descenders, diacritics, or other parts of glyphs that would otherwise be visually cut by the line. The goal is improved legibility and a cleaner appearance: the decoration no longer appears to slice through letters like g, j, y, or accented characters, which can be distracting especially at small sizes.

In practical terms, skipping is a rendering decision that balances the continuity of a decoration line against the clarity of the glyphs it crosses. When skipping is used, the decoration may appear broken into short segments around glyph outlines; when skipping is not used, the line remains continuous and may intersect letterforms. This behavior interacts with how thick and where the decoration is drawn: for example, thicker decorations or decorations positioned nearer the glyph shapes are more likely to collide with glyphs and therefore benefit from skipping. Skipping is a purely visual adjustment — it does not change selection, copy/paste, or the actual text metrics in layout.

This property is commonly considered alongside other decoration-related properties. For example, the overall decoration is controlled by text-decoration, the stroke weight of the line is controlled by text-decoration-thickness, and the baseline-relative placement of an underline is influenced by text-underline-position. Designers often tune these properties together so that a skipped decoration still looks intentional — for instance, a very thin underline may not need skipping because intersections are less noticeable, while a heavy underline may look better with skipping enabled.

When to enable or disable skipping is a typographic decision. Skipping improves readability for long bodies of small text or when many languages with descenders or diacritics are present, and it often yields a more polished, high-quality appearance for links and emphasized text. On the other hand, in highly brand-managed designs where decoration lines must remain visually continuous (for example, to match a strict logo style or to preserve a particular geometric aesthetic), skipping may be undesirable. It’s also worth noting that the exact size of the gap and the heuristics used to skip glyphs can vary by font, rendering engine, and device, so testing at the intended sizes and on representative fonts is important.

Definition

Initial value: auto
Applies to: all elements
Inherited: yes
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.textDecorationSkipInk

Interactive Demo

text-decoration-skip-ink: auto;

text-decoration-skip-ink: none;

The rusty swing set creaked.

Syntax

text-decoration-skip-ink: auto | none | all

Values

autoUnderlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.
noneThe default - the browser may interrupt underlines and overlines so that they do not touch or closely approach a glyph. That is, they are interrupted where they would otherwise cross over a glyph.
allThe browser must interrupt underlines and overlines so that they do not touch or closely approach a glyph. This can be helpful with certain Chinese, Japanese, or Korean (CJK) fonts, where the auto behavior might not create interruptions.

Example

HTML

<div class="wrap">

  <h2>text-decoration-skip-ink examples</h2>



  <p class="label">Underline with skip-ink: auto</p>

  <p class="example auto">Quick brown fox jumps over lazy dogs. A gentle glyph: going, jumping, gypsy.</p>



  <p class="label">Underline with skip-ink: none</p>

  <p class="example none">Quick brown fox jumps over lazy dogs. A gentle glyph: going, jumping, gypsy.</p>



  <p class="label">Underlined link (auto)</p>

  <p class="example auto"><a href="#">Sign up for the party on Friday night</a></p>

</div>

CSS

/* Layout and typography */
body {
  margin: 0;
  padding: 32px;
  font-family: Georgia, 'Times New Roman', serif;
  background: #ffffff;
  color: #111111;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
}

h2 {
  margin: 0 0 18px 0;
  font-size: 20px;
}

.label {
  margin: 18px 0 6px 0;
  font-weight: 600;
  color: #333333;
}

.example {
  margin: 0 0 12px 0;
  font-size: 22px;
  line-height: 1.6;
}

/* Common underline appearance for clarity */
.example,
.example a {
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Skip-ink enabled (recommended): underline will "skip" descenders */
.example.auto {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  -webkit-text-decoration-skip-ink: auto; /* legacy prefixed support */
}

/* Skip-ink disabled: underline will run through descenders */
.example.none {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  -webkit-text-decoration-skip-ink: none; /* legacy prefixed support */
}

/* Link color styling */
.example a {
  color: #0066cc;
  text-decoration-color: currentColor;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS text-decoration-skip-ink property. Hover over a browser icon to see the version that first introduced support for this CSS property.