日本語向けフォントスタックの現状

日本語のウェブサイト向けのフォントスタックの現状と無難な設定についてまとめた。sans-serifserifsystem-uiのそれぞれの総称フォントファミリーに基づいて、主要な端末(WindowsMaciOSAndroid)のフォントの搭載状況を整理する。

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 ProNHiragino Sansにそのまま置き換えると違うウェイトになることがあるということ。CSSfont-weight: normalが指定されていると、前者ではW3が適応され、後者ではW4になる。boldの場合、前者ではW6、後者ではW7だ。ウェイトのバリエーションが増えたことにより、CSSの指定に対応するフォントが変わるということだ。あえてW3を利用したい場合、font-weight: 300と指定する必要がある。どのウェイトが最適かは場合によりけりだが、これまで慣れた見た目と違うものになり得ることは頭に入れておいたほうが良い。
ただし、ウェイトのバリエーションが増えるのはMacのみで、iOSはこれまでと同じくW3とW6だ。

これらを踏まえると次のような指定になる。

$font-stack-sans-serif: "Hiragino Sans", "Meiryo", sans-serif;

Windowsの主要なブラウザでは、sans-serifを指定するとメイリオが選択される。だが、Windows 7のIE11に限ってはMS Pゴシックで表示される。それを上書きするために指定する必要がある。
また、古いバージョンのMS Office(Office for Mac 2011?)をインストールすると、Macでもメイリオが有効になってしまう。Macではメイリオが選択されてしまわないようにするため、ヒラギノ角ゴシックを先に指定する。

Macで游ゴシックを利用したい場合は次のようになる。

$font-stack-sans-serif: "YuGothic", "Hiragino Sans", "Meiryo", sans-serif;

iOSには游ゴシックがインストールされていないため、ヒラギノ角ゴシックで表示されるように指定する。

Hiragino SansOS X El Capitan及びiOS 9以降から搭載されたフォントなので、それ以前のバージョンもサポートするには、Hiragino Sansに続いてHiragino Kaku Gothic ProNも指定する必要がある。

serif

Windowsには游明朝を利用させる。游ゴシックと同様に細く見える問題はあるが、MS P明朝と比べるとかなりいい状態で読める。現在のChromeではserifの既定のフォントは游明朝になっており、Firefox 57以降でも同じように変更されることになっている。

Macではヒラギノ明朝か游明朝を選択できる。ヒラギノ明朝を利用する場合は次のようになる。

$font-stack-serif: "Yu Mincho", serif;

游明朝を利用する場合は次のようになる。

$font-stack-serif: "YuMincho", "Yu Mincho", serif;

遊書体はWindows 8.1以降から搭載されたフォントであるため、Windows 7ではMS P明朝になる。
また、Android端末の場合、serifに対応するフォントは搭載されていない。ウェブフォントを利用するか、諦めてsans-serif等で代用するしかない。

system-ui

system-uisans-serifなどと同じ総称フォントファミリーだ。CSS Fonts Module Level 4で追加された。プラットフォームのUIと同じフォントを利用できる。現状ではChromeのみで実装されており、その他のブラウザのためにはフォールバックを書く必要がある。
フォールバックを含めた指定方法はいろいろ紹介されているが、英語圏のブログに書かれているような指定は日本語向きではなさそうだ。

Chromesystem-uiを指定した場合、MaciOSではSan Franciscoになる(ヒラギノ角ゴシックは含まれていない)。Windows 10ではYu Gothic UIで、Windows 8.1以前ではSegoe UIMeiryoの混植。AndroidではRobotoNotoの混植。
ブラウザをまたいでもこれと同じ結果にするためには、次のように指定する。

$font-stack-system-ui: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Segoe UI", "Meiryo", sans-serif;

それぞれの値の意味は次のようになる。

$font-stack-system-ui:
  // 1. OS X Chrome(欧文)、Windows Chrome(和文・欧文)、Android Chrome(和文・欧文)
  system-ui,

  // 2. OS X Safari(欧文)、iOS Safari(欧文)、OS X Firefox(欧文)
  -apple-system,

  // 3. OS XとiOS全て(和文)
  "Hiragino Sans",

  // 4. Windows 10 Chrome以外(和文・欧文)
  "Yu Gothic UI",

  // 5. Windows 8.1以前 Chrome以外(欧文)
  "Segoe UI",

  // 6. Windows 8.1以前 Chrome以外(和文)(Windows 7のIE11用の指定)
  "Meiryo",

  // 7. その他
  sans-serif;

Mac及びiOSの場合、1か2の指定でSan Franciscoを利用できる。それだけだと和文の指定が無いので3を指定する。
Windows 10の場合、Chromeは1の指定、その他のブラウザは4の指定でYu Gothic UIになる。Yu Gothic UI自体にSegoe UIが含まれているため、あえてSegoe UIを指定する必要はない。
Windows 8.1以前の場合、Chromeは1の指定、その他のブラウザは5と6の指定でSegoe UIMeiryoの混植になる。
Android Chromeは1の指定でRobotoNotoの混植になる。

San FranciscoはOS X El Capitan及びiOS 9以降から搭載されたフォントなので、それ以前のOSもサポートすると、Hiragino Sansの前にHelvetica Neueの指定が必要。加えて、Hiragino Sansも同じタイミングで搭載されたフォントなので、その後ろにHiragino Kaku Gothic ProNの指定が必要になる。

参考


よくある「font-familyの最適な指定」系の記事を見ると、違う文脈のファミリーをひとつのフォントスタックに押し込んで、自分の好きな順番に並べただけのようなまとめ方が多いと思っていた。なのでこの記事では、総称フォントファミリーを基準にした一般的(汎用的)な分類でまとめた。自分の主観に依らない視点になっていると嬉しい。