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

SF Pro font stack demoSF Mono font stack demo

Segoe UI

Windows

Segoe UI font stack demoCascadio Mono or Segoe UI Mono font stack demo

Roboto

Android, Chrome OS

Roboto font stack demoRoboto mono font stack demo

Oxygen

KDE

Oxygen font stack demoOxygen mono font stack demo

Ubuntu

Ubuntu

Ubuntu font stack demoUbuntu Mono font stack demo

Cantarell

GNOME

Cantarell font stack demoSource Code Pro font stack demo

Fira

Firefox OS

Fira Sans font sack demoFira Mono font stack demo

Fallback

Arial, sans-serif font stack demoCourier New, monospace font stack demo