5 ms·

I'm not an expert on web fonts etc, but if they want the site to look "native" on each platform and to use whatever the computer works best with, why can't they

I'm not an expert on web fonts etc, but if they want the site to look "native" on each platform and to use whatever the computer works best with, why can't they just use `sans-serif` and `monospace`? It's my (limited) understanding that that allows it to use the browser default.

amarshall 5y ago
Browser default is not necessarily the same as the OS default. Even Safari on macOS (which one might expect to be well-integrated) sans-serif resolves to Helvetica, not San Francisco. It would be great if they were equivalent, but alas, they are not.
- Wowfunhappy 5y ago
  Safari represents how Apple would ideally like the world to work, and I don't think Apple wants San Francisco to be used for anything other than UI elements. In addition to not being Safari's system font, it also doesn't appear in Font Book or other system font selection menus.
leodriesch 5y ago
Good question though, there are other standard values for OS fonts, such as `system-ui`(0) or `ui-sans-serif`(1). [0]: https://caniuse.com/font-family-system-ui https://caniuse.com/font-family-system-ui [1]: https://caniuse.com/extended-system-fonts https://caniuse.com/extended-system-fonts
ihuman 5y ago
The browser chooses the default sans-serif. If you want the system font, you need to use "system-ui" for Safari/Chrome and "-apple-system" for Firefox (Chrome also has BlinkMacSystemFont). "system-ui" is becoming an official standard, so its only a matter of time until Firefox supports it. https://drafts.csswg.org/css-fonts-4/#system-ui-def https://drafts.csswg.org/css-fonts-4/#system-ui-def
- dbbk 5y ago
  I do find it a bit odd though that the browsers don't just default to this at this point. Like, why is the default webpage font still Times New Roman?
  - tshaddox 5y ago
    Presumably because it is or was considered a web standard (either de facto or explicit, I assume the former but I’m not sure) that browsers decided to respect.
  - deleted 5y ago
    [deleted]
  - afavour 5y ago
    There are two defaults: web default and OS default. I can understand the default default(!) being the web, at least then it looks consistent across platforms.
- jfk13 5y ago
  But 'system-ui' is... well... intended for UI usage. It may not be so well suited for page content. If you're creating UI elements on your web page (though why aren't you using the browser's built-in form control elements?), then 'system-ui' is probably appropriate. But if you're publishing textual content (rather than UI), 'sans-serif' or 'serif' may be a better choice. Most browsers even let users configure their preferred fonts for these generic names, if they don't like the defaults.
tyingq 5y ago
I went down this rabbit hole, and it's very confusing. If I recall correctly, Chrome doesn't actually pick the font when you say "sans-serif". It asks the OS for a list of fonts and picks the first one that matches some set of size criteria for a rendered string. That's why "font-family: cursive" ends up being some crazy font on different operating systems, often, not what I would call a cursive font. I get Comic Sans on Chrome/Windows10. I'm told you also get something ugly on MacOS, but it's at least something "cursive": https://jsfiddle.net/cfva2ehw/ https://jsfiddle.net/cfva2ehw/
- patrakov 5y ago
  I get Z003, Z003-MediumItalic, in Firefox on Arch Linux. It comes from URW fonts.

amarshall 5y ago

Browser default is not necessarily the same as the OS default. Even Safari on macOS (which one might expect to be well-integrated) sans-serif resolves to Helvetica, not San Francisco. It would be great if they were equivalent, but alas, they are not.

Wowfunhappy 5y ago
Safari represents how Apple would ideally like the world to work, and I don't think Apple wants San Francisco to be used for anything other than UI elements. In addition to not being Safari's system font, it also doesn't appear in Font Book or other system font selection menus.

leodriesch 5y ago

Good question though, there are other standard values for OS fonts, such as `system-ui`(0) or `ui-sans-serif`(1). [0]: https://caniuse.com/font-family-system-ui https://caniuse.com/font-family-system-ui [1]: https://caniuse.com/extended-system-fonts https://caniuse.com/extended-system-fonts

ihuman 5y ago

The browser chooses the default sans-serif. If you want the system font, you need to use "system-ui" for Safari/Chrome and "-apple-system" for Firefox (Chrome also has BlinkMacSystemFont). "system-ui" is becoming an official standard, so its only a matter of time until Firefox supports it. https://drafts.csswg.org/css-fonts-4/#system-ui-def https://drafts.csswg.org/css-fonts-4/#system-ui-def

dbbk 5y ago
I do find it a bit odd though that the browsers don't just default to this at this point. Like, why is the default webpage font still Times New Roman?
- tshaddox 5y ago
  Presumably because it is or was considered a web standard (either de facto or explicit, I assume the former but I’m not sure) that browsers decided to respect.
- deleted 5y ago
  [deleted]
- afavour 5y ago
  There are two defaults: web default and OS default. I can understand the default default(!) being the web, at least then it looks consistent across platforms.
jfk13 5y ago
But 'system-ui' is... well... intended for UI usage. It may not be so well suited for page content. If you're creating UI elements on your web page (though why aren't you using the browser's built-in form control elements?), then 'system-ui' is probably appropriate. But if you're publishing textual content (rather than UI), 'sans-serif' or 'serif' may be a better choice. Most browsers even let users configure their preferred fonts for these generic names, if they don't like the defaults.

tyingq 5y ago

I went down this rabbit hole, and it's very confusing. If I recall correctly, Chrome doesn't actually pick the font when you say "sans-serif". It asks the OS for a list of fonts and picks the first one that matches some set of size criteria for a rendered string. That's why "font-family: cursive" ends up being some crazy font on different operating systems, often, not what I would call a cursive font. I get Comic Sans on Chrome/Windows10. I'm told you also get something ugly on MacOS, but it's at least something "cursive": https://jsfiddle.net/cfva2ehw/ https://jsfiddle.net/cfva2ehw/

patrakov 5y ago
I get Z003, Z003-MediumItalic, in Firefox on Arch Linux. It comes from URW fonts.