Corredor

ウェブ、プログラミングの勉強メモ。

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

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

neos21.hatenablog.com

拙作の @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 Pゴシック", "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 Pゴシック", "MS PGothic",
  "Helvetica Neue", HelveticaNeue,
  Helvetica,
  Arial,
  "Segoe UI",
  sans-serif,
  "Apple Color Emoji",
  "Segoe UI Emoji",
  "Segoe UI Symbol",
  "Noto Color Emoji";

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

  • -apple-system, BlinkMacSystemFont
    • Apple 用の英字フォント。iOS や Mac Safari・Mac Firefox で「San Francisco」を指定させるためのもの。
    • BlinkMacSystemFont は Mac Chrome 用。
    • Windows では無視される。
  • "游ゴシック体", YuGothic
    • Mac 向けの游ゴシック指定。
  • "Yu Gothic M"
    • @font-face でカスタマイズした、Windows 向けの游ゴシック Medium フォント。
    • Windows IE11・Edge・Firefox はこの指定が効いてる。
    • font-weight100 から 900 まで9段階で定義した方が良いのかと思って調べてみたが、その必要はなかった。比較サンプルを CodePen に作ったので後述する。
  • "游ゴシック Medium", "Yu Gothic Medium"
    • Windows 向けの游ゴシック指定その2。Chrome 向け。
    • この前後に、ウェイトを指定しない "游ゴシック", "Yu Gothic" は記述しないこと。
  • "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro"
    • 游ゴシックがない Mac 向けのフォールバック、ヒラギノシリーズ。
  • "メイリオ", Meiryo
    • 游ゴシックがない Windows 向けのフォールバック、メイリオ。
  • Osaka
    • 游ゴシックもヒラギノもないレガシー Mac 向け。
  • "MS Pゴシック", "MS PGothic",
    • 游ゴシックもメイリオもないレガシー Windows 向け。
  • "Helvetica Neue", HelveticaNeue
    • ココからは英字フォント。
    • Helvetica の上位互換的な。Mac 向け。
    • Windows では HelveticaNeue と書かないと効かない。
  • Helvetica
    • Helvetica Neue の下位互換的な。主に Mac 向け。
    • Windows では Arial のエイリアスになっている。
  • Arial
    • Windows での Helvetica 代替要員。
    • Helvetica、Arial フォントが指定されていると、Android では Robot フォントになるっぽい。
  • "Segoe UI"
    • Windows 向けの Helvetica 代替要員。
    • このあたりの英字フォントはお好みで順番を変えていいと思う。後述する。
  • sans-serif
    • 総称ファミリ。
  • "Apple Color Emoji"
    • ココからが絵文字フォント。
    • まずは Mac・iOS 向け。
  • "Segoe UI Emoji", "Segoe UI Symbol"
    • Windows 向け。
  • "Noto Color Emoji"
    • Android・Linux 向け。

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

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

See the Pen Yu Gothic Medium @font-face Test by Neos21 (@Neos21) on CodePen.

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 P明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

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

  • "游明朝体", YuMincho, "游明朝", "Yu Mincho"
    • Mac 向け2つ、Windows 向け2つ。
  • "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro"
    • Mac 向けフォールバック。
  • "HGS明朝E", "MS P明朝", "MS PMincho"
    • Windows 向けフォールバック。
    • 「HGS明朝E」と「HG明朝E」、それから「HGP」という表記の違いは後述。
  • Georgia, Times, "Times New Roman"
    • 英字フォント。
    • Georgia は Windows・Mac ともに入っている。
    • Times は Mac 向け。
    • Times New Roman は Windows 向け。
  • serif
    • 総称ファミリ。
  • "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
    • 絵文字フォントはサンセリフで使ったモノと同じ。

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

  • HG:英文・和文ともに等幅フォント
  • HGP:英文・和文ともにプロポーショナルフォント
  • HGS:英文 (半角文字) はプロポーショナルフォント、和文 (全角文字) は等幅フォント

一番読みやすさが考慮されているのが「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 ゴシック", "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";

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

  • MeiryoKe_Gothic
    • 自分で生成する必要がある「メイリオ改」のフォントだが、僕は大のお気に入りで Mac にも使っている。完全に自分用。
  • "Ricty Diminished"
    • プログラマがよく入れてるフォントで、自分も好みなモノ。
  • "Osaka-等幅", "Osaka-等幅", Osaka-mono,
    • Mac のシステム標準で和文に対応した等幅フォントというと、コレしかない。
  • "MS ゴシック", "MS Gothic"
    • Windows のシステム標準で和文に対応した等幅フォントはコレしかない。
  • SFMono-Regular
    • 今回新たに追加した。主に iOS 向けの等幅フォント指定。多分英文のみ。
  • "Courier New", Courier
    • Windows・Mac ともに入っているシステム標準フォント。ココからは英文のみ。
  • Monaco, Menlo
    • Mac 向け。
  • Consolas, "Lucida Console"
    • Windows 向け。
  • 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 ゴシック", "MS Gothic", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

以上

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

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

MdN EXTRA Vol. 5 絶対フォント感を身につける。 (インプレスムック)

MdN EXTRA Vol. 5 絶対フォント感を身につける。 (インプレスムック)