The System UI Font Stack
Build the standard system-ui font stack that uses each operating system's native interface font. Zero web font downloads for maximum performance.
Detailed Explanation
What Is the System UI Font Stack?
The system UI font stack is a CSS font-family declaration designed to use each operating system's default interface typeface. Instead of downloading an external web font, the browser renders text with the font the user already sees in their OS menus, buttons, and dialogs.
The Declaration
font-family: system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
How It Works
| Keyword / Font | Matched On |
|---|---|
system-ui |
Modern browsers (maps to the OS default) |
-apple-system |
Safari on macOS / iOS (San Francisco) |
BlinkMacSystemFont |
Chrome on macOS (San Francisco) |
Segoe UI |
Windows 7 / 8 / 10 / 11 |
Roboto |
Android, Chrome OS |
Oxygen / Ubuntu / Cantarell |
Various Linux distributions |
Fira Sans |
Firefox OS (legacy) |
Droid Sans |
Older Android versions |
Helvetica Neue |
Pre-El Capitan macOS |
sans-serif |
Ultimate generic fallback |
Why the Long List?
Older browsers do not understand the system-ui keyword, so every subsequent entry serves as a platform-specific fallback. The generic sans-serif at the end ensures the browser always picks some sans-serif face even on an unknown system.
Performance Benefit
Because no external font file is downloaded, the stack eliminates FOIT (Flash of Invisible Text) and FOUT (Flash of Unstyled Text). The Largest Contentful Paint (LCP) metric often improves by 100-300 ms on mid-tier mobile devices.
Use Case
Ideal for web applications, dashboards, and content-heavy sites where performance is the top priority and you want text to feel native to the user's platform.