Many popular websites (including Stack Overflow, GitHub, Medium and Wordpress) have adopted the usage of the system font stack.
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:
Related questions:
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:
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.
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.
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.
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 except Firefox. For Firefox, you can still use -apple-system for macOS and iOS with something like font-family: system-ui -apply-system;.
