フォントは、デザインを左右する要素のひとつです。CSSでのフォント指定は、以前から多くの議論がされており、その指定方法は上級者でも様々です。少し前にWindows XPのサポートが終了したことで、今後のIEの主流はバージョン8以降となりました。今回はこれからのfont-family指定について考えてみたいと思います。

明朝か、ゴシックか

CSSのfont-familyを指定しない場合、ウェブサイトのテキストは、ブラウザの標準フォントで表示されます。そして、ブラウザ標準のフォントは、ゴシック体のこともあれば明朝体のこともあります。

しかし、ウェブサイトの本文で明朝体を見かけることは、ほとんどありません。その理由に、明朝体が、ディスプレイでやや見難いことが挙げられます。特に、Windows環境では、本文で使用する文字サイズではMS明朝にアンチエイリアスがかからないため、非常に読みにくいです。実際のところ、ほとんどの企業サイトでは、テキストにゴシック体が使用されています。

今回も、ゴシック体を使用する前提で考えていきたいと思います。

ゴシック体を指定

ウェブサイトのテキストを、ゴシック体で表示させるには、以下のCSSコードを記述します。

font-family: sans-serif;

これだけで、ブラウザ標準のゴシック体で表示されます。本来であれば、これ以上の記述は必要ありません。ブラウザ標準のフォントは、当然、ブラウザによって異なります。しかし、そもそもWinとMacではインストールされるフォントが異なりますから、全てを完全に統一することは不可能ですし、する必要もありません。

しかし、私が知る限り、このようなシンプルな記述をしている企業サイトはほとんどありません。それはなぜか？その答えを探っていきたいと思います。

ブラウザの標準フォント

ブラウザやOSによって、標準となるフォントは異なります。ブラウザの標準フォントをまとめてくださっているページがありましたので、そちらから主要な箇所を引用させていただきます。

ブラウザのデフォルトフォント

Safari 7 / Mac 10.9	Helvetica / ヒラギノ角ゴシック ProN
Firefox 25 / Mac 10.9	ヒラギノ角ゴシック ProN
Chrome 30 / Mac 10.9	ヒラギノ角ゴシック ProN
IE 11 / Win 8.1	メイリオ
IE 8 / Win 7	Arial / ＭＳ Ｐゴシック
Firefox 25 / Win 8.1	ＭＳ Ｐゴシック
Chrome 30 / Win 8.1	ＭＳ Ｐゴシック

引用元：フォントカタログ5・ブラウザのデフォルトフォント

合成フォントの問題

font-familyを指定する際に、日本語フォントよりも優先順位の高い位置に欧文フォントを置くテクニックがあります。こうすることで、欧文フォントに存在しない文字だけ日本語フォントが適用される、いわゆる合成フォントが実現できます。ブラウザの標準フォントでも、safariではHelveticaとヒラギノ、IE8ではArialとMSゴシックの合成フォントが適用されています。

合成フォントは、日本語フォントの英数字を見やすくする措置です。しかし、ひとつの文章の中に複数のフォントが混在すると、文字の大きさやウェイト、ベースラインなどが微妙に異なり、違和感を覚える懸念があります。英数字だけにやけに太かったり、ひとまわり小さかったり。印刷物と違って、ウェブでは微調整がとてもむずかしい。特別、デザイン的な狙いがないのであれば、あえてこちらから指定するべきではないでしょう。

でも、これくらいは、まだ一部のブラウザのほんの微妙な差異に過ぎません。許容範囲です。

メイリオの存在

WindowsにはVistaから「メイリオ」というフォントが追加されました。画面上の文字を「明瞭」に表示するために開発された新しいフォントです。多くの企業サイトでは、このメイリオが高い優先度で指定されています。

メイリオの利点は、本文に使うサイズでもきちんとアンチエイリアスがかかるため、キレイに見えることです。MSゴシックでは、14pxや16pxのテキストにアンチエイリアスはかかりません。正直、どちらが読みやすいかは好みの問題でもありますが、一般的にはメイリオに軍配が上がるでしょう。高解像度のディスプレイなどを視野に入れれば、なおさらです。

Windowsでは、ほとんどのブラウザの標準フォントがMS Pゴシックです。多くの企業サイトでメイリオが優先的に指定されるのは、少しでも読みやすくしたい！という制作者側の熱意の表れでしょうか。そうであれば、その心意気を汲みましょう。

font-family: "メイリオ", sans-serif;

Macでのメイリオ

font-familyにメイリオを指定すると、当然、メイリオが優先されます。

Macのほとんどのブラウザでは、日本語表記のフォント指定は無視されますが、Firefoxではきちんと認識されます。そして、Macにofficeをインストールすると、メイリオもインストールされます。つまり、MacにofficeをインストールしてなおかつFirefoxを使用している人には、メイリオが適用されます。

前方互換性を考慮すると、他のブラウザが日本語表記を認識できるように改善される可能性もありますから、このままではMacがメイリオに侵食される恐れがあります。それは困るので、Mac用にメイリオよりヒラギノを優先させる記述が必要です。

font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;

ヒラギノを先頭に持ってくるのであれば、メイリオは日本語表記でも英語表記でも問題ないですね。厳密には、ヒラギノの末尾に「N」がつかないフォントしかインストールされていない過去のMacを考慮すると、メイリオを日本語表記にしておいたほうが、適用される確率が下がります。

Winでのヒラギノ

すると今度はどうでしょう。Winにヒラギノをインストールしている人が、メイリオではなくヒラギノで表示されるではありませんか。正直、ちょっと見づらい。

と、こんなふうに、font-familyを指定すると余計な問題に悩まされます。でも、まあ、Windowsにヒラギノ入れている人って、モリサワパスポートしている制作者くらいですよね。とりあえず我慢してもらいましょうか。

游書体の存在

最近のWindowsとMacには、游ゴシックと游明朝がインストールされています。どちらの環境でも同じフォントを使いたい場合、これらの書体を指定するという選択肢もあります。

font-family: "游ゴシック", "Yu Gothic", YuGothic, sans-serif;

ただし、現状ではインストールされている環境が少ないことや、個人的な好みの問題で、今回は考慮しないことにします。

まとめ

以下のどちらかの指定が使いやすいのではないでしょうか。

font-family: sans-serif;

もしくは

font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

ここでは統一感を出すためにメイリオを英語表記で記述しています。少し前のセクションでご説明した通り、より厳密さを求めるなら日本語表記でも構いません。

おまけ：有名サイトでのフォント指定

アクセス数が多い国内サイトにおけるCSSのfont-family指定を、ピックアップしました。Firebugの機能でざっと確認しただけなので、実際の表記とは異なるかもしれません。

Yahoo!JAPAN
font-family: 'MS PGothic', Osaka, Arial, sans-serif;

Google
font-family: arial, sans-serif;

FC2
font-family: Verdana, Arial, Helvetica, sans-serif;

Microsoft
font-family: Meiryo, Tahoma, Verdana, Arial, sans-serif;

Amazon
font-family: Arial, Verdana, 'Helvetica Neue', Helvetica, sans-serif;

Wikipedia
font-family: sans-serif;

goo
font-family: Osaka, Arial, Helvetica, sans-serif;

ameba
font-family: 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', Arial, Helvetica;

まあ、見事にバラバラです。純粋な国産サイトではないものも多いため、日本語フォント自体が指定されていないケースも多々あります。正解がない問題だからこそ、こうした議論の余地があって楽しいですね。