• 作成:

Windowsを心配するのを止めてfont-familyにsans-serifとだけ指定するようにしました

私は font-family には総称ファミリを設定するべきだと前から思っていました.

グローバルな空間で明朝体ではなくゴシック体を使うように設定するには

font-family: sans-serif;

とだけ指定するのが望ましく, 何かをごちゃごちゃ指定するべきではないと思っていました.

何故ならばユーザは表示したいフォントをそれぞれOSやブラウザに指定しているはずで, それを上書きしてしまうのは行儀が悪いからです.

総称ファミリであるsans-serifが設定されていればユーザはブラウザの設定などで自分の好きなフォントを設定することが出来ます.

自分自身ちゃんとブラウザのフォントは設定しているのに, webサイトの指定でfallback用にインストールしてあるフォントなどが使われると不快な思いをします.

しかしこれまで私はbootstrapのデフォルトフォント設定に以下のような指定をしていました.

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, Meiryo, "Segoe UI",
  Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol";

なぜ弄るべきではないと考えているのにこのような指定をしていたのか. それは日本語圏特有の事情のためです.

デフォルト設定のWindowsの一部の環境ではMeiryoを設定しないとMS Pゴシックが使われてしまうためです. 流石にビットマップを含むフォントが設定をしてないユーザで使われるのは許容できませんでした. 特にWindows版Firefoxのデフォルト設定は無視出来ませんでした.

しかし

を参考にする限りsans-serifMS Pゴシックが使われるそこそこの規模の環境はもはやWindows7のIE11に限ります. 今どきWindows7でIE11を使っている人はMS Pゴシックが使われても気にしなさそうと言うか, ものすごい低解像度のディスプレイを使ってそうなのでむしろMS Pゴシックの方が適している可能性すらあります. いまなお「MS Pゴシック」を優先指定するサイト | PersonWriter's Room

Firefoxがデフォルトメイリオにしたのは2017年の話なので今更の話なんですけどね.

なのでもはやメイリオを明示的に指定する苦肉の指定は不要になったと言えるでしょう.

最終的なフォント指定は

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, sans-serif;

にするか

$font-family-sans-serif: sans-serif;

にするかで迷いました. 原則を守るかAppleの新しいシステムフォントを使わせるかの迷いです.

しかし 2018年のfont-family指定 - Qiita を読んで別にSan Franciscoの拡張機能とか使ってないので無理に新しいシステムフォントを使わせる必要ないのではと思ったので, sans-serifだけ設定することにしました.

ちなみにこれはデフォルトフォントを1つだけ設定して細かくフォント指定とかしないガサツな人の考えた結論なので, デザインに拘る人は別に頑張って良いと思います. ただ頑張る場合は私のような自分でフォントを指定するユーザが不快な思いをしないように頑張って欲しいなと思います.