sans-serif on windows displays Arial instead of Segoe UI

[koriolis]

Due to a less known Windows ~~bug~~ feature, Arial is always matched for Helvetica when Helvetica is not installed on the system.

The current sans-serif class on _font-family.scss

.sans-serif {
  font-family: -apple-system, BlinkMacSystemFont,
               'avenir next', avenir,
               'helvetica neue', helvetica,
               ubuntu,
               roboto, noto,
               'segoe ui', arial,
               sans-serif;
}

will display arial and not segoe ui on Windows.

Solution is to move segoe ui above helvetica, but because I'm not sure of the font stack strategy it might not be as simple as that :-). If we move segoe between helvetica neue and helvetica it will never load Ubuntu, Roboto and Noto even if the user has those fonts installed.

Codepen demo: http://codepen.io/koriolis/pen/BWNwMV/

Screenshot (for those not on Windows):

[mrmrs]

@koriolis Thanks so much for the detailed description of what is going on. I'll take a stab at a fix.

[luizbills]

for some reference:

• github uses the following stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
• and System Font Stack https://css-tricks.com/snippets/css/system-font-stack/

[koriolis]

@mrmrs Any progress on this? I'm a noob at OSS collaboration, but I'll be happy to open a PR with this change.

[AeonFr]

This will definitely be an improvement. Arial does not deserve to make it to any other website and we can prevent it. Is Butterick words:

As I men­tioned in sys­tem fonts, Ar­ial was de­signed as a clone of Hel­vetica. Hel­vetica has earned its place in ty­po­graphic his­tory hon­estly. But Ar­ial, only by Mi­crosoft im­pos­ing it upon us for 20+ years as the main user-in­ter­face font in Win­dows. That’s the only rea­son you’ve heard of it. That’s the only rea­son you might con­sider us­ing it. That’s a ter­ri­ble rea­son. I try to keep the lit­mus tests to a min­i­mum, but this must be one: you can­not cre­ate good ty­pog­ra­phy with Arial.

Practical Typography by Matthew But­t­er­ick - Helvetica and Arial alternatives