Improve font stack on Windows

[simurai]

This is a follow up to #1529 and further improves the font stack on Windows:

• Segoe UI Variable -> Segoe UI Variable Text.
  • "Segoe UI Variable Text" seems to be the better option for a lot of text (markdown). In the future we might can consider having a UI and a "text" font stack.
• Add Meiryo before system-ui.
  • This should have the effect that the browser will use Meiryo instead of Yu Gothic UI and should improve font rendering, especially for Japanese.
  • Note: In an earlier version, Yu Gothic was used. But with great feedback from @448jp and @hiloki Improve font stack on Windows #1573 (comment) it seems Meiryo is the better default.

---

This came up in a private Slack convo

[changeset-bot]

🦋 Changeset detected

Latest commit: a412258

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/css	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[simurai]

Here the output for this PR with the updated font-family:

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","Meiryo",system-ui,ui-sans-serif,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";

It can be used to test in DevTools.

[hiloki]

Hi @simurai .

Yu Gothic is too skinny and low legibility.
Yu Gothic Medium is a little better.
[IMO] Meiryo is much better.

"Yu Gothic"	"Yu Gothic Medium”	"Meiryo"

[simurai]

Meiryo is much better.

@hiloki long time no talk. 😃 Yeah, Meiryo does indeed look more readable. Let's try that. 👍

[vdepizzol]

🙇 🙇

[simurai]

@448jp @hiloki Ok, Meiryo should now be used on github.com

Let me know if you see something weird. And thanks again for the feedback. 🙇

[hiloki]

@simurai

[NightFurySL2001]

Warning: This CSS change has affected non-Japanese repository.

[NightFurySL2001]

@simurai Please take a look on #1589.

[simurai]

Warning: This CSS change has affected non-Japanese repository.
Please take a look on #1589.

@NightFurySL2001 Thanks for reporting. Hmmm.. It seems pretty hard to find the right font stack that works great for everyone. We might need to test it in a more isolated way first. So #1592 reverts all the font changes.

@448jp @hiloki By also reverting #1529, the ui-system is gone too. So it will be back to

-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"

that was in use 3 weeks ago.