日本語のウェブサイト向けのフォントスタックの現状と無難な設定についてまとめた。sans-serif、serif、system-uiのそれぞれの総称フォントファミリーに基づいて、主要な端末（Windows、Mac、iOS、Android）のフォントの搭載状況を整理する。
sans-serif
まず、Windowsはメイリオ一択だと考えたほうが良い。游ゴシックはWindows 8.1ではかなり細く、Windows 10でも一般的なフォントと比べると少し細いのが問題だ。ハック的に回避する方法はあるものの、積極的に採用したくはない。メイリオはWindowsユーザーにとって馴染みがあり、最も問題になりにくいフォントだと考えられるため、あえて別の選択をする必要性は低いと思う。
Yu Gothic UIという選択肢もあるが、本文向きでは無さそうだ。
Macでは問題なく游ゴシックが利用できるので、ヒラギノ角ゴシックかいずれかを選択できる。
ヒラギノ角ゴシックを選択する場合、ファミリーの名称はこれまでのようにHiragino Kaku Gothic ProNとするか、新しいHiragino Sansとするかが悩みどころになる。前者はウェイトのバリエーションがW3とW6の2段階しかなく、後者はW1からW9までの9段階あるのが違いだ。ウェイトの多い別のフォントとの併用を考えると、Hiragino Sansを指定しておく方が見た目の印象を一貫させやすいだろう。
注意点は、Hiragino Kaku Gothic ProNをHiragino Sansにそのまま置き換えると違うウェイトになることがあること。CSSでfont-weight: normalが指定されていると、前者ではW3が適応され、後者ではW4になる。boldの場合、前者ではW6、後者ではW7だ。ウェイトのバリエーションが増えたことで、CSSの指定に対応するフォントが変わるということだ。あえてW3を利用したい場合、font-weight: 300と指定する必要がある。どのウェイトが最適かは場合によりけりだが、これまで慣れた見た目と違うものになり得ることは頭に入れておいたほうが良い。
これらを踏まえると次のような指定になる。
$font-stack-sans-serif: "Hiragino Sans", "Meiryo", sans-serif;
Windowsの主要なブラウザでは、sans-serifを指定するとメイリオが選択される。だが、Windows 7のIE11に限ってはＭＳ Ｐゴシックで表示されてしまうため、明示的に指定する必要がある。
また、古いバージョンのMS Office（Office for Mac 2011？）をインストールすると、Macでもメイリオが有効になってしまう。その影響を受けないようにするために、ヒラギノ角ゴシックを先に指定する。
Macで游ゴシックを利用したい場合は次のようになる。
$font-stack-sans-serif: "YuGothic", "Hiragino Sans", "Meiryo", sans-serif;
iOSには游ゴシックがインストールされていないため、ヒラギノ角ゴシックで表示されるように指定する。
Hiragino SansはOS X El Capitan及びiOS 9以降から搭載されたフォントなので、それ以前のバージョンもサポートするには、Hiragino Sansに続いてHiragino Kaku Gothic ProNも指定する必要がある。
serif
Windowsには游明朝を利用させる。游ゴシックと同様に細く見える問題はあるが、ＭＳ Ｐ明朝と比べるとかなりいい状態で読める。現在のChromeではserifの既定のフォントは游明朝になっており、Firefox 57以降でも同じように変更されることになっている。
Macではヒラギノ明朝か游明朝を選択できる。ヒラギノ明朝を利用する場合は次のようになる。
$font-stack-serif: "Yu Mincho", serif;
游明朝を利用する場合は次のようになる。
$font-stack-serif: "YuMincho", "Yu Mincho", serif;
遊書体はWindows 8.1以降から搭載されたフォントであるため、Windows 7ではＭＳ Ｐ明朝になる。
また、Android端末の場合、serifに対応するフォントは搭載されていない。ウェブフォントを利用するか、諦めてsans-serif等で代用するしかない。
system-ui
system-uiはsans-serifなどと同じ総称フォントファミリーであり、CSS Fonts Module Level 4で追加された。プラットフォームのUIと同じフォントを利用できる。現状ではChromeのみで実装されており、その他のブラウザのためにはフォールバックを書く必要がある。
フォールバックを含めた指定方法はいろいろ紹介されているが、英語圏のブログに書かれているような指定は日本語向きではなさそうだ。
Chromeでsystem-uiを指定した場合、MacとiOSではSan Franciscoになる（ヒラギノ角ゴシックは含まれていない）。Windows 10ではYu Gothic UIで、Windows 8.1以前ではSegoe UIとMeiryoの混植。AndroidではRobotoとNotoの混植。
ブラウザをまたいでもこれと同じ結果にするためには、次のように指定する。
$font-stack-system-ui: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
それぞれの値の意味は次のようになる。
$font-stack-system-ui: // 1. 欧文：Chrome（OS X、Windows、Android） system-ui, // 2. 欧文：Safari（OS X、iOS）、Firefox（OS X） -apple-system, // 3. 欧文：Chrome以外（Windows）（Windows 8.1以前用の指定） "Segoe UI", // 4. 和文：MacとiOS全て "Hiragino Sans", // 5. 和文：Chrome以外（Windows 10以降） "Yu Gothic UI", // 6. 和文：Chrome以外（Windows 8.1以前）（Windows 7のIE11用の指定） "Meiryo", // 7. 和文：その他 sans-serif;
Mac及びiOSの場合、1と2の指定でSan Franciscoを利用できる。それだけだと和文の指定が無いので4を指定する。
Windows 10の場合、Chromeは1の指定、その他のブラウザは3と5の指定でSegoe UIとYu Gothic UIの混植になる。Yu Gothic UIを指定した時点で、Segoe UIが指定されていなくても混植になる。
Windows 8.1以前の場合、Chromeは1の指定、その他のブラウザは3と6の指定でSegoe UIとMeiryoの混植になる。
Android Chromeは1の指定でRobotoとNotoの混植になる。
San FranciscoはOS X El Capitan及びiOS 9以降から搭載されたフォントなので、それ以前のOSもサポートすると、Hiragino Sansの前にHelvetica Neueの指定が必要。加えて、Hiragino Sansも同じタイミングで搭載されたフォントなので、その後ろにHiragino Kaku Gothic ProNの指定が必要になる。
参考
よくある「font-familyの最適な指定」系の記事を見ると、違う文脈のファミリーをひとつのフォントスタックに押し込んで、自分が好きなやつを順番に並べただけみたいなまとめ方が多いと思っていた。なのでこの記事では、総称フォントファミリーを基準にした一般的（汎用的）な分類でまとめた。自分の主観に依らない視点になっていると嬉しい。
