〜まだfont-familyをコピペしているあなたへ〜 フォントを理解し直そう

はじめに

初めまして、レバレジーズ株式会社でフロントエンドエンジニアをしている渡邉です。
先日サイトのリニューアルをしたのですが、その際フォントの設定で苦しめられたのでフォントについて調べ直してみました（タイトルにあるfont-familyをコピペで使ってたのは他でもない私です…）。結構細かい決まりやテクニックがあるので、この機会にひとつでも新たな知識を共有できたら幸いです。

font-familyの使い方

CSSでフォントの種類を指定する際はfont-familyというプロパティを使用します。例えばレバテックキャリアのページでは以下の様なfont-familyが指定されています。

例

body {
　　font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Arial, icomoon, sans-serif;
}

このように複数のフォントファミリーを指定するのはOSやブラウザによって使えるフォントが違ってくるためです。このように環境によって使えるフォントファミリーを意識しないと、思わぬ画面デザインになってしまうことがあります。

またfont-familyプロパティには以下のような決まりや特徴があります。

• 選択した要素に対してフォントファミリー名や総称ファミリー名の優先順位リストを指定することができる
• 先に書かれたものほど優先順位が高い
• 複数指定する場合はコンマで区切る
• 空白が含まれている場合は「’」か「”」で囲う（例：”Times New Roman”）
• 総称ファミリー名を最低一つは入れておくべき（理由は後ほど）
• フォントの指定は１文字ずつ行われる（！）
• つまり一文字ずつチェックされ、優先順位の高いフォントにその文字が指定されていない場合は一つ下の優先順位のフォントをチェックするということが繰り返される
• 英語と日本語のフォントを指定する場合は英語を先、日本語を後に持ってくる（逆にすると英語フォントにも日本語フォントが当てられる）
• OSやブラウザーなどの環境により、日本語の指示を無視してしまう環境があるため日本語名とアルファベット名両方を書いた方が良い

今出てきた、フォントファミリーとか総称ファミリーとかって何？

• フォントファミリー名 … 似たフォントがひとまとまりになったグループ。イタリック、ボールドといったフォントフェイスがグループになっている。（例:"Noto Sans JP", "ヒラギノ角ゴ Pro W3"）
• 総称フォントファミリー名…フォントを特徴によって分類されたフォントグループ。指定したフォントがなかった場合の代価案になる。ブラウザのデフォルトフォントになるという“最悪のケース”を防ぐためにつけるため、基本最後の選択肢に持ってくる。(例:sans-serif)

フォントの種類

フォントファミリー名は無限に存在しますが、総称ファミリー名はそこまで多くありません。特徴を覚えておくと便利です。

• serif(セリフ)
  • 終わり止め払いの小さな飾りがあるもの
  • 飾りは『うろこ』や『ひげ』言われることもある
  • Times New Romanとか有名
  • 日本語フォントの明朝体にあたる
• Sans serif(サンセリフ)
  • セリフ（文字端の小さな飾り）がないもの。
  • フランス語でセリフがないという意味
  • Helveticaとか有名
  • 日本語フォントだとゴシック系にあたる
• monospace(モノスペース)
  • 全ての文字が同じ幅の文字
• cursive
  • 筆記体、繋がった文字

フォント界のヒーロー？Webフォント

font-familyで複数のOSやブラウザ対策するのはめんどくさいですよね。デザインが変わってしまうのも気になります。そのような問題を解決してくれるのがWebフォントです。

メリット

• あらかじめサーバーにあるフォントデータを使うためどの端末で見ても同じフォントで表示される
• 複数のフォントを指定しなくても良いので楽

デメリット

• 英語と比べて日本語ファイルは数が膨大なため、読み込みが重くなりがち

フォントについての問題や事件

ここから先はちょっと細かい話になります。ブラウザやOSによって使えないフォントを指定してしまうと意図しない表記になることがあります。ここでは有名な表記崩れや最近起こったフォント問題について挙げてみました。

Chromeのsans-serifフォントが「MSPゴシック」→「メイリオ」に変更問題

• 2017年アップデートに伴い、windows版chrome56とfirefox57のsans-serifのフォントが「MSPゴシック」→「メイリオ」に変更
• 以前もsans-serifの適用フォントの変更はあった

対策

• メイリオのフォントを指定する

教訓

• フォントをユーザーがカスタマイズしていた場合、デザイナーの認識と違うフォントになっている可能性がある
• OS依存システムフォントは変わってしまう可能性があるので、常にチェック＆メンテナンスの必要がある

游ゴシックのwindows/Chrome表示がかすれちゃう問題

• 游ゴシックはWindows と Mac の両方にプリインストールされているシステムフォント
• webフォント以外でOS 間の差異がなく使えるフォントと期待されていた
• しかし…windowxのchromeで游ゴシックを見ると掠れて見づらいという問題発生
• windowsにはMacにはないRegularとLightが入っていてそれがデフォルト状態で表示されてしまうことが原因
• @font-faceでオリジナルフォントを作るという対策があったが、Chrome62以降効かなくなった

対策　その１（font-weigntの指定）

font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-weight: 500;

• font-weightを500に指定

• 游ゴシック最優先で、游ゴシックがなければ Windowsではメイリオ(さらになければMS Pゴシック)、 Macではヒラギノ角ゴとなるように指定する（windowsでヒラギノ角ゴを指定すると太字になるため）

対策　その２（font-family内で直接font-weightを指定）

font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;

• （注意）この指定方法をした文字を太字にすると文字がにじむ
• （注意）いつこの指定方法が使えなくなるかわからない

教訓

• 夢のフォントなど（まだ）存在しない！！

游ゴシック　IEでテキスト下に余白ができる

• IEではなぜか游ゴシックを指定すると、下に少し余白ができます…さすがIE

対策

• IEだけフォント指定を変える

// IEのみの指定方法
_:lang(x)::-ms-backdrop, body {
    font-family: "メイリオ", Meiryo, sans-serif;
} 

// もしくは
_:-ms-fullscreen, :root body {
  font-family: Meiryo, sans-serif;
}

• この他paddngを少しだけつけるなどでも対処可能

教訓

• IE対応やめませんか？

MacOS Catalinaにアップデート後にサイトが明朝体化問題

• Amazonのサイトも明朝体に（中国のサイトのようで怪しい…）
• Mac CatalinaのChromeだとヒラギノフォントが認識されなくなったことが原因？
• 「ヒラギノ角ゴシック Pro/ProN」が古いフォントとして認識されたことが影響している？

対策

• font-familyの指定にHiragino Sansを追加

教訓

• 昨日まで当たっていたフォントが今日も当たるとは限らない

ios13/safariで日本語フォント激太り問題

• iOS13のsans-serifの Hiragino Sansにbold指定した場合、W7がなく近似のW8が当たることが原因

対策

• font-weight:bold ではなくfont-weight:600を指定する
• (13.1ではすでに解決）

教訓

• font-weightの指定にも気をつけろ（そろそろ教訓がなくなってきた）

MacOS Mojave以降のアンチエイリアス問題

• macOS Mojaveからアンチエイリアス方式が変わり、非Retina画面だとフォントが細く(汚く)表示される
• アンチエイリアスの方法が変わりサブピクセル方式からグレースケール方式になったのが原因

対策

• 対策なし。細いフォントファミリーやfont-weightを指定しない

教訓

• 誰かにとって綺麗なものは他の誰かにとっては醜いものになる（そろそろ教訓がな略）

結局どのフォントを使うのが良いの？

全てのサイトにとってのベストは無いので、ページスピード重視だったらブラウザごとにフォントファミリー指定、デザイン重視だったらWebフォントで指定など、その時々でそのサイトやユーザーに合ったフォント指定をすることが必要になってきます。また、ブラウザのアップデートなどにより状況も変わっていくので、常に最新情報を追っかけていく必要があります。
私も今後随時知識をアップデートしていこうと思います。ここまで読んでいただき、ありがとうございました。