How to Inspect CSS font-feature-settings Kerning Pairs in Safari Web Inspector

Kerning is the process of adjusting the spacing between adjacent character pairs to achieve an optically balanced, harmonious rhythm. In professional type design, glyph combinations such as “AV”, “To”, “Wa”, and “P.” require tighter spacing than uniform character bounding boxes provide. OpenType fonts embed sophisticated kerning lookup tables (accessible via the kern OpenType feature) that specify offset adjustments for thousands of glyph combinations. While modern browsers enable kerning by default, legacy CSS overrides, low-level canvas rendering, or aggressive performance optimizations can inadvertently disable kerning tables.

Using CSS properties like font-kerning and font-feature-settings: "kern", web developers can guarantee proper spacing. Inspecting these kerning rules inside Safari Web Inspector ensures typographic precision across macOS and iOS platforms.

Understanding Modern CSS Kerning Controls

The CSS Fonts Module provides the high-level font-kerning property as the preferred standard over raw font-feature-settings tags:

/* High-level standards-compliant kerning */
.article-title {
    font-kerning: normal; /* Enables OpenType 'kern' feature */
}

/* Explicitly disable kerning for monospace or tabular data */
.data-code {
    font-kerning: none;
}

/* Low-level OpenType tag declaration (fallback) */
.custom-typography {
    font-feature-settings: "kern" 1;
}

Setting font-kerning: normal ensures that Safari’s CoreText layout engine evaluates OpenType GPOS (Glyph Positioning) tables, applying designer-defined kerning vectors between adjacent characters.

Inspecting Kerning Tables in Safari Web Inspector

Safari provides detailed OpenType feature inspection within its developer tools:

1. Launch Safari on macOS and open your target webpage.
2. Right-click the headline or body copy and choose Inspect Element.
3. In the right-hand panel, select the Fonts tab.
4. Scroll to the Feature Settings subsection. Safari lists all active OpenType features resolved for the selected element.
5. Verify that kern (Kerning) is marked as active. If disabled, Web Inspector indicates that standard character metrics without pair adjustments are being rendered.
6. Switch to the Styles panel, toggle font-kerning: none; on and off, and observe the immediate visual shift in glyph spacing across problematic pairs like “AW” or “Te”.

Authoring Resilient Typographic Styles

To ensure consistent pair kerning across diverse operating systems and fallback fonts, declare strict kerning rules across heading hierarchies:

/* Global heading typography rules */
h1, h2, h3, .brand-display {
    font-family: "DisplayFont", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
}

/* Monospace alignment guard */
pre, code, kbd, samp {
    font-kerning: none;
    font-feature-settings: "kern" 0;
    font-variant-numeric: tabular-nums;
}

Testing Kerning on iOS via Remote Web Inspector

Because text rendering on iOS utilizes mobile CoreText configurations with different subpixel hinting, inspecting kerning on physical devices is recommended:

1. Enable Web Inspector on your iPhone under Settings > Safari > Advanced.
2. Attach the device to your Mac via cable.
3. In Safari on macOS, open the Develop menu, select your iOS device, and inspect the target webpage.
4. Verify that OpenType kerning pairs render cleanly without clipping or unwanted character collisions on mobile screens.

Enforcing strict kerning rules ensures polished, publication-ready typography across all Apple platforms.