macOS system-ui gets optical size and grade controls in Chromium 83

Starting with Chromium 83, the system-ui keyword on macOS Catalina exposes more of the San Francisco variable font's capabilities. In addition to weight, web developers can now control optical sizing, grade, and vertical axis scaling directly through CSS font-variation-settings.

On macOS 10.15, the system font is a single variable font that supports four axes:

  • wght — font weight from 0 to 900
  • opsz — optical size, where 19 or below targets body text and 20 or above suits display type
  • GRAD — weight-like variation without changing horizontal spacing, accepts 400 to 1000
  • YAXS — vertical glyph stretch, accepts 400 to 1000

By contrast, macOS 10.14 Mojave only exposed wght. Catalina's addition of opsz is significant: on Mojave, optical sizing was baked into two separate fonts. Text below 20px used "San Francisco Text"; at 20px and above, macOS switched to "San Francisco Display." Catalina unifies those into one variable font with an opsz axis.

font-variation-settings: "wght" 750, "opsz" 19, "GRAD" 600;

This opens up progressive enhancement possibilities—for example, tuning the system font for small body copy or large headings with CSS alone.

Background: a Catalina regression

The new capabilities didn't arrive without friction. Chromium engineers dealt with a spacing bug on Catalina reported in Issue #1005969: system-ui text rendered narrow and cramped. The cause was the default opsz value in Catalina's San Francisco font, which is 20. Chromium wasn't applying opsz to the system font, so small text used display-oriented metrics.

The fix required Chromium to apply opsz correctly, but that led to a second problem. macOS system fonts include a trak table that adjusts horizontal spacing. When Chromium retrieved horizontal metrics from a CTFontRef, the trak adjustments were already factored in—but HarfBuzz, Chromium's shaping library, expected raw metrics without them.

Internally, Skia (Chromium's graphics library) works with both CGFontRef from CoreGraphics and CTFontRef from CoreText. Converting between these two objects, necessary for backwards compatibility and API access, caused weight information to be lost in certain situations, breaking bold fonts. This regression was tracked in Issue #1057654.

The complexity runs deep. Chromium still supports macOS 10.11, where San Francisco Text and Display were each families of separate fonts per weight, with glyph IDs that could drift out of sync between families. Resizing via matrix scaling had issues too: CoreText wouldn't scale sbix (color emoji) glyphs up, only down, and appeared to cap vertical extent after matrix application.

To create differently sized CTFont objects while preserving the same underlying font data, Chromium previously pulled the CGFont off the CTFont and made a new CTFont from it. That worked on Mojave but lost too much information on Catalina, leading to the weight bug. An alternate fix builds the new CTFont directly from the original CTFont, controlling optical size via an undocumented CoreText attribute to keep things working on older macOS. However, this approach preserves CoreText's "magic," which tweaks glyph advances beyond the trak table.

Using CGFont directly for advances wasn't viable either—CoreText adjusts fonts in other ways, like rendering small emoji slightly larger than requested. Chromium ideally wants CTFont advances without tracking or other adjustments, but a single revert wasn't possible since the spacing fix required interconnected Blink and Skia changes. Even a different Skia build flag fixed one issue while regressing the other.

The resolution

Chromium's final fix sidesteps CoreText and Skia for fonts with a trak table (except emoji): it uses HarfBuzz's built-in OpenType font metrics functions to read horizontal metrics directly from the font's binary table data.

As of the fix, web developers on macOS Catalina can reliably use the new optical sizing and grade variations in the system font. Chromium also continues to track Skia Issue #10123 for a more complete long-term fix inside Skia itself.