What is the system font stack?

Question

Many popular websites (including Stack Overflow, GitHub, Medium and Wordpress) have adopted the usage of the system font stack.

1. What is the system font stack?
2. Why should I use the system font stack?
3. What should the system font stack look like?
   

There are many different sites with different versions of the system font stack, but it is not obvious which one is most up-to-date and has the most compatibility with modern devices:

• systemfontstack.com
• CSS Tricks: System Font Stack

Related questions:

• Does specifying “Roboto” in a “system font stack” actually do anything?
• How to specify the system’s default serif and sans-serif font-family?

Answer 1

What is the system font stack?

The CSS font-family property takes a list of fonts and uses the first one which is available to the browser.

A (not the) system font stack is a list of fonts which are:

• likely to be installed on lots of computers (with the goal being to have at least one font in the stack available on every computer that might view the website)
• similar in appearance so the design is consistent (e.g. similar letter widths, etc)

As I said, this is a "a" not "the" matter. A list of system fonts similar to Ariel is going to be different to one similar to Times New Roman.

Why should I use the system font stack?

To get a consistent appearance across different devices without the bandwidth or time implications of loading a font file from the Internet.

What should the system font stack look like?

That's a matter of opinion.

While it is backed up by science (people do research on the availability of fonts across devices), which fonts you want to use and decide are similar enough for your purposes isn't cut and dry.

Answer 2

1. What is the system font stack?

This generic font family lets text render with the default user interface font on the platform on which the UA is running. A cross-platform UA should use different fonts on its different supported platforms.

W3C CSS Fonts Module 4: system-ui

2. Why should I use the system font stack?

The purpose of system-ui is to allow web content to integrate with the look and feel of the native OS.

W3C CSS Fonts Module 4: system-ui

3. What should the system font stack look like?

If you don't need legacy browser support (mainly IE), system-ui covers all modern browsers.