I've been experimenting with the system-ui font on macOS, but I noticed that it only shows font-weights 400 and 700 in Chrome. However, SF Pro actually supports weights from 100 to 900. I'm considering using a local font stack that includes SF Pro Display along with system fonts, but I won't be able to ship SF Pro since that's illegal. My goal is to access all nine font weights on macOS while ensuring it gracefully falls back to system fonts on other platforms. Are there any downsides to this approach? Is this common practice? How do other platforms like Windows with Segoe UI, or Android with Roboto, handle system-ui font weights? I'm aiming for a cross-platform web app experience without the hassle of shipping fonts, and I need 500/600 weights for headers instead of just 700 for everything.
1 Answer
If you want a really native feel that also looks the same across different operating systems, you might consider using Helvetica. It’s a consistent choice that many developers use.
I don't think you can combine being native and looking the same across OSes. The main goal here is to utilize the platform's default font, not to make it uniform across all systems.