Font stack
Benefits of system fonts
System fonts allow you to use the internal operating system fonts within the product without having to load an external web font file. This enables better looking, high-resolution text that does not impact performance.
Benefits
- Faster load times - Using a system font means that the font does not need to load before rendering text. Fonts are typically one of the largest/heaviest resources loaded on a site.
- No font flash - With slow internet speeds or mobile loading, fallback font will initially show and when brand font is loaded it will substitute and cause a flash and typography shift. This is important when expanding to other countries that have slower internet access.
- Designed for different screen resolutions - Work across a wide set of supported platforms, screen sizes and resolutions to better support.
- Familiarity - Web apps feel more native when they use system font faces.
- Native support for internationalization - Ability to swap languages
- Free - No licensing required.
Challenges
- Requires follow OS changes - Need to keep up-to-date and adjust font stack to keep aligned with OS platform changes.
- Only most popular platforms - All others get a fallback font
- Brand presence and feel - An issue with any non-brand font
Other companies that use system fonts
- GitHub
- Medium
- Ghost
- Bootstrap
- Booking.com
- Wordpress dashboard
San Francisco
iOS Safari, macOS Safari, macOS Firefox
Segoe UI
Windows
Roboto
Android, Chrome OS
Oxygen
KDE
Ubuntu
Ubuntu
Cantarell
GNOME
Fira
Firefox OS