5 ms·

So they will serve a different stylesheet depending on the useragent the browser sends? As a reason they cite that that Arial looks dated. I wonder why they do

by mg 5y ago

So they will serve a different stylesheet depending on the useragent the browser sends? As a reason they cite that that Arial looks dated. I wonder why they don't simply use a web font of their choice.

jws 5y ago
They will probably define a list of acceptable fonts and let the browser choose. See this article… https://www.digitalocean.com/community/tutorials/css-system-font-stack https://www.digitalocean.com/community/tutorials/css-system-... body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } Hopefully moving forward the browser writers will settle on a name for the system fonts, sort of like the "system" is implied with the "-apple-system" vendor specific tag in the article. It looks like the browser vendors tried with "system-ui", but screwed it up badly with Windows and designers are afraid to use it now.
- ihuman 5y ago
  > It looks like the browser vendors tried with "system-ui", but screwed it up badly with Windows and designers are afraid to use it now. Is that still the case? I see that it was an issue a few years ago, I can't find any recent info that still says to avoid system-ui. Safari and Chrome still support system-ui. The working draft for the next version of CSS has system-ui, ui-serif, ui-sans-serif, and more. https://drafts.csswg.org/css-fonts-4/#system-ui-def https://drafts.csswg.org/css-fonts-4/#system-ui-def
  - jws 5y ago
    GitHub and Wordpress are both using a list like shown above, neither includes "system-ui". It seems to still be shunned. I'm looking forward to CSS defined names that just say "make me look like the system".
city41 5y ago
You don't need custom style sheets. One font-family declaration can hit them all: https://markdotto.com/2018/02/07/github-system-fonts/#the-stack https://markdotto.com/2018/02/07/github-system-fonts/#the-st...

by mg 5y ago

jws 5y ago

They will probably define a list of acceptable fonts and let the browser choose. See this article… https://www.digitalocean.com/community/tutorials/css-system-font-stack https://www.digitalocean.com/community/tutorials/css-system-... body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } Hopefully moving forward the browser writers will settle on a name for the system fonts, sort of like the "system" is implied with the "-apple-system" vendor specific tag in the article. It looks like the browser vendors tried with "system-ui", but screwed it up badly with Windows and designers are afraid to use it now.

ihuman 5y ago
> It looks like the browser vendors tried with "system-ui", but screwed it up badly with Windows and designers are afraid to use it now. Is that still the case? I see that it was an issue a few years ago, I can't find any recent info that still says to avoid system-ui. Safari and Chrome still support system-ui. The working draft for the next version of CSS has system-ui, ui-serif, ui-sans-serif, and more. https://drafts.csswg.org/css-fonts-4/#system-ui-def https://drafts.csswg.org/css-fonts-4/#system-ui-def
- jws 5y ago
  GitHub and Wordpress are both using a list like shown above, neither includes "system-ui". It seems to still be shunned. I'm looking forward to CSS defined names that just say "make me look like the system".

city41 5y ago

You don't need custom style sheets. One font-family declaration can hit them all: https://markdotto.com/2018/02/07/github-system-fonts/#the-stack https://markdotto.com/2018/02/07/github-system-fonts/#the-st...