Neo's Normalize で指定するフォントを見直して v1.0.11 をリリースした

少し前に、Chrome ブラウザで @font-face による游ゴシック Medium 指定が効かなくなっていたことに気付き、色々調査した記事を書いた。

この調査を通じて、Neo's Normalize のフォント指定を見直したので、その内容を紹介する。

目次

コレまでのフォント指定

コレまでのフォント指定は、以下のようにしていた。

/* Windows 用 Medium 指定の游ゴシック */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Medium");
}

/* 太字の時は Bold 書体を使わせる */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

html {
  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";
}

特徴は以下のとおり。

しかし、Windows の Chrome ブラウザで "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium" の3つの指定のいずれもが効いていないことが分かり、色々と見直した。

英字はやはり英字のみのフォントが読みやすい

まず、英数字に関しては、やはり英字のみのフォントが読みやすいと判断し 「英字フォント」→「和英混在フォント」 の順に並べることにした。

具体的に使用した英字フォントは以下のとおり。

html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, /* 和英混在フォント… */, sans-serif;
}

Mac や iOS のバージョンごとのシェアを鑑みると、"Helvetica Neue" 指定は省いて、San Francisco フォント指定だけでも良いかもしれない。基本は Helvetica がどのプラットフォームでもサン・セリフ書体になる指定なので、コレが必須、という感じ。

Windows 向けには Segoe UI という選択肢もあるが、文字が細くて気に入らないので省いた。Arial (= Helvetica) で良いかな。

Windows の游ゴシック指定はウェイト指定を諦めることにした

Mac における游ゴシックは、Medium と Bold しかインストールされていないので、YuGothic とさえ指定すれば、Chrome・Firefox・Safari いずれのブラウザでも綺麗に表示される。

問題は Windows の Chrome における游ゴシックで、Regular フォントが指定されてしまう問題を避けきれなかった。厳密には、font-weight: 500 を指定すれば游ゴシック Medium が効くものの、游ゴシックが効かなかった場合にヒラギノが太字で表示されるなどの問題があるので、色々調査検討したが諦めることにした。

ということで、游ゴシック指定は以下のように、シンプルなモノに。@font-face 指定もナシ。

html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
               YuGothic, "Yu Gothic",  /* Mac 向け → Windows 向け 游ゴシック */
               /* 和英混在フォント… */, sans-serif;
}

ヒラギノはウェイト指定を止め、「ヒラギノ角ゴシック」を追加した

游ゴシックが効かなかった場合の、主に Mac 向けのフォールバックだが、"ヒラギノ角ゴ ProN W3" のようなウェイト込みの指定は省くことにした。font-weight: bold を指定した時に、「ヒラギノ角ゴ ProN W6」など太字専用のフォントが使われず、「ヒラギノ角ゴ ProN W3」を太字化して表示されてしまうためだ。

また、最近の Mac・iOS には「ヒラギノ角ゴ」とは別の、「ヒラギノ角ゴシック (= Hiragino Sans)」というフォントが用意されていて、コチラの方が少し読みやすいので、コレを追加することにした。

html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
               YuGothic, "Yu Gothic",
               "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",  /* ヒラギノ */
               /* 和英混在フォント… */, sans-serif;
}

コレも、日本語表記は省き、「ヒラギノ角ゴシック」→「ヒラギノ角ゴ ProN」→「ヒラギノ角ゴ Pro」の3つを英語表記で指定したのみ。ちなみに、ProN と Pro は一部の文字の書体が異なる。ProN の方が読みやすいので、コチラを優先的に指定しておく。

Windows 向けのフォールバックはメイリオまで、Osaka と MS P ゴシックは省いた

最近の OS のシェアを鑑みて、Windows 向けのフォールバックはメイリオまでにした。旧 Mac 向けの Osaka、旧 Windows 向けの MS P ゴシックは、もう書かないことにした。

というワケで、サン・セリフ系のフォント指定は以下で完成。

html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
               YuGothic, "Yu Gothic",
               "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
               Meiryo,
               sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

Windows の、特に Chrome での游ゴシックが細くかすれがちだが、それ以外のブラウザ (Firefo・Edge・IE) ではもう少し太めに見えているので、游ゴシック Regular でもギリギリか。

なお、クライアント側の指定で游ゴシック Regular・Light をなくしたり、ブラウザ拡張機能によって文字を濃くしたりする技は以下の記事で紹介している。

セリフ書体 (明朝体) も見直した

あまり使わないものの、明朝体のフォント指定も少し直した。

元は以下のようにしていた。和英混在フォント優先にしていた。

html {
  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";
}

游明朝も、Windows だと細めなので "Yu Mincho Medium" を指定したいところだが、ウェイト指定込みのフォント指定は font-weight: bold を指定した時に不都合があるので、思い切って諦めた。

英字用フォントを優先的にし、Times および "Times New Roman" は少々読みづらいので、Mac でも Windows でもプリインストールされている Georgia のみに絞った。

というワケで明朝体のフォント指定は以下で完成。

html {
  font-family: Georgia,
               YuMincho, "Yu Mincho",
               "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "HGS明朝E",
               serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

等幅フォント指定も少し変更

さらに、等幅フォント (モノスペース・フォント) の指定も若干見直した。

pre, code {
  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";
}

個人的な好みで「メイリオ改」「Ricty Diminished」を指定しているのはいつもどおり、Mac のシステムフォントで唯一和英混在の等幅フォントである「Osaka-mono」と、Windows で唯一和英混在の等幅フォントである「MS Gothic」を指定して、基本は和英混在で等幅表示したいのが狙い。

続いて iOS 向けに SFMono-Regular を指定し、あとは英字フォントでプリインストールされているものを指定していた。

コチラも、日本語表記のフォント指定は省き、iOS で効いていなかった SFMono-Regular 指定をなくし、"Courier New" 以外の英字用フォント指定をバッサリと削った。以下が等幅フォントの完成形。

pre, code {
  font-family: MeiryoKe_Gothic, "Ricty Diminished",
               Osaka-mono,
               "MS Gothic",
               "Courier New",
               monospace,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

「この font-family、あの OS ではどう表示されるの？」が分かるサービスがあった

ところで、自分は普段 Android 端末をほとんど使わないので、「このように font-family を指定したら、Android ではどう見えるのかなぁ」というのが分からないことが多かった。

そんな時に、「Font Family Reunion」という便利なウェブサービスを見つけた。

このサイトを使えば、Windows・Mac・Android・Linux などでどのようなフォントが利用されるのかが分かるのである。コレが大変便利であった。

Neo's Normalize v1.0.11 をご利用ください

そんなこんなで、Neo's Normalize はしばらく v1.0.7 が最新版だったが、試行錯誤を重ねて v1.0.11 をリリースした。

既にこのブログを始め、私が管理するサイト・ブログに適用してあるので、使用感の参考にしていただければと思う。