How to Inspect CSS text-underline-offset and Text Decoration Thickness in Safari Web Inspector

Typography on the web has long struggled with default browser text underlines. Historically, browsers rendered hyperlinks with thick, inconsistent underline rules that sliced uncomfortably through typographic descenders (such as the tails on “g”, “j”, “p”, “q”, and “y”). To work around this aesthetic flaw, designers resorted to fragile hacks like border-bottom or box-shadow offsets that did not scale proportionally with font size. Standardised in the CSS Text Decoration Module Level 4, properties such as text-underline-offset, text-decoration-thickness, and text-decoration-skip-ink grant fine-grained typographic control. Safari on macOS provides specialized typography inspection tools to evaluate underline placement.

Understanding CSS Text Decoration Level 4 Properties

Modern CSS decouples text underline positioning from font baseline baselines:

• text-underline-offset: Controls the vertical separation distance between the typographic baseline and the underline. Supports length units (e.g., 0.2em, 4px) or auto. Using relative em units ensures the offset scales dynamically with headings and body copy.
• text-decoration-thickness: Sets the stroke thickness of the underline rule (e.g., from-font, 1.5px, 0.08em). from-font extracts the type designer’s intended stroke metric from OpenType font tables if present.
• text-decoration-color: Applies custom color tokens independently of the text fill color, enabling subtle low-contrast hyperlinks.
• text-decoration-skip-ink: auto: Automatically creates clean vector gaps around glyph descenders, ensuring descenders remain legible.

Implementing Elegant Typographic Underlines in CSS

Here is a modern typographic style ruleset implementing proportional, legible hyperlink underlines:

/* 1. Base Hyperlink Typography */
.article-body a {
    color: #0f172a;
    text-decoration-line: underline;
    
    /* Decouple underline color and stroke thickness */
    text-decoration-color: rgba(0, 113, 227, 0.4);
    text-decoration-thickness: 0.12em;
    
    /* Calibrate vertical offset below descenders */
    text-underline-offset: 0.25em;
    
    /* Ensure clean cuts around typographic descenders */
    text-decoration-skip-ink: auto;
    
    /* Smooth hover transition */
    transition: text-decoration-color 200ms ease, color 200ms ease;
}

/* 2. Interactive Hover State */
.article-body a:hover {
    color: #0071e3;
    text-decoration-color: #0071e3;
    text-decoration-thickness: 0.16em;
}

/* 3. Heading Underline Accent */
.section-heading {
    text-decoration: underline;
    text-decoration-color: #f59e0b;
    text-decoration-thickness: 4px;
    text-underline-offset: 8px;
    text-decoration-skip-ink: none; /* Solid architectural line */
}

Inspecting Underlines in Safari Web Inspector

Follow these steps to inspect and fine-tune underline metrics inside Safari:

1. Open Safari on macOS, navigate to your webpage, and open Web Inspector via Option+Command+I.
2. In the Elements DOM tree, select the hyperlink element (e.g., .article-body a).
3. In the Styles panel, locate the text-underline-offset and text-decoration-thickness declarations.
4. Double-click the value for text-underline-offset. Use the Up and Down arrow keys on your keyboard to adjust the offset incrementally (e.g., from 0.2em to 0.35em).
5. Observe how Safari updates the underline positioning in real time on the canvas without triggering document reflows.
6. In the Computed tab, inspect the resolved pixel values for text-decoration-thickness to ensure that high-DPI Retina screens render crisp, single-pixel or sub-pixel strokes without fuzziness.

Best Practices for Accessibility and Legibility

• Maintain Visible Underlines: Do not remove text underlines entirely from inline body copy (text-decoration: none) unless an alternative visual affordance (such as high contrast and icons) satisfies WCAG 1.4.1 non-color design requirements.
• Avoid Excessive Offsets: Setting text-underline-offset too high can cause the underline to collide with the line of text immediately below it in dense multi-line paragraphs.
• Relative Units for Scalability: Prefer em units over fixed pixels for responsive typography to ensure that users adjusting browser font scaling maintain balanced underline ratios.