2018年以降はコレで決まり！Web サイトで指定するゴシック体・明朝体・等幅の font-family 設定

時折話題にしてきた、CSS での font-family 指定のベスト・プラクティスだが、様々な検証を経てようやく設定が落ち着いてきたので、オレオレパーフェクト設定を共有しておく。

目次

ゴシック体 (サンセリフ) のフォント指定

2017年時点で、Mac でも Windows でも、システム標準のフォントを使ってイイカンジに Web ページを表示する font-family 指定は以下で決まり。

/* Windows 用 Medium 指定の游ゴシック */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Medium");
}
/* font-weight: bold の時は通常どおり Bold 書体を使わせる */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

/* ゴシック体指定 */
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

それぞれのフォントを指定した理由は以下のとおり。

コレで以上。

Windows・Mac・iPhone の各種ブラウザで検証した結果、以上の記載順が最適と判断した。英語表記や日本語表記は、片方しか認識しないブラウザもあったりしてなかなか大変だった。以下に検証結果の Excel 画像を置いておく。

検証結果表

大方針は「英字フォント → 和文混在フォント」の順かつ、「Mac 向け指定 → Windows 向け指定」の順で指定し、その中でも「日本語表記 → 英語表記」で指定することで良い感じになった。

明朝体 (セリフ) のフォント指定

あまり明朝体は使わないのだが、せっかくなので最適であろう設定を考えてみた。明朝体は以下で決まり。

font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;

設定理由は以下のとおり。

以上である。

ゴシック体よりはスッキリしている。大方針もほとんど同じ。

等幅 (モノスペース) のフォント指定

等幅フォントの場合の設定は以下で決まり。

/* 和文英文混在で表示する機会が少ない場合 … 英字フォントを優先する */
font-family: MeiryoKe_Gothic, "Ricty Diminished", "Courier New", Courier, Monaco, Menlo, Consolas, "Lucida Console", "Osaka－等幅", "Osaka-等幅", Osaka-mono, "ＭＳ ゴシック", "MS Gothic", monospace;

/* 和文英文混在で表示する機会が多い場合 … 混在フォントを優先して等幅表示を優先させる */
font-family: MeiryoKe_Gothic, "Ricty Diminished", "Osaka－等幅", "Osaka-等幅", Osaka-mono, "ＭＳ ゴシック", "MS Gothic", "Courier New", Courier, Monaco, Menlo, Consolas, "Lucida Console", monospace;

等幅フォントの場合は、用途に応じて2パターンを用意した。

設定意図は以下のとおり。

コレ以外のサードパーティのフォント指定は各自のお好みで。今回は OS 標準もしくはそれに近いところで揃えてみた。

フォントを動的に試せる Web アプリを作りました

こうしたフォントを動的に適用して試せる Web アプリを2種類作った。

一つは以下で公開している「Sans-Serif Fonts Test」である。用意したサンセリフ (ゴシック体) フォントを自由に適用し、ドラッグ & ドロップで入れ替えて適用順を変更できる。jQuery UI Touch Punch を導入しているので、スマホでも動かせるのが特徴。

二つ目は、Angular4 製の Web アプリサイト「Angular Utilities」内に作った「Font Family Tester」というアプリである。コチラはサンセリフ以外にもセリフ (明朝体)、Monospace (等幅) フォントのプリセットを用意している他、自分で好きなフォント名を追加できる、「Sans-Serif Fonts Test」の上位バージョン。今のところ Angular4 系で jQuery UI Touch Punch 並に手軽な「ドラッグ & ドロップのスマホ対応ライブラリ」がなかったので、クリック (タップ) 操作でフォントを適用できるようにした。ぜひ試してみてほしい。

こんな font-family 指定なら、2018年以降も乗り切れそう。ｗ