GitHub's System Font Stack

GitHub's Font Stack

GitHub was one of the first major websites to adopt a pure system font stack, dropping custom web fonts in 2016. The move reduced page weight and improved rendering speed across all platforms.

The Declaration

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
  "Noto Sans", Helvetica, Arial, sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji";

Breakdown

• -apple-system / BlinkMacSystemFont target San Francisco on Apple devices.
• Segoe UI covers Windows.
• Noto Sans provides excellent Unicode coverage on Linux and Android, supporting CJK characters and many scripts.
• Helvetica / Arial serve as widely available fallbacks.
• sans-serif is the generic keyword.
• Apple Color Emoji / Segoe UI Emoji ensure colour emoji render correctly alongside text.

Emoji Support

A notable feature of GitHub's stack is the explicit inclusion of emoji fonts. Without them, some platforms render emoji as monochrome outlines or substitute them with the Symbola font, which looks significantly different from what users expect.

Differences From the Generic system-ui Stack

GitHub omits the system-ui keyword itself because, at the time of adoption, certain Android browsers mapped system-ui to an unintended font (a known Chrome bug on Android <80). The stack also includes Noto Sans before Helvetica to prioritise better multi-language support on Linux.