3 ms·

>The obvious way to use system fonts in CSS is to… just list all of the ones you can imagine by name: font-family: "San Francisco", "Roboto", "Segoe UI"; Why?

>The obvious way to use system fonts in CSS is to… just list all of the ones you can imagine by name: font-family: "San Francisco", "Roboto", "Segoe UI"; Why? Isn't the obvious way to just use "sans-serif" and let the system fallback to whatever the system font is? What if some Windows users install "Roboto" on their OS, in this case? (I have this question with any of these"system font stacks" for a long time.)

Kwpolska 6y ago
sans-serif stands for Arial or Helvetica by default. The system UI font is distinct from that. You can specify system-ui, but not all browsers support that on all platforms [0]. To solve the Roboto problem, most system font stacks put it after SF and Segoe UI, which are less likely (but still possible) to be installed on systems where they aren’t the default font. [0]: https://caniuse.com/font-family-system-ui https://caniuse.com/font-family-system-ui
- fireattack 6y ago
  > sans-serif stands for Arial or Helvetica by default Not really, I think it just means "sans serif". On iOS and Android, it will fallback to the default system font fine. On Windows (and maybe MacOS, but I never use it), it will likely fallback to Arial because that's most of browsers default to [1], which is one layer before the system one. [1]: https://i.imgur.com/bmVRwg0.png https://i.imgur.com/bmVRwg0.png However, users can always change this default font in browser setting [1] to whatever they want. And I think this is a superior approach (just use "sans serif") than typical "system font stack" because 1) Users not necessarily want the same font for system UI and web page. I knew I don't because Segoe UI is too bulky. Anyway, If they do, they can always just set so in their browsers. 2) it's not hard-coded. What if an Android user changed their system front from Roboto to something else? Now whole premise "consistent look and feel" breaks down by having the hard-coded "Roboto" in your website's CSS. 3) The users still get the consistent look across all the websites that use such rule. And even better, they can control what exactly (back to point 1).

Kwpolska 6y ago

sans-serif stands for Arial or Helvetica by default. The system UI font is distinct from that. You can specify system-ui, but not all browsers support that on all platforms [0]. To solve the Roboto problem, most system font stacks put it after SF and Segoe UI, which are less likely (but still possible) to be installed on systems where they aren’t the default font. [0]: https://caniuse.com/font-family-system-ui https://caniuse.com/font-family-system-ui

fireattack 6y ago
> sans-serif stands for Arial or Helvetica by default Not really, I think it just means "sans serif". On iOS and Android, it will fallback to the default system font fine. On Windows (and maybe MacOS, but I never use it), it will likely fallback to Arial because that's most of browsers default to [1], which is one layer before the system one. [1]: https://i.imgur.com/bmVRwg0.png https://i.imgur.com/bmVRwg0.png However, users can always change this default font in browser setting [1] to whatever they want. And I think this is a superior approach (just use "sans serif") than typical "system font stack" because 1) Users not necessarily want the same font for system UI and web page. I knew I don't because Segoe UI is too bulky. Anyway, If they do, they can always just set so in their browsers. 2) it's not hard-coded. What if an Android user changed their system front from Roboto to something else? Now whole premise "consistent look and feel" breaks down by having the hard-coded "Roboto" in your website's CSS. 3) The users still get the consistent look across all the websites that use such rule. And even better, they can control what exactly (back to point 1).