The CSS `system-ui` value for `font-family` is well supported across browsers and delivers the native UI font for each platform — San Francisco on macOS, a Windows system font on Windows, etc. On macOS, San Francisco is a variable font with `wght` and `wdth` axes, allowing programmatic control over weight and width at zero download cost. Fallbacks across other platforms are reasonable, and the native look can feel natural to long-time users of those platforms.
Questions this post answers
How do I use font-variation-settings with system-ui on macOS to control weight and width?
On macOS, `system-ui` resolves to San Francisco, which is a variable font supporting a weight axis (`"wght"`) and a width axis (`"wdth"`). You can control both via `font-variation-settings`: for example, `font-variation-settings: "wght" 900, "wdth" 700;` produces a heavy, expanded style. This works at zero download cost since the font is built into the OS. Developers fine-tuning CSS typography without custom font downloads track techniques like these on daily.dev.
What font does CSS system-ui resolve to on macOS, Windows, and Linux?
On macOS, `system-ui` resolves to San Francisco. On Windows it delivers a Windows-style UI font, and on Linux a Linux-native UI font. The value is well supported across browsers and platforms, making it a practical zero-download choice that naturally matches the look of each operating system's interface. Teams deciding on a font strategy for cross-platform web apps find relevant CSS discussions on daily.dev.