CSS初心者から上級者まで頭を悩ませるフォント指定のベストプラクティスを模索してみた。

2014年4月28日追記:
フォント指定に関する新しい記事を書きました。
CSSのfont-family指定に関する考察 2014年版

先日、CSSによるフォント指定について色々な人と話をする機会があり、せっかくなので、これまでの自分のやり方を、もう一度ゼロから考えなおしてみようと思い立った。

font-familyの指定を考察する

CSSによるfont-familyの指定についての世間一般の見解を調べていると、非常に参考になる記事を発見!

上記のウェビンブログ様の記事中に添付されている資料:日本のコーダーのfont-family指定が、非常に興味深い。これを見ると、ある程度経験のあるコーダーさんたちの中でも、font-familyの表記は千差万別だということが分かる。つまり、この問題に関しては、まだ一般的に正解と言われる答えが存在していない。面倒な人は、この中から適当にどれかをコピペしてもいいけど、せっかくだから、もうちょっと考えていきたいと思う。

僕の今までのfont-family指定

これまで、僕が指定していたのは、こんな感じ。

font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif;

今までのやり方に囚われて、邪念が入るとまずいので、この指定方法は一旦、全て記憶から消します。・・・マインドアサシーン!

font-familyはきちんと指定する

まずfont-familyについて考える際、「そもそもフォントは指定しないほうがいい」という意見について考える必要がある。これは、本来ならばそうあるべきだと言える。ただし、実際のところはブラウザ固有の色々な問題や、自分でフォントを選択しない(できない)ユーザを考慮に入れると、指定せずにデフォルトのままにしておくのは現実的ではないだろう。font-familyに限らずとも、コーディングをしていれば、そういったジレンマはよくあることだ。今回はフォントは指定するものだと割り切って考えることにする。

フォント名は日本語表記と英語表記を両方記述

font-familyで書体を指定する際に、ブラウザによって日本語表記を無視するものや、英語表記を無視するものがある。そのため、一般的には、フォント名の英語表記と日本語表記をそれぞれ記述することが多い。また、逆にそれを利用したフォント指定のテクニックなども存在する。ただし、firefoxがバージョンアップの過程で、日本語表記と英語表記のどちらも認識するようになるなど、将来的に改善される可能性もある。小手先のテクニックは後々の作業を増やすだけなので、前方互換性を考慮して、両方認識されても困らない前提で考えることにする。

先頭に日本語表記のフォント名を書く

昔のIEで日本語表記のフォント名を先頭に記述しないと、フォントのサイズがおかしくなるバグがある。そんなの気にするような問題じゃない?でもさ、日本語表記のフォント名を先頭に指定しただけで直るんだったら、そうしない理由はないよね。

メイリオとヒラギノ、どちらを優先するか

winはメイリオ、macはヒラギノが標準フォントであり、実際に見やすいフォントでもあると思う。問題は2つある。ひとつは、winとヒラギノを組み合わせると、すごく見辛くなるということ。もうひとつは、macでのメイリオは、ダメじゃないけど、macの良さが失われていて悲しくなること。pcにインストールされたフォントに関係なく、winを使っている人にとってはメイリオ、macを使う人はヒラギノが適用されると、ホントは嬉しい。でも、OSで振り分けとかするのは、美しくないよね。

一見すると、一般的にはwinユーザーのほうがmacユーザーよりも多いため、メイリオが先頭にくるべきなのだが、これにも問題がある。macにofficeをインストールした環境では、winのフォントであるメイリオ(もしくはMSゴシック)がインストールされてしまう。一般企業でofficeを使っているところは多く、その企業とのやりとりのために、macにofficeをインストールしている人も多いはず。やはり、メイリオを先頭にするのは忍びない。

その一方で、winにヒラギノを入れている人はどうだろう。おそらく、わざわざヒラギノを入れるのは、制作関係の人たちがメインだろう。ちなみに、僕もwinにヒラギノが入っている。だから、先頭がヒラギノだと見辛い。正直、ヒラギノを先頭にしたくない。よくよく考えると、資料:日本のコーダーのfont-family指定において、メイリオを先頭に指定する割合が多いことは、winでウェブ制作している人の人口が多いことに起因しているのかもしれない。

ただ依然として、winにヒラギノを入れるケースのほうが稀であると思うので、僕は個人的にはヒラギノを先頭にするのが現時点では良いのではないかと感じている。

完成!font-familyの指定

上記を踏まえたfont-familyの指定がこちら。

font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif;

・・・なんだよ、最初と何も変わってねえじゃねえか。ホント、そういうの勘弁してよ。

フォントのサイズ指定は?

フォントサイズの指定については、絶対指定にするか相対指定にするかが焦点となる。絶対値での指定は、全てのブラウザで同じサイズでの表示となるが、IEでフォントサイズの変更ができないことが問題だ。また、相対値での指定は、ブラウザの基準値が16pxであることを前提としており、この前提が崩れると全体のフォントサイズが変わってしまう。

IE7以降では、ブラウザにズーム機能が付いているため、フォントサイズだけを可変できなくても、まあそれでいいんじゃないかという意見もある。知人に興味深い話を聞いた。

bodyへ指定する基準値を絶対指定しておいて、それ以外は相対指定しておけば、後で文句を言われても、bodyだけ相対指定に直せば大丈夫。

・・・それだっ!!それでいこう!!

その他のいろいろ

IE7とかでズームしたときに、崩れないように、letter-spacing: 0;を指定しておく。

line-heightには単位をつけない。

まとめ

body {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif;
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 0;
}
 
body以外のフォントサイズは相対指定する。
IEで文字サイズ変更できないと文句を言われたら、font-sizeを62.5%にして誤魔化す。

・・・うん、なんか時間かけて色々調べたわりには、結局今までと大して変わってねえっすね!

フォントサイズをremで指定できる日が来るとか来ないとか