CSSで指定するフォント

Posted at 2006-09-19T02:22:00+09:00 in Web Design

CSSで指定するフォントは、訪問者のマシンにその指定したフォントがインストール済みでないと(大抵の場合は)反映されないため、手に入れやすいまたは多くのOSでインストールされているフォントを指定することが多い。手に入れやすいフォントとして代表的なものはCore fonts for the WebというMicrosoftが提供しているフォント群で、具体的にはArialやTrebuchet MS、Verdana、Georgia、Times New Roman、Courier Newなど。あえてLucida GrandeやTahomaを使うというのなら違和感の少ない代替になりそうなフォントを指定しておいて挙げると良いかもねとかいう話。

Core fonts for the Webに含まれる多くのフォントはWindows 98以降では予めインストールされており、Mac OSでもInternet Explorerをインストールすればインストールされる。更には他のOSでも手に入れることができる(ライセンス的に問題が無いのかどうかは知らない)。つまり、これらのフォントを指定すれば多くの環境で同じような表示が期待できるということになる。あくまでも期待できる程度だけど。

手に入れやすいフォントとして他にはBitstream Veraファミリが挙げられるが、Windowsユーザーがわざわざインストールするとも思えないので、手に入れやすいことは確かだが、あまり一般的とは言えないと思う。

ただ「Lucida Grande使いたい！Windowsとかしらねぇぇぇぇ！」とか「Tahoma最高！Tahomaが無いOSとか信じられない！」みたいなアレもあったりするわけで。そういう場合にはその指定したいフォントだけを記述するのではなく、その指定したフォントが無い環境向けに、

• Windows XP SP2 fonts
• Mac OS X 10.4: Fonts list

というそれぞれのOSでインストールされているフォントの一覧を参考にして、なるべく似たようなフォントも合わせて指定しておくのが良いかも。

というわけでいくつか組み合わせを挙げてみる。

• 'Franklin Gothic Medium', Helvetica, sans-serif
• 'Lucida Sans Unicode', 'Lucida Grande', sans-serif
• Tahoma, Geneva, sans-serif
• 'Palatino Linotype', Palatino, serif
• Consolas, 'Lucida Console', Monaco, monospace

ここでは省いたCore fonts for the Webとの組み合わせなども考慮すると、他にも良い組み合わせが色々と考えられるはず。

諸事情により「フォント指定なんてしなければ良いじゃん」というアプローチについて考慮されていないエントリになっています。ご了承ください。

追記

ダウンロード・ページへのリンクを張っておいたConsolasはVisual Studio 2005がインストールされていないとセットアップで弾かれるらしい(未確認情報)。Express EditionのどれかをインストールしていればOKみたいなので、実質無償で手に入れることができる模様。