font-familyに指定するフォントスタックの一般的なパターン

font-familyのベストな書き方20XX年みたいな記事が毎年出るけど、実際のところケースバイケースで、唯一のベストな解があるというわけでない。なので個人的な理解に基づいたパターンの分類をメモとして書いておく。特に目新しいことはない。

日本語環境で、ウェブフォントは考慮しないという前提。

和文フォントのみ

html {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

たぶん最も無難。

游ゴシックはいろいろあって不安なので、特に寿命が長いウェブサイトでは採用したくない。次のバージョンのOSでは状況が変わったりしそうだから。

メイリオWindows環境で利用するため。MS Pゴシックは基本的には絶対悪で、アンチエイリアスがかからず可読性が悪いので避けたい。すると和文フォントはメイリオ択一になる。Windows環境のブラウザでは、sans-serifのデフォルトがメイリオになりつつあるんだけど、まだまちまちなので明示的に指定してあげないといけない。

ヒラギノMaciOSのデフォルトだけど、メイリオより高い優先順位にするために指定する。

メイリオWindowsのデフォルトになってくれれば、これはsans-serifと指定するだけで事足りるようになる。

和欧混植

html {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

上記のスタックに欧文フォントを加えただけ。

従属欧文はあまりよく思われないことが多いので、欧文フォントを和文フォントより優先して指定する。選択肢はいろいろあるけど、この辺がよく使われる。

システムフォント

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

デバイスのシステムフォントとして採用されているフォントをウェブサイトにも利用する例。

近年のCSSフレームワークなどではよく採用されていて、上記の記事にあるMediumの他に、GitHubとかQiitaとかでもこれ。

結果的にこれも和欧混植になることが多いけど、分類のために便宜上区別してる。


フォントスタックを選択するときの考え方は、たぶんこういう分類にするのが適切だと思う。