新しい記事書きました。【font-familyについて本気で考えてみた】
「Chromeでも読みやすい游ゴシックを指定する方法 」の記事で游ゴシックが一部ブラウザで掠れる問題を解決出来たので、font-family
のベストプラクティスを考えてみたいと思います。
本当は「2016年font-familyの決定版」みたいなタイトルにしたかったのですが、執筆時は8月ですしね。2017年も名乗れません。
2020年と書いたのはWindows7のサポートが切れるのがこの年だからです。
目的はどの環境でも出来る限り近い見た目を目指すものではなく、実行環境で最も読みやすいものを目指すものです。MacよりもWindowsに比重をおいています。
-- 追記 --
Chrome58から一時対応しなくなってしまいましたが、游ゴシックをWindows版Chromeでキレイに表示する@font-faceの設定にヒントを頂き現在は対応済みのコードになります。
合わせてWindowsのみRegularサイズ(100〜300)に対応しました。
Chrome62より仕様が戻った?ようなのでコードも以前のものに戻しました。
なので、58〜61のバージョンについては未対応になります。
Chrome65にて動作していないことを確認しました。
「まず最初に完成したコード」のコードは現在使用しても普通のYu Gothic
になります。65現在の挙動は過去にはない、明らかに不具合と思われる挙動だったのでまたバージョンアップで変わるでしょう。
頻繁にあるバージョンアップで都度挙動が変わる分、昔のIEより厄介です。しばらくこの記事は放置します。数ヶ月に変化があるようなら更新します。 -2018.04.12-
Chrome79で動作を確認しました
やっぱりバグだったようです。
最近この記事が「いいね」されると思ったら、Yu Gothic
が期待通り動いているのを確認できました。
まず最初に完成したコード
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 100;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 200;
}
@font-face {
font-family: "Yu Gothic";
src: local("Yu Gothic Medium");
font-weight: 300;
}
@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;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 100;
}
@font-face {
font-family: "Helvetica Neue";
src: local("Helvetica Neue Regular");
font-weight: 200;
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}
@media all and (-ms-high-contrast: none) {
html {
font-family: Verdana, Meiryo, sans-serif;
}
}
@media all and (-ms-high-contrast: active) {
html {
font-family: Verdana, Meiryo, sans-serif;
}
}
長い!長いですねー。一般的な記述と比べると段違いです。
なぜこのような形になるかは以下でご説明します。
対象環境
基本的にはサポートされているもの、一般的なもの。
IE8以上を対象としています。
IE11より前の対応は一般サイトではあまり必要が無いかもしれませんが、このfont-family
なら特に意識する必要はありません。それよりもfont-family
で問題なのはOSですので、そうそうシェアは変わりません。
font-family
の解説
あまり聞きたい人はいないと思いますが、カスタマイズしたい方へ向けて書き綴ります。
考えぬ抜いたので、あまりカスタマイズ性はないと思います。
-apple-system
まず英字書体から指定していきます。
最初に指定するのは、他に影響を及ぼさないApple用の英字フォントです。
変なフォント名ですが、コレを指定すると「San Francisco」という書体が適用されます。
-apple-system
について詳しく解説されている方がいらっしゃいます。
iOS9からのシステムフォント San Francisco を理解する
BlinkMacSystemFont
また見慣れないフォント名ですが、-apple-system
と同じSan Francisco
が適用されます。
-apple-system
と何が違うかというと、こちらはBlink
(フォント名がそのままです)、WebKitから派生したレンダリングエンジン用フォントです。
このレンダリングエンジンを使用しているのはChromeとOpera。この両ブラウザは、先に記述した-apple-system
ではなく、こちらが適用されることになります。
純粋なWebKitであるSafariは-apple-system
が適用されます。
Helvetica Neue
-apple-system
、BlinkMacSystemFont
が適用されないApple用の英字フォントです。
おなじみHelvetica
の上位バージョンみたいなやつ。
太さの種類があるため日本語フォントとのバランス調整が必要です。一番細いのはものすごく細いです。
そのためweight100〜200をRegularで上書きしました。
ちなみに、「ヘルベチカ ノイエ」と読みます。
Original Yu Gothic
Windows用の日本語フォント「游ゴシック」です。
@font-face
でごにょごにょしてChromeでも読みやすくしています。
詳しくはChromeでも読みやすい游ゴシックを指定するCSS と游ゴシックをWindows版Chromeでキレイに表示する@font-faceの設定を御覧ください。
Yu Gothic
上記では対応できないブラウザMicrosoft Edge用日本語フォント「游ゴシック」です。
YuGothic
Mac用の日本語フォント「游ゴシック体」です。
このfont-familyの基準点になっているのがこの記述です。
Verdana
Windows vista、Windows7、Windows8用の游ゴシックが適用されない環境用の英字フォントです。
好みで修正できる箇所はココぐらいかなと思います。
Verdanaの代わりにArialなどでもいいでしょう。
Meiryo
定番のWindows用日本語フォント。
Windows vista、Windows7、Windows8用の日本語フォントです。
Windows8.1以降は先に記述したYu Gothic
が適用されます。
M+ 1p
対象環境には入れいていないものの、簡単に対応出来るなら対応しておきたいので一部Linux系のために記述してみました。
本当は英字フォントとの組み合わせが怖いのでもっと前方に記述したいのですが、"M+ 1p"
はフリーフォントのため一般の環境でも入っている可能性が高いため、最後部に記述しました。
* 私はLinuxを触ったことがありません。このfont-family
についても確認をしていません。
標準環境でのデフォルトフォントであるのならば、記述は必要ないです。
もし、確認してくださる方がいましたらコメント頂けると私が安心します。
sans-serif
ただの保険です。
もしもの時、デフォルトの明朝体が適用されるよりは、ゴシック体のほうがマシと言う程度の記述です。
IE向け
コメント欄でご指摘にあるように、IEは游ゴシックの下の余白が他のフォントより大きいというバグを抱えています。メイリオも若干ながら下のほうが余白が大きいですが、比べ物になりません。
そのためIE向けのハックを最後に記述しています。
つまりIEはメイリオが適用される事になります。
シェアの大きいIEが游ゴシックを使えないとなると魅力半減どころでは無いですね。
よく使われている「ヒラギノ」
一般的に使用されているMacは游ゴシックが搭載されています。
そのため游ゴシックを指定するならヒラギノは要らなくなる訳です。
今回記述しなかったもうひとつの理由として、ヒラギノを考慮すると以下の様な組み合わせのコードが考えられるからです。
body {
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
この書き方はデフォルトのことしか考えられていない書き方です。
当然Windowsにヒラギノが入っている場合ヒラギノが表示されます。これが問題!
この環境を使用したことがある人には分かると思いますが、とても読めたものではありません。MSゴシックのほうがマシです。
昔読みにくいと思ったので、先入観で書きましたが、感覚が変わったのか、何の違和感もありませんでした。(昔から現在の間にApple教に入信しています)
body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}
そこで今回ヒラギノを排除したコードを見ると、1番読みにくい環境(個人的には読みやすいですが)でも「Verdana, Meiryo」の組み合わせが適用され、ヒラギノを使用した場合よりもかなり読みやすくなります。
どうしてもヒラギノを使いたい方はQiitaのCSSのヒラギノの記述が参考になるでしょう。
font-family: Helvetica Neue, Helvetica, Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, sans-serif;
日本語表記の書体名とアルファベット表記のfont-family
body {
font-family: "メイリオ", Meiryo;
}
上記のように日本語表記とアルファベット表記を両方記述するのを見かけますが、この記述方法でないと適用されないブラウザは、今回対象外です。
よっぽど古いブラウザが対象に入っていなければ日本語表記は必要ありません。
そんなブラウザが対象に入っていたら、この記事のfont-family
は使いたくないですね。
このfont-family
の問題点
「Chromeでも読みやすい游ゴシックを指定する方法 」と同様に游ゴシックがインストールされているのにブラウザが@font-face
に対応していないという特殊な環境に対応できません。
ただ普通に游ゴシックを出力するだけですが、想定外であることは事実です。
また、@font-face
で指定しているため游ゴシックMediumより細い書体が使えません。
この点も「Chromeでも読みやすい游ゴシックを指定する方法 」に記述したとおりどうしようもないのですが、やはり使えないということを頭にれておいてください。
上記の記事にどうしても細い書体を使いたい場合の対策方法も明記してあります。
最後に
「2020年まで使える」なんて言っていますが、当然優れたフォントが新しく標準で入ってきたらコレが崩れるわけですが、たかだか数年で変わるとは思えません。
たかがfont-family
ですがプロジェクトの途中で変更したり、現在使用しているfont-family
を変更するのも、やはり確認をしなければ怖いので、出来れば長いこと使えるfont-family
を使用したいですよね。
現在動いているサイトのCSSを1行書き換えるだけでも、やはり怖いので出来ればバシッ!と1発で決めたいのです。
(こんなこと言いつつも、何度も書き直しています。すいません。)