How to Inspect CSS font-size-adjust and Metric Overrides in Safari Web Inspector

Cumulative Layout Shift (CLS) is a critical user experience metric that penalises jarring shifts during web page loading. One of the primary sources of layout instability is font swapping (FOUT/FOIT), where fallback system fonts and incoming custom web fonts possess mismatched x-heights, cap-heights, or ascent ratios. Modern WebKit in Apple Safari supports font-size-adjust along with @font-face metric override descriptors, enabling designers to normalise letter dimensions perfectly. This guide demonstrates how to inspect and fine-tune these properties in Safari Web Inspector.

The Geometry of font-size-adjust

When browser rendering engines switch fonts, the declared font-size dictates the em-box height rather than the visible height of lowercase characters (the x-height). If a custom web font has an aspect value (ratio of x-height to font size) of 0.52 and the fallback font has an aspect ratio of 0.44, swapping fonts causes every paragraph line to expand vertically, shifting downstream elements. Setting font-size-adjust: 0.52 (or font-size-adjust: from-font) forces Safari to scale lowercase characters identically across both fonts.

Configuring Normalized Fallback Fonts in CSS

Declare the custom web font and calibrate the system fallback using metric override descriptors:

/* 1. Primary custom web font */
@font-face {
  font-family: "EditorialSans";
  src: url("/fonts/editorial-sans.woff2") format("woff2");
  font-display: swap;
}

/* 2. Overridden fallback matching EditorialSans geometry */
@font-face {
  font-family: "EditorialSans-Fallback";
  src: local("Arial");
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 104%;
}

/* 3. Apply to document with font-size-adjust normalization */
body {
  font-family: "EditorialSans", "EditorialSans-Fallback", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-size-adjust: 0.52;
}

Inspecting Font Properties in Safari Web Inspector

1. Launch Safari on macOS and open your editorial website.
2. Right-click any paragraph text and choose Inspect Element.
3. In Web Inspector, open the Elements tab and select the Computed panel.
4. Filter by font and expand the Fonts section at the bottom of the right sidebar.
5. Inspect the actively rendered font file name, format, and unicode range. Safari clearly indicates whether a local fallback or a remote web font is active.
6. Switch to the Styles panel and verify that font-size-adjust: 0.52 is actively applied without warnings.

Simulating Font Swaps and Measuring Layout Shifts

To audit layout stability during font load transitions:

1. Open the Network tab in Safari Web Inspector.
2. Set network throttling to Regular 3G to simulate mobile network latency.
3. Click Timelines, check Layout & Rendering, and click Record.
4. Refresh the page with Cmd + R.
5. Observe the text rendering transition as the fallback displays first, followed by the web font swap.
6. Notice that with font-size-adjust active, line box heights and word wrapping positions remain perfectly motionless when the web font hydrates, resulting in a zero-CLS transition.