Summary & Key Takeaways ​

The system-ui CSS font value is widely supported across modern browsers. Using system-ui provides the native system font for the user's operating system. On macOS, this defaults to San Francisco, which is a variable font. Variable font support offers enhanced typographic flexibility and performance. The fallback fonts for system-ui are generally robust and well-chosen. It's a simple way to achieve a native look and feel for web applications.

Our Commentary ​

I'm always surprised how many developers still don't default to system-ui. It's such a simple win for performance and native feel. The variable font aspect on macOS is a nice bonus that often goes unmentioned. We should all be using this more often. It's a small detail that makes a big difference in user experience.