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

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

Posted at March 10,2005 7:15 PM
Tag:[Customize, Font, Verdana]

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

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

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

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

CreatorsNetWebマスターが知っておくべき文字(フォント)に関すること

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

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

ARTIFACT ―人工事実―font-familyに指定する英語フォント
Hotwired Japanウェブ・タイポグラフィー・チュートリアルでしゃばりのピクセル
Radium Software DevelopmentVerdana

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

Digi Type2.Hinting情報の組込

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

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

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

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

正しいフォント名の読み方 from VMID.NET
 『フォントって声に出さないから調べてみた。』  ってことで、フォントの読み方の一覧です。  Arial(アリアル)とVerdana(ベルダナ)位は覚えてお... [続きを読む]

Tracked on March 15, 2005 11:53 PM

フォント名の読み方 from progrestylise
ウェブデザインをはじめて3年になりますが、いつも悩んできたことがあります。 "V... [続きを読む]

Tracked on April 3, 2005 3:25 PM
コメント

初めまして、e-luckと申します。
Verdanaに対しては、海外サイトではちょっと否定的な意見もありますね。
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html
Verdanaはグリフサイズがちょっと大きいらしく、その感覚でフォントサイズをCSS等で設定してしまうと、Verdanaがインストールされていない環境では、想定したサイズより小さくなってしまうから、使用は避けた方が良いよって事らしいですね。
日本のサイトの場合は、2バイトとの混在なんで、この考えには当てはまらないとは思いますが。

[1] Posted by e-luck : March 11, 2005 11:34 AM

>e-luckさん
はじめまして。
情報ありがとうございました。
またいろいろ記事読ませて頂き、大変勉強になりました。

それでは今後ともよろしくお願い致します。

[2] Posted by yujiro : March 12, 2005 1:49 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)