Search

いまこそ「font-family」を考える(最良な表示フォントを目指して)


CSS3には「@font-face」という画期的なプロパティが追加されました。これは、ユーザー(閲覧者)の環境にはないフォントでもWebサーバ上に用意されているフォントを読み込んで表示させることができる、いわゆる「Webfont」を使用したシステムです。
しかし、ブラウザの対応状況や一般ユーザーの閲覧環境を考慮すると、未だ実用レベルであるとは言えません。

そこで、現状は通常通り「font-family」によるフォントの指定が必要になるのですが、果たしてどのような設定が最適なのでしょうか。
肝となるのは、ズバリ「出来るだけMSゴシックで表示させたくない」、これに尽きるでしょう。それにプラスして、OS間でのフォントの違いを考慮することも重要です。

では、実際に私がコーディングに携わる際に記述するフォントの指定はどうかというと、

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

日本語サイトの場合は必ずと言って良いほどこう書いてます。

Vista以降のWindowsにはメイリオという綺麗なフォントがデフォルトで入ってるので、まずはそれを優先させる。
Mac用にヒラギノ、Osakaフォントの指定。
以上のフォントが入ってないユーザーは、しょうがないのでMSゴシック。
欧米フォント考慮でVerdana、最後にお決まりのsans-serif。

メイリオはMicrosoftから無料で配布されているので、XPユーザーでメイリオをインストールしている方々も多いようです(私もXPの頃はそうしてました)。
つまり、「メイリオで見ろ、Macならヒラギノでヨロシク!」ということですね。

ちなみに、私は上記の通り「font-family」ではなく「font」として標準文字サイズもまとめて指定してますが、ここ数年で絶対的な「12px」よりも相対的な「small」が主流サイズとなりつつあり、こちらの方がアクセシビリティ的にも適切かと思うのでこのようにしています。

ま、フォントに関しては好みもありますし、サイトのデザイン・レイアウトとの親和性も重要なので、あくまでも参考程度に。