How to Inspect and Control CSS font-kerning and OpenType Kerning Pairs in Safari Web Inspector

In high-end digital publishing, editorial design, and brand identity typography, the spacing between consecutive glyphs dictates visual harmony and reading comprehension. Without kerning adjustments, certain letter combinations—such as “AV”, “WA”, “To”, “LT”, and “P.” — display jarring, disproportionate gaps due to their asymmetrical character shapes. Professional OpenType and TrueType fonts embed dedicated kerning tables (such as the kern table or the modern GPOS kern feature) that adjust the horizontal spacing between specific pairs of characters dynamically.

The CSS font-kerning property controls whether the browser’s text layout engine applies these embedded font kerning pairs during text shaping. In Apple Safari on macOS and iOS, the WebKit rendering engine features an advanced CoreText-backed typographic shaping pipeline. Using Safari Web Inspector, web developers and digital typographers can inspect computed font kerning rules, evaluate the visual impact of OpenType kerning tables, toggle kerning states on and off dynamically, and measure typographic rendering performance across responsive displays.

Understanding CSS font-kerning Values and WebKit Font Shaping

The font-kerning property provides granular control over character pair spacing without altering the base tracking or letter-spacing of the entire word:

• auto: The default browser behaviour. WebKit decides whether to apply kerning based on font size and performance constraints. In modern desktop and mobile Safari, auto typically enables kerning for all standard fonts.
• normal: Explicitly enforces the application of font kerning data stored within the font file’s OpenType GPOS or kern tables. Kerning pairs are rendered regardless of font size.
• none: Completely disables font kerning adjustments. All glyphs are positioned strictly according to their standard character advance widths, ignoring kerning pairs. This can significantly improve layout shaping speed in massive datasets or heavy text tables.

Note that font-kerning operates exclusively on character pairs defined within the font itself. If a typeface does not include embedded kerning tables (common in unoptimized icon fonts or low-quality free web fonts), changing font-kerning will have no visible effect.

Enabling Safari Web Inspector and Selecting Typographic Elements

To inspect font kerning in Safari on macOS:

1. Launch Safari and navigate to Safari > Settings (or press Cmd + ,).
2. Select the Advanced tab and ensure the checkbox Show features for web developers is selected.
3. Close the Settings window. The Develop menu will now appear in the macOS menu bar.
4. Right-click the headline, logo, or body copy exhibiting character spacing issues and select Inspect Element (or press Cmd + Option + I).

The Web Inspector panel opens, highlighting the target node in the Elements DOM tree hierarchy.

Inspecting Computed Font Properties in the Styles Sidebar

With the target element selected, examine the right-hand panel of Web Inspector.

To audit active kerning declarations:

1. In the Styles panel, examine applied CSS rules. If a CSS reset or typography stylesheet applies font-kerning: none or overrides font features, verify whether higher-specificity selectors affect it.
2. Switch to the Computed tab within the Styles panel.
3. Type font-kerning into the search box. Web Inspector displays the resolved property value applied by the WebKit rendering engine, alongside a link to the originating stylesheet and line number.
4. Also inspect the Font section inside the Computed panel. Safari Web Inspector displays the actual rendered font file name, format (WOFF2, OpenType, TrueType), and whether the glyphs were synthesized or loaded from a local system font.

Testing and Simulating Kerning Live in Web Inspector

You can toggle kerning states live in Safari to visualize how embedded OpenType kerning pairs affect word geometry.

To test property variations live in Web Inspector:

1. In the Styles panel, click inside the CSS declaration block for your target selector (e.g. .hero-heading or .editorial-title).
2. Add the declaration:

   .hero-heading {
       font-kerning: none;
   }

3. Observe the characters in words containing “AV”, “WA”, or “To”. The characters will spread apart slightly, reverting to their unadjusted rectangular bounding boxes.
4. Now change the declaration to:

   .hero-heading {
       font-kerning: normal;
   }

5. Observe the viewport. The angled strokes of “A” and “V” tuck cleanly under each other, closing the visual whitespace gap and creating balanced typographic balance.

Comparing font-kerning with letter-spacing and font-feature-settings

Understanding where font-kerning fits within the CSS typography hierarchy prevents common front-end styling conflicts:

In WebKit, applying a non-zero letter-spacing value does not disable font-kerning. Rather, WebKit applies the kerning pair adjustment first, and then adds the uniform tracking offset to every character boundary.

Performance Optimisation: Disabling Kerning in High-Density Tables

While kerning is essential for large headlines and editorial prose, calculating OpenType GPOS pairs for massive data tables, log viewers, or infinite-scrolling code blocks incurs layout shaping overhead.

To optimize layout speed in data-intensive web applications:

/* Enforce kerning on prominent editorial elements and headings */
h1, h2, h3, .brand-title {
    font-kerning: normal;
}

/* Disable kerning in dense data tables and monospace logs to accelerate layout recalculation */
.data-grid, .log-output, pre, code {
    font-kerning: none;
}

In Safari Web Inspector’s Timelines tab, you can record a layout performance trace while scrolling a large data table with font-kerning: normal versus font-kerning: none to measure the reduction in text layout recalculation time.