Shift10：Webデザイン行く年来る年 フォローアップ（7）フォント「游ゴシック問題まとめ 2016」

2016年12月17日（土）ソラシティホールで開催したShift10：Webデザイン行く年来る年（CSS Nite LP50）のフォローアップとして、『フォント：「游ゴシック問題まとめ 2016」』セッションのスライドなどを公開します。

• スライド
• 動画

メッセージ、補足

フォントセッションの最後に、游ゴシックのおまけセッションを担当した山田です。

今回の内容は、CSS Nite LP47 Coder's High 2016にてお話した内容を短くまとめたものです。

短縮するために端折ってしまった箇所もあるので分かりづらい箇所があったかもしれません。

その場合、下記のCoder's Highのときのスライドを併せて見ていただくと理解が深まるかと思います。

いただいた質問

游ゴシック問題、font-weight: 500;で解決してしましたが、この方法ではなく@font-faceを指定される理由はなぜでしょうか？

冒頭にお伝えしたCoder's High向けのスライドの37Pでも少し触れていますが、游ゴシックがすべての環境に入っているわけではないので、他のフォントが使われることもあります。

そのとき、font-weight: 500;の指定がされていると、他のフォントでも太くなってしまう可能性があります。

現時点の主要な環境で影響が見られなかったとしても、マイナーなOSや今後の新しいOSで影響が出てしまうかもしれません。

また、body等でfont-weight: 500;を指定していたとしても、誰かが特定の要素のfont-weightをnormalや400に上書きしてしまった場合、そこだけ細い游ゴシックが適用されてしまうことになります。複数人で運用するとしたら起こり得ることです。

@font-faceは読み込みの負荷になりませんか？フォントは重いイメージがあるので……ローカルになければ影響されない？

游ゴシックは、ユーザーのローカルにあるフォントで、@font-faceではそれを指定しているだけなので、Webフォントのようにダウンロードと表示に時間がかかるということはありません。メイリオなどを指定するのと同じことです。また、游ゴシックが入っていない環境であれば、font-familyで游ゴシック以降に指定したフォントが代わりに表示されるだけですので、影響もありません。

ユーザーの環境を考えると「sans-serif最強」でしょうか？

私自身、フォントもサイトの世界観をつくる重要な要素であると思っています。

ただ、ニュースサイトやブログなど、文章を読んで欲しいサイトにおいては、ユーザーが慣れていないフォントを強制されてその文章を読むこと自体が負担となってしまったら、運営側もユーザーも双方にメリットがないのかな、というような感じで考えています。

結局、游ゴシックはWin 8.1とmacOSだと同じにならないということですよね？

その通りです。それでよしとした理由は、冒頭にお伝えしたCoder's High向けのスライドの60Pでも触れていますが、游ゴシックMediumがなくてBoldがあるという環境が限定的だったからです。

そもそもWindows 8.1自体のシェアが少ない上に、Office用フォントパックを入れていればWindows 8.1でもMediumが入ります。ちなみに、游ゴシックにRegularしかない場合はメイリオにするなどの回避策をとるには、JavaScriptでブラウザの種類とバージョンを判定して、それによって指定するフォントを変えるしか方法が考えられませんでした。

どのようにするかはその時々で判断するのがよいのかなと思います。

游ゴシックってline-heightがおかしくないですか？

今回のRegularをMediumにする話とはまた別の話になりますが、游ゴシックに限らず、Noto Sansなどの他のフォントでも、IEだけline-heightにバグ？があるようですね。

メイリオでは問題ないようなので、IEだけはメイリオにするなどの対応が必要なのかもしれません。