CSS text-decoration-skip-ink Guide

The text-decoration-skip-ink property controls how underlines and other decorations render around glyph descenders. Here's how to use it.

Combined with Other Properties#

Loading code block...

Best Practices#

When to Use auto:
✓ Body text links
✓ Long-form content
✓ Serif and script fonts
✓ Accessibility-focused design

When to Use none:
✓ Decorative underlines
✓ Short text/headings
✓ Strikethrough text
✓ Wavy/dotted styles

When to Use all:
✓ Maximum readability
✓ Complex scripts
✓ Small font sizes
✓ High contrast needs

Avoid:
✗ Inconsistent link styles
✗ Too thick underlines
✗ Poor color contrast
✗ Ignoring descenders

The text-decoration-skip-ink property improves underline rendering by creating gaps around descenders like g, j, p, q, and y. Use auto for most text content to improve readability, none for decorative effects or continuous lines, and all for maximum descender clearance. Combine with text-underline-offset and text-decoration-thickness for complete control over underline styling.

CSS text-decoration-skip-ink Guide

Basic Usage#

Visual Comparison#

Link Styling#

Combined with Other Properties#

Typography Considerations#

Accessibility Considerations#

Strikethrough#

Overline#

Practical Examples#

Animation Effects#

Browser Fallbacks#

Print Styles#

Best Practices#

Conclusion#

Share this article

Related articles

Modern CSS Reset and Base Styles

CSS clamp(), min(), and max() Functions

CSS Writing Modes