デザインフォントは、デザインを左右する要素のひとつです。CSSでのフォント指定は、以前から多くの議論がされており、その指定方法は上級者でも様々です。XPのサポートが終了したことで、今後のIEの主流はバージョン8以降となりました。今回はこれからのfont-family指定について考えてみたいと思います。明朝か、ゴシックかCSSのfont-familyを指定しない場合、ウェブサイトのテキストは、ブラウザの標準フォントで表示されます。ブラウザ標準のフォントは、ゴシック体のこともあれば明朝体のこともあります。ウェブサイトの本文で明朝体を見かけることは、ほとんどありません。その理由に、明朝体が、ディスプレイでやや見難いことが挙げられます。Windows環境では、本文で使用する文字サイズではMS明朝にアンチエイリアスがかからないため、非常に読みにくいです。実際のところ、ほとんどの企業サイトでは、テキストにゴシック体が使用されています。今回も、ゴシック体を使用する前提で考えていきたいと思います。ゴシック体を指定ウェブサイトのテキストを、ゴシック体で表示させるには、以下のCSSコードを記述します。sans-serif;これだけで、ブラウザ標準のゴシック体で表示されます。本来であれば、これ以上の記述は必要ありません。ブラウザ標準のフォントは、当然、ブラウザによって異なります。そもそもWinとMacではインストールされるフォントが異なりますから、全てを完全に統一することは不可能ですし、する必要もありません。私が知る限り、このようなシンプルな記述をしている企業サイトはほとんどありません。それはなぜか?その答えを探っていきたいと思います。ブラウザの標準フォントブラウザやOSによって、標準となるフォントは異なります。ブラウザの標準フォントをまとめてくださっているページがありましたので、そちらから主要な箇所を引用させていただきます。Pゴシック引用元:フォントカタログ5・ブラウザのデフォルトフォント合成フォントの問題font-familyを指定する際に、日本語フォントよりも優先順位の高い位置に欧文フォントを置くテクニックがあります。することで、欧文フォントに存在しない文字だけ日本語フォントが適用される、いわゆる合成フォントが実現できます。ブラウザの標準フォントでも、safariではHelveticaとヒラギノ、IE8ではArialとMSゴシックの合成フォントが適用されています。合成フォントは、日本語フォントの英数字を見やすくする措置です。ひとつの文章の中に複数のフォントが混在すると、文字の大きさやウェイト、ベースラインなどが微妙に異なり、違和感を覚える懸念があります。英数字だけにやけに太かったり、ひとまわり小さかったり。印刷物と違って、ウェブでは微調整がとてもむずかしい。特別、デザイン的な狙いがないのであれば、あえてこちらから指定するべきではないでしょう。これくらいは、まだ一部のブラウザのほんの微妙な差異に過ぎません。メイリオの存在WindowsにはVistaから「メイリオ」というフォントが追加されました。画面上の文字を「明瞭」に表示するために開発された新しいフォントです。多くの企業サイトでは、このメイリオが高い優先度で指定されています。メイリオの利点は、本文に使うサイズでもきちんとアンチエイリアスがかかるため、キレイに見えることです。MSゴシックでは、14pxや16pxのテキストにアンチエイリアスはかかりません。どちらが読みやすいかは好みの問題でもありますが、一般的にはメイリオに軍配が上がるでしょう。高解像度のディスプレイなどを視野に入れれば、なおさらです。多くの企業サイトでメイリオが優先的に指定されるのは、少しでも読みやすくしたい!という制作者側の熱意の表れでしょうか。あれば、その心意気を汲みましょう。sans-serif;Macでのメイリオfont-familyにメイリオを指定すると、当然、メイリオが優先されます。Macのほとんどのブラウザでは、日本語表記のフォント指定は無視されますが、Firefoxではきちんと認識されます。Macにofficeをインストールすると、メイリオもインストールされます。MacにofficeをインストールしてなおかつFirefoxを使用している人には、メイリオが適用されます。前方互換性を考慮すると、他のブラウザが日本語表記を認識できるように改善される可能性もありますから、このままではMacがメイリオに侵食される恐れがあります。それは困るので、Mac用にメイリオよりヒラギノを優先させる記述が必要です。sans-serif;ヒラギノを先頭に持ってくるのであれば、メイリオは日本語表記でも英語表記でも問題ないですね。厳密には、ヒラギノの末尾に「N」がつかないフォントしかインストールされていない過去のMacを考慮すると、メイリオを日本語表記にしておいたほうが、適用される確率が下がります。Winでのヒラギノすると今度はどうでしょう。Winにヒラギノをインストールしている人が、メイリオではなくヒラギノで表示されるではありませんか。こんなふうに、font-familyを指定すると余計な問題に悩まされます。Windowsにヒラギノ入れている人って、モリサワパスポートしている制作者くらいですよね。我慢してもらいましょうか。最近のWindowsとMacには、游ゴシックと游明朝がインストールされています。どちらの環境でも同じフォントを使いたい場合、これらの書体を指定するという選択肢もあります。sans-serif;ただし、現状ではインストールされている環境が少ないことや、個人的な好みの問題で、今回は考慮しないことにします。まとめ以下のどちらかの指定が使いやすいのではないでしょうか。sans-serif;ここでは統一感を出すためにメイリオを英語表記で記述しています。前のセクションでご説明した通り、より厳密さを求めるなら日本語表記でも構いません。おまけ:有名サイトでのフォント指定アクセス数が多い国内サイトにおけるCSSのfont-family指定を、ピックアップしました。Firebugの機能でざっと確認しただけなので、実際の表記とは異なるかもしれません。Helvetica;まあ、見事にバラバラです。純粋な国産サイトではないものも多いため、日本語フォント自体が指定されていないケースも多々あります。正解がない問題だからこそ、こうした議論の余地があって楽しいですね。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、県内の中小企業に向けた戦略型ホームページ制作を開始。一方で、都内の広告代理店からの要請で大企業案件にも多数参加。企業が本当に必要とするホームページ制作とは何か、を日々探求している。