いまどきのCSS - font-family ゴシック編

CSS の「font-family」の指定に関しては、検索すると2017年版とか2018年版とかたくさん出てきますが、なんとなくコピペではなく、自分で納得がいくように調べてみました。
結論から言うと、「なかなか難しい」です。
適度に見直しが必要だと感じました。

ポイントとしては
・游ゴシックかすれる問題
・ヒラギノ太い問題
があります。

とりあえず今っぽい感じにするならば

Windows
日本語：游ゴシック　英語：Segoe UI
Mac
日本語：游ゴシック　英語：San francisco

font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;

今っぽい感じです。
Macではヒラギノ優先にしたい場合は

Windows
日本語：游ゴシック　英語：Segoe UI
Mac
日本語：ヒラギノ　英語：San francisco

font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', HiraginoCustom, 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif;

ヒラギノはHiraginoCustomとしてfont-faceで太さの調整をします。
これに関しては後述「ヒラギノが太い問題」。

太さはNormalとBoldしか使わないのであれば、San franciscoやSegoe UIもなくてもいいと思います。

Windows
日本語：游ゴシック　英語：Helvetica（Arial）
Mac
日本語：ヒラギノ角ゴシック　英語：Helvetica Neue

font-family: 'Helvetica Neue', 'Helvetica', 'Hiragino Kaku Gothic ProN', YuGothic, 'Yu Gothic Medium', Meiryo, sans-serif;

fontに関しての問題。
まずは

游ゴシック問題

游ゴシックはWinやMacでフォント名が違ったり、太さが違ったり色々問題を抱えています。Windows Chromeでかすれて見える問題がありました。

游ゴシックのフォント名はWindowsとMacでそれぞれ
Windows：Yu Gothic
Mac：YuGothic
です。

続いてChromeでかすれる問題

Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？
Windowsで游ゴシックが汚いのは、結局誰が悪いのか？
游ゴシックは何故Windowsでかすれて見えるのか

この解決方法はこれまでは「@font-face」を使用して解決してきましたが、現在はChromeの仕様が変わって解決できません。
かわりに、WindowsではMediumウェイトの游ゴシックのみ使用することにして、
「'Yu Gothic Medium'」
を指定して解決します。

ちなみに、
'游ゴシック Bold'、'Yu Gothic Bold' はWin Chromeでは指定しても表示してくれませんでした（WIn IEはOK）。

ただし、これだとBoldの場合も游ゴシック Mediumを無理やり太くしている状態なので少しにじんで見えます。
なので、気になる場合はBoldの場合はfont-familyを指定し直したほうがいいでしょう。
Boldの游ゴシックのみ@font-faceで指定したいところですが、上記のようにBoldのフォント名はWin Chromeでなぜか動かないので仕方なくクラスを用意するしかないですね。

.bold {
 font-family: [フォント名]..., YuGothic, 'Yu Gothic', [フォント名]..., sans-serif;
 font-weight: bold;
}

とりあえずはこれで游ゴシックはだいたいOK。

ヒラギノが太い問題

ヒラギノはHiragino Sansが登場してからWeightがW1〜W9まで使用可能になりました。これまでのヒラギノは「W3」と「W6」しかなかったために、

Normal：Hiragino Kaku Gothic ProN W3
Bold：Hiragino Kaku Gothic ProN W6

を使用していましたが、Hiraginoi Sansは

Normal：Hiraginoi Sans W4
Bold：Hiraginoi Sans W7

となるので太く見えます。
Boldは結構太く見えます。比べるとだいぶ太くて違和感があります。

Mac OS X El Capitanのヒラギノ角ゴシック

ただし、これは仕様としては正しく（通常、NormalはWeight400、BoldはWeight700）、これまでが400のかわりに300（W3）と700のかわりに600（W6）しかなかったので少し細かったということです。

この問題は、font-weight: bold; を使用せずに、boldの場合はfont-weight: 600; と指定することで回避していたのですが、そうするとWin IE 游ゴシックがMedium扱い（Win Chromeはなぜかbold）、Androidの日本語がNormal扱いになってしまい太く表示されないためNG

なので、@font-faceで調整。
font-weight: bold;はfont-weight: 700;なので、この時にHiraginoSans-W6を指定してあげましょう。

@font-face {
 font-family: 'HiraginoCustom';
 font-weight: 100;
 src: local('HiraginoSans-W1'), local('Hiragino Sans');
}
@font-face {
 font-family: 'HiraginoCustom';
 font-weight: 200;
 src: local('HiraginoSans-W2'), local('Hiragino Sans');
}
@font-face {
 font-family: 'HiraginoCustom';
 font-weight: 300;
 src: local('HiraginoSans-W3'), local('Hiragino Sans');
}
@font-face {
 font-family: 'HiraginoCustom';
 font-weight: 400;
 src: local('HiraginoSans-W3'), local('Hiragino Sans');
}
@font-face {
 font-family: 'HiraginoCustom';
 font-weight: 500;
 src: local('HiraginoSans-W5'), local('Hiragino Sans');
}
@font-face {
 font-family: 'HiraginoCustom';
 font-weight: 600;
 src: local('HiraginoSans-W6'), local('Hiragino Sans');
}
@font-face {
 font-family: 'HiraginoCustom';
 font-weight: 700;
 src: local('HiraginoSans-W6'), local('Hiragino Sans');
}
@font-face {
 font-family: 'HiraginoCustom';
 font-weight: 800;
 src: local('HiraginoSans-W7'), local('Hiragino Sans');
}
@font-face {
 font-family: 'HiraginoCustom';
 font-weight: 900;
 src: local('HiraginoSans-W8'), local('Hiragino Sans');
}

なので、ヒラギノ優先させたい場合は一工夫必要です。

ここまでやったけど、色々面倒なので「Noto Sans」使えば？？

WEBフォントを使用すれば、ブラウザの差異を気にせず、共通のフォントが使用できます。
ただ、これも色々と問題があり。。。
例えば

・ロードに時間がかかる？
・自前でサブセット化が必要？
・いやいやGoogleのCDNが結局はいい？
・Noto Sans Japanese、Noto Sans JP、Noto Sans CJK JPどれがいいの？
・Noto Sans JPがwoffを切り捨てたためIE 11で表示できない？

などなど。
これに関しては、次回まとめます。

まとめ

font-familyに関しては随時状況が変わっていくため、注意が必要です。
ですので、一度自分で各ブラウザで実際にどんな表示がされているか、色々なパターンをチェックしてみると、数多くある情報に惑わされなくて済むので、やってみてください。コピペではなくやってみる。
近々、STADでも勉強会の題材として取り上げようと思います。

STADとは↓

STaD｜plamo｜note