新しい記事書きました。【font-familyについて本気で考えてみた】

「Chromeでも読みやすい游ゴシックを指定する方法」の記事で游ゴシックが一部ブラウザで掠れる問題を解決出来たので、font-familyのベストプラクティスを考えてみたいと思います。
本当は「2016年font-familyの決定版」みたいなタイトルにしたかったのですが、執筆時は8月ですしね。2017年も名乗れません。
2020年と書いたのはWindows7のサポートが切れるのがこの年だからです。

目的はどの環境でも出来る限り近い見た目を目指すものではなく、実行環境で最も読みやすいものを目指すものです。MacよりもWindowsに比重をおいています。

-- 追記 --
Chrome58から一時対応しなくなってしまいましたが、游ゴシックをWindows版Chromeでキレイに表示する@font-faceの設定にヒントを頂き現在は対応済みのコードになります。
合わせてWindowsのみRegularサイズ（100〜300）に対応しました。

Chrome62より仕様が戻った？ようなのでコードも以前のものに戻しました。
なので、58〜61のバージョンについては未対応になります。

Chrome65にて動作していないことを確認しました。
「まず最初に完成したコード」のコードは現在使用しても普通のYu Gothicになります。65現在の挙動は過去にはない、明らかに不具合と思われる挙動だったのでまたバージョンアップで変わるでしょう。
頻繁にあるバージョンアップで都度挙動が変わる分、昔のIEより厄介です。しばらくこの記事は放置します。数ヶ月に変化があるようなら更新します。 -2018.04.12-

Chrome79で動作を確認しました
やっぱりバグだったようです。
最近この記事が「いいね」されると思ったら、Yu Gothicが期待通り動いているのを確認できました。

まず最初に完成したコード

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}


html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}
@media all and (-ms-high-contrast: none)  {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}
@media all and (-ms-high-contrast: active) {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

長い！長いですねー。一般的な記述と比べると段違いです。
なぜこのような形になるかは以下でご説明します。

対象環境

基本的にはサポートされているもの、一般的なもの。
IE8以上を対象としています。

IE11より前の対応は一般サイトではあまり必要が無いかもしれませんが、このfont-familyなら特に意識する必要はありません。それよりもfont-familyで問題なのはOSですので、そうそうシェアは変わりません。

`font-family`の解説

あまり聞きたい人はいないと思いますが、カスタマイズしたい方へ向けて書き綴ります。
考えぬ抜いたので、あまりカスタマイズ性はないと思います。

-apple-system

まず英字書体から指定していきます。
最初に指定するのは、他に影響を及ぼさないApple用の英字フォントです。
変なフォント名ですが、コレを指定すると「San Francisco」という書体が適用されます。

-apple-systemについて詳しく解説されている方がいらっしゃいます。
iOS9からのシステムフォント San Francisco を理解する

BlinkMacSystemFont

また見慣れないフォント名ですが、-apple-systemと同じSan Franciscoが適用されます。
-apple-systemと何が違うかというと、こちらはBlink（フォント名がそのままです）、WebKitから派生したレンダリングエンジン用フォントです。
このレンダリングエンジンを使用しているのはChromeとOpera。この両ブラウザは、先に記述した-apple-systemではなく、こちらが適用されることになります。
純粋なWebKitであるSafariは-apple-systemが適用されます。

Helvetica Neue

-apple-system、BlinkMacSystemFontが適用されないApple用の英字フォントです。
おなじみHelveticaの上位バージョンみたいなやつ。
太さの種類があるため日本語フォントとのバランス調整が必要です。一番細いのはものすごく細いです。
そのためweight100〜200をRegularで上書きしました。

ちなみに、「ヘルベチカノイエ」と読みます。

Original Yu Gothic

Windows用の日本語フォント「游ゴシック」です。
@font-faceでごにょごにょしてChromeでも読みやすくしています。
詳しくはChromeでも読みやすい游ゴシックを指定するCSS と游ゴシックをWindows版Chromeでキレイに表示する@font-faceの設定を御覧ください。

Yu Gothic

上記では対応できないブラウザMicrosoft Edge用日本語フォント「游ゴシック」です。

YuGothic

Mac用の日本語フォント「游ゴシック体」です。
このfont-familyの基準点になっているのがこの記述です。

Verdana

Windows vista、Windows7、Windows8用の游ゴシックが適用されない環境用の英字フォントです。
好みで修正できる箇所はココぐらいかなと思います。
Verdanaの代わりにArialなどでもいいでしょう。

Meiryo

定番のWindows用日本語フォント。
Windows vista、Windows7、Windows8用の日本語フォントです。
Windows8.1以降は先に記述したYu Gothicが適用されます。

M+ 1p

対象環境には入れいていないものの、簡単に対応出来るなら対応しておきたいので一部Linux系のために記述してみました。
本当は英字フォントとの組み合わせが怖いのでもっと前方に記述したいのですが、"M+ 1p"はフリーフォントのため一般の環境でも入っている可能性が高いため、最後部に記述しました。

私はLinuxを触ったことがありません。このfont-familyについても確認をしていません。
標準環境でのデフォルトフォントであるのならば、記述は必要ないです。
もし、確認してくださる方がいましたらコメント頂けると私が安心します。

sans-serif

ただの保険です。
もしもの時、デフォルトの明朝体が適用されるよりは、ゴシック体のほうがマシと言う程度の記述です。

IE向け

コメント欄でご指摘にあるように、IEは游ゴシックの下の余白が他のフォントより大きいというバグを抱えています。メイリオも若干ながら下のほうが余白が大きいですが、比べ物になりません。
そのためIE向けのハックを最後に記述しています。
つまりIEはメイリオが適用される事になります。

シェアの大きいIEが游ゴシックを使えないとなると魅力半減どころでは無いですね。

よく使われている「ヒラギノ」

一般的に使用されているMacは游ゴシックが搭載されています。
そのため游ゴシックを指定するならヒラギノは要らなくなる訳です。
今回記述しなかったもうひとつの理由として、ヒラギノを考慮すると以下の様な組み合わせのコードが考えられるからです。

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

この書き方はデフォルトのことしか考えられていない書き方です。
当然Windowsにヒラギノが入っている場合ヒラギノが表示されます。これが問題！
この環境を使用したことがある人には分かると思いますが、~~とても読めたものではありません。MSゴシックのほうがマシです。~~
昔読みにくいと思ったので、先入観で書きましたが、感覚が変わったのか、何の違和感もありませんでした。（昔から現在の間にApple教に入信しています）

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

そこで今回ヒラギノを排除したコードを見ると、1番読みにくい環境（個人的には読みやすいですが）でも「Verdana, Meiryo」の組み合わせが適用され、ヒラギノを使用した場合よりもかなり読みやすくなります。

どうしてもヒラギノを使いたい方はQiitaのCSSのヒラギノの記述が参考になるでしょう。

qiita

font-family: Helvetica Neue, Helvetica, Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;

日本語表記の書体名とアルファベット表記のfont-family

body {
  font-family: "メイリオ", Meiryo;
}

上記のように日本語表記とアルファベット表記を両方記述するのを見かけますが、この記述方法でないと適用されないブラウザは、今回対象外です。

よっぽど古いブラウザが対象に入っていなければ日本語表記は必要ありません。
そんなブラウザが対象に入っていたら、この記事のfont-familyは使いたくないですね。

この`font-family`の問題点

「Chromeでも読みやすい游ゴシックを指定する方法」と同様に游ゴシックがインストールされているのにブラウザが@font-faceに対応していないという特殊な環境に対応できません。
ただ普通に游ゴシックを出力するだけですが、想定外であることは事実です。
また、@font-faceで指定しているため游ゴシックMediumより細い書体が使えません。
この点も「Chromeでも読みやすい游ゴシックを指定する方法」に記述したとおりどうしようもないのですが、やはり使えないということを頭にれておいてください。
上記の記事にどうしても細い書体を使いたい場合の対策方法も明記してあります。

最後に

「2020年まで使える」なんて言っていますが、当然優れたフォントが新しく標準で入ってきたらコレが崩れるわけですが、たかだか数年で変わるとは思えません。
たかがfont-familyですがプロジェクトの途中で変更したり、現在使用しているfont-familyを変更するのも、やはり確認をしなければ怖いので、出来れば長いこと使えるfont-familyを使用したいですよね。
現在動いているサイトのCSSを1行書き換えるだけでも、やはり怖いので出来ればバシッ！と1発で決めたいのです。
（こんなこと言いつつも、何度も書き直しています。すいません。）