2019年以降はコレで決まり！Web サイトで指定するゴシック体・明朝体・等幅の font-family 設定 (2018年版から少しアップデートしたョ！)

去年書いた記事のアップデート版。

拙作の @neos21/neos-normalize はバージョン 1.0.7 になり、チマチマとオレオレパーフェクト設定に向けた調整をしてきた。

その調査結果をまとめ、2019年以降はこんな font-family 指定で決まりだな、と吹聴して回ろうと思う。

目次

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

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

@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }

font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", 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", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

各フォントが見やすいように整形するとこのとおり。

@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }

font-family:
  -apple-system, BlinkMacSystemFont,
  "游ゴシック体", 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",
  "Helvetica Neue", HelveticaNeue,
  Helvetica,
  Arial,
  "Segoe UI",
  sans-serif,
  "Apple Color Emoji",
  "Segoe UI Emoji",
  "Segoe UI Symbol",
  "Noto Color Emoji";

去年と違うのは、英字フォントの順番と、絵文字フォントを追加したところ。それ以外は同じ。一応、各フォントの詳細を再度説明していく。

総称ファミリの後ろに絵文字用フォントを指定するテクニックが主流になっているようだ。

游ゴシック Medium の @font-face 指定版は、font-weight を9段階で定義する必要はなかった。以下のデモページで確認してもらえるとおり、font-weight: bold のみ分けたモノと、9段階に分けて定義したモノとで見た目の差はなかった。

Android のフォント事情はかなり複雑みたいなのだが、とりあえず Helvetica や Arial が font-family 内に書いてあれば、Roboto フォントで表示されるようになるようだ。だから Roboto フォントはわざわざ書かなかったが、有名なサイトを見ると書いてある場合もあるので、入れても良いのかもしれない。Linux 用かしら？

去年との大きな違いは、「和英混在フォントを全面に打ち出した」ところ。iOS と Mac の「San Francisco」フォントのみ、キレイなので優先的に使わせるようにしているが、Helvetica Neue などはかなり後ろの方にフォールバックで書いている。というか MS P ゴシックまで手前にあったらもう書かなくても良いかもしれない。Windows における「Segoe UI」や「Arial」の見た目が、游ゴシックと混じった時に気に入らなかったので、後ろにズラしてしまった。この辺はお好みで入れ替えても良いだろう。

また、そろそろ游ゴシックがない環境へのフォールバックを無視しても良いかもしれない。Mac は OSX Marvericks から入っているし、Windows も 8.1 から入っているので、特に Mac 側はそんな古い OS のユーザもういないだろ、と切り捨てても平気かも。Windows はまだ 7 ユーザがしぶとく残っていそうなので、メイリオだけ残しておいても良いかもしれない。

英字フォントを優先的に設定し、フォールバックを削れるだけ削ったら、こんな風になるか。

@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }

font-family:
  /* 英字用フォントを優先的に使い、和文は游ゴシックにする */
  -apple-system, BlinkMacSystemFont,
  /* Windows 向けの HelveticaNeue は省き、Segoe UI を当てさせる */
  "Helvetica Neue", "Segoe UI",
  /* Windows・Android を考慮しても、Arial はわざわざ書かなくても大丈夫か */
  Helvetica,
  
  /* 游ゴシック系 */
  "游ゴシック体", YuGothic,
  "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium",
  
  /* Windows 7 以前へのフォールバック */
  "メイリオ", Meiryo,
  
  /* 総称ファミリと絵文字フォント */
  sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

…あれ、もしかしたらコッチの方が使いやすいかしら？

@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Helvetica, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

シンプルにしたければコチラでもドウゾ。

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

明朝体の使用頻度は少ないが、以下で決まり。

font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

コチラも、考え方は和英混在フォントを優先させたところが大きい。あと「Times」と「Times New Roman」を追加し、絵文字フォントも入れておいた。

「HGS明朝E」フォントを選んだ時に、「HG明朝E」というよく似たフォントがあるなぁ、でも違いがよく分からんなぁ、と思っていたのだが、以下のような違いがあるようだ。

一番読みやすさが考慮されているのが「HGS」ぽかったのっでコレを採用。

Times と Times New Roman は互換性があるよく似たフォントなので、お好みで。

コレも、フォールバックをそろそろなくして、英字フォントを優先的に並べたら、以下のようになるだろう。

font-family:
  Georgia, Times, "Times New Roman",
  "游明朝体", YuMincho, "游明朝", "Yu Mincho",
  serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

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

等幅フォントは以下で決まり。

font-family: MeiryoKe_Gothic, "Ricty Diminished", "Osaka－等幅", "Osaka-等幅", Osaka-mono, "ＭＳ ゴシック", "MS Gothic", SFMono-Regular, "Courier New", Courier, Monaco, Menlo, Consolas, "Lucida Console", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

コレも和英混在の時に同一フォントを利用できるような順序にした。

コレも、システム標準フォントに絞って設定し、かつ、英字用フォントを優先的に使いたい場合は並び順が変わるだろう。

font-family: SFMono-Regular, "Courier New", Courier, Monaco, Menlo, Consolas, "Lucida Console", "Osaka－等幅", "Osaka-等幅", Osaka-mono, "ＭＳ ゴシック", "MS Gothic", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

以上

…書いておいてアレだけど、ホントに「決まり」なのかしら…。またゆらいできた…。

でもとりあえず僕自身の Windows マシン、MacBook、iPhone ではコレで綺麗に見えているからいいかな…。