小粋空間  -  a cheap joke and a play on words site

フォントに Verdana が使われている理由

このブログや公開テンプレート（というか「すちゃらかCSS素材集」より頂いた時の設定をそのまま使ってます）のスタイルシートのフォントには

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

という指定がされています。各フォントがカンマで区切られて3つ並んでいるのは、優先順位（最初のフォントがみつからなかった場合、次のフォントを使用）を示しています。
このエントリーでは青字で示している Verdana という、よくみかけながらもその存在についてあまりよく分かっていなかったフォントについて調べてみました。

欧文フォントは主に2種類の書体が用いられます。デザイン関係の方ならご存知と思いますが、1つはセリフ（Serif）体、もう1つはサンセリフ（Sans Serif）体です。「セリフ」とは「活字の始点または終点にあるひげ飾り」という意味で、サンセリフは「セリフがない」という意味です。前者の代表的なフォントは Times New Roman や Century、後者の代表的なフォントには Helvetica やスタイルシートで設定している Arial があります。日本語で言えば明朝体がセリフ、ゴシック体がサンセリフに似ています。違いは下記のページをご覧頂ければ一目瞭然です。

CreatorsNet：Webマスターが知っておくべき文字（フォント）に関すること

ということで、Verdana はサンセリフに属します。

さて、Verdana についてWebを検索してみたところ以下の記事を発見しました。

ARTIFACT ―人工事実―：font-familyに指定する英語フォント

Hotwired Japan：ウェブ・タイポグラフィー・チュートリアル：でしゃばりのピクセル

Radium Software Development：Verdana

このフォントはヒンティング ?書体のアウトラインをそのまま少ないピクセル数の文字に変換せずに、できるだけ元の書体に近い、変な形にならないように調整を加える?という技術が使われています。下記のページでヒンティングの仕組みが分かりやすく説明されています。

Digi Type：２．Hinting情報の組込

ということで、Verdana はスクリーン上で読むのに非常に適しています。今更ながらこのフォントが使われている理由がよくわかりました。

それとは別に、他によく使われているフォントとしては Tahoma/Trebuchet MS/Comic Sans MS 等があるようで、右上でオブジェと化している stylesheet にフォント切り替え用リンクを追加してみました。それぞれのフォントの特徴や他フォントとの違いが確認できると思います。サイズ等の微調整や状態保持はしておりませんのであしからず。
今のところお遊び用ですがご要望あれば util.js に追加します。

2005.08.19 追記
現在はリンクを外しています。