Webフォントに関する知識
WEBフォントって重いのでは?
日本の通信スピードであれば1書体なら問題ない。
加えて、一度でもフォントがキャッシュされていれば重さは関係なくなる。
自社以外でも他社で同じフォントを見ていれば、自社サイトでは即時表示される。
そのため、なるべくシェアの高いフォントを使う方が、
画像よりもサイズが軽くなる期待値が高い。
使用する際の注意事項
Googleフォントは仕様変更され、
IEではウェブフォントを見ることができない。
理想フォントは「游ゴシック体」
理由はWindows、Mac、iPhoneで利用可能だから。
欠点はWindowsのデフォルトで細字になること
そのためYu Gothic Medium
と記述しなければならなくなる。
しかしそれで万事解決というわけではなく、
その状態でbold
を指定すると、やはり滲んでしまう、という問題が発生する。
普通のYu Gothic
を太字にした時とは明らかに違う表示になるとのこと。
@font-faceは利用不可
以前は上述の問題対策として@font-face
を利用する方法があったが、
Chrome65以降は非対応となった。
理想の設定方法について
游ゴシックを使う際は、
以下の記述順序で並べていく方法が一般的である。
-apple-system
他に影響を及ぼさないApple用の英字フォント。
設定するとSan Franciscoが適用される。
BlinkMacSystemFont
MacでChromeとFirefoxを使用するときは、-apple-systemではなくこちらが利用される。
Yu Gothic
windows用の游ゴシック表記。
YuGothic
Mac用の游ゴシック表記。
Meiryo
Vista, Win7, Win8ように記述。
Win8以降は上述のYu Gothicが使用される。
今後の対策として
Noto Sans JP
を利用する、という方法が挙げられていた。
今回調べた中では1記事でしか紹介されていなかったが、
弊社サイトでも同じ対策が取られているので紹介。
2018年流行?font-familyのオススメ設定はこれ!【CSS】
Webフォントを利用することで、
OSの違いにも柔軟に対応することが可能。
以前と比べても表示速度が劇的に向上しているため、
特に違和感を感じることなく利用することができる。
もしWebフォントを使用するのにすら不具合が出るような状況で
ページが見られる時(オフライン、通信制限時)のために、
上記の游ゴシックの設定を施していくのがベストである。
理想と現実
ここまでは、このフォントを使うべき、という話だったが、
実際に使われているフォントはどうなのか。
ブラウザのデフォルトフォント
Safari 11.1 / MacOS 10.13 ヒラギノ角ゴ ProN
Chrome 65.0 / MacOS 10.13 ヒラギノ角ゴ ProN
Firefox 59.0 / MacOS 10.13 ヒラギノ角ゴ ProN
Microsoft Edge 41 / Windows 10 メイリオ
Internet Explorer 11.209 / Windows 10 メイリオ
Chrome 65.0 / Windows 10 メイリオ
Firefox 59.0 / Windows 10 メイリオ
Macではヒラギノ角ゴ ProN、
Windowsではメイリオが利用されている。
有名サイト
MSNニュース
font-family: "segoe ui",meiryo,"yu gothic","hiragino kaku gothic pron",sans-serif;
yahooニュース
font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif;
Apple
font-family: "SF Pro JP","SF Pro Display","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","MS Pゴシック","Helvetica Neue","Helvetica","Arial",sans-serif;
Google
font-family: Roboto,Arial,Helvetica,sans-serif;
Googleは別として、メイリオ、ヒラギノが上位に来ている。
Windowsユーザーが多いということを考えると、
現実的な側面から、メイリオ、ヒラギノをメインに据える方法が、
まだ主流である、と言えそうだ。
参考:
- 2017年版個人的ベスト|CSSフォント指定WIN、MACでキレイに表示(ゴシック、明朝)|MWORKS
- 2018年流行?font-familyのオススメ設定はこれ!【CSS】
- 2018年のfont-family指定 - Qiita
- 游ゴシックのfont-family指定方法2018年度版!@font-faceは絶対NG!WindowsのChromeでかすれる問題徹底検証 | WEMO
- Font−familyのベストな書き方 2018年改定版 | それからデザイン スタッフブログ
- font-family 2018 あれこれ悩むより、有名サイトを参照するといい。
- いまどきのCSS - font-family ゴシック編|masakihongo|note
- 2020年まで使えるfont-familyおすすめゴシック体 - Qiita