2018年のfont-family指定 #CSS

サンセリフ編です。

目標

欧文は[WIN]Segoe UI/[Mac]San Francisco, Helvetica Neueを使う。
和文その1: 游ゴシックを使う(実はまだ厳しい気がしている)
和文その2: Winにはメイリオ, Macにはヒラギノを使う。(推奨)

1. 欧文は[WIN]Segoe UI/[Mac]San Francisco, Helvetica Neueを使う。

それぞれ次のように指定すれば実現可能

font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 和文フォント指定, sans-serif;

指定順は次の通り。[]は記号内の指定順序を問う、{}は記号内の指定順序を問わないという記号である。

[{[{-apple-system, BlinkMacSystemFont}, "Helvetica Neue"], "Segoe UI"}, 和文フォント指定, sans-serif]

2. 和文その1: 游ゴシックを使う(実はまだ厳しい気がしている)

windowsで細くレンダリングされてしまうのは、游ゴシックのウェイトがRegularで、これが特にChromeの独自レンダリングが影響で意図するものよりも細い。参考記事
また、この問題は@font-face指定でnormalをregularではなくmediumにすげ替えることで回避することができそう。参考記事
Windows8.1ではそもそもMediumが無いので、死。
ただ、IE11では游書体のメトリクスの参照先がOS/2のオブジェクトを使っているようで、line-heightが意図したものより若干大きく描画される。 -> 若干ゃつらい
また、Windows7, 8で游書体を入れてない場合はメイリオで表示になりそう -> 若干ゃつらい

よってあまりおすすめできないが、やるならこうなる。

@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;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Yu Gothic", YuGothic, sans-serif;
}

指定順は以下のような感じ。記号の使い方はさっきと一緒。

[{[{-apple-system, BlinkMacSystemFont}, "Helvetica Neue"], "Segoe UI"}, {"Yu Gothic", YuGothic}, sans-serif]

3. 和文その2: Winにはメイリオ, Macにはヒラギノを使う。

めっちゃよくあるのが「macのデフォルトフォント→Windowsのデフォルトフォントの順」とする掟。
- おそらくこの順でないとofficeの入ったmacでメイリオが表示されてしまうことを危惧してのもの
ただ、この順番だと、windowsでヒラギノが入ってしまっているWeb製作者やクリエイターの環境ではヒラギノが表示される。(モリサワさん、ぜひモリパスのヒラギノは名前変えてください…難しいだろうけど…)
- Windowsとヒンティングの入っていないヒラギノの相性は悪く、良くない表示を与えてしまう可能性が高い

以上の話は、やや宗教戦争臭く、随分前から所々で議論されているよう。
中には、jsでOSを判定し振り分けている解決策を見出すものもあるよう。

私も似たところでずっと悩んでいて調べたが、
検証した所、モダンWebブラウザでsans-serifを指定したときにメイリオで表示されないのは

chrome56以前(issue)
Firefox

そしてなんと、Firefoxはバージョン55でデフォルトフォントを sans-serif: メイリオ/ serif: 游明朝に変更するという結論を持つissueが出来ている。（メイリオだと斜体ができなかったのが課題としてあるようだが、これも割りとfirefox側で頑張って解決しようとしてる。賛否両論ありそうだが（汗））
バージョン55が出るのはロードマップを見ると8月あたりなので、ざっくり2018年ごろには浸透するのかなと。

そう考えると、2018年ごろには

font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;

指定順は

[{[{-apple-system, BlinkMacSystemFont}, "Helvetica Neue"], "Segoe UI"}, sans-serif]

で指定すると、和文が意図通りWinユーザーはメイリオに、Macユーザーはヒラギノに提供できるかと。
issue見てて思ったけど、結構デフォルト　フォントを変えるのはページ全体の表示に関わるので、慎重になるみたい。dだからきっと他のブラウザは変わらないはず…？（IEは変わらないと思うし、唯一Edgeが游ゴの危険性があるけど、WindowsのアプリケーションはUIに游ゴシックUI、中身のコンテンツはメイリオで表示するアプリケーションが多かったので、もしかしたらメイリオのままな気がする、そんな気がしない？）

これもブラウザに見た目を握られる形になるので、実はそんなにいい話ではないが…。

これでも良いのではないか？

San FransiscoとHelvetica、contextual-alignとか無視すると、テクスチャとして見たときはそんなにHelvetica Neueと変わらない。
デフォルトがSan Fransiscoで表示されるのはSafariぐらい。

だったら、

font-family: sans-serif;

というのも、悪い話ではなさそう？

注意したいこと

San Franciscoは、デフォルトでは数字が厳密にプロポーショナルなので、例えば動画時間の横に音量ボタンがあるなどの、変化する数字があって、それに位置が依存するボックスがあると、数字の横幅が変わって位置がガタついてしまう。
これは、San FranciscoにはOTFの機能でmonospacedな数字が用意してあるので、以下のようにfont-feature-settingsを設定すると良い。(autoprefixerな感じのものを使ってないときはprefixが必要。詳しくは参考資料へ)

font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";

これでしばらく平和になると良いな。