フォントの種類でレイアウトを崩さないために：font-size-adjustプロパティ

エ・ビスコム・テック・ラボ
2008/08/27 18:41

ウェブページで表示するフォントの種類が変われば、文字の見た目の大きさが変わってしまい、レイアウトが崩れてしまうことがある。デザインの統一感や可読性のためにも、文字の見た目の大きさが変わらないように注意しよう。

　表示に使用するフォントの種類が変わると、同じフォントサイズで表示していても文字の見た目の大きさが変わってしまう。デザインによっては全体のバランスや文字の可読性が変わり、ユーザビリティやアクセシビリティにも影響してくる。

　そこで、font-size-adjustプロパティを利用して、表示に使用するフォントが変わっても、文字の見た目の大きさが変わらないように設定してみよう。font-size-adjustプロパティには、これまでWindows版のFirefoxが対応していたが、Firefox 3ですべての環境のFirefoxで利用できるようになった。

フォントの見た目の大きさの違い

　次のサンプルは、同じ文章をウェブページで利用される主要なフォントで表示したものだ。フォントサイズはfont-sizeプロパティで16ピクセルに設定しているが、見た目の大きさはフォントの種類によってかなり異なることがわかる。

フォントの見た目の大きさの違い フォントの見た目の大きさの違い
※ブラウザで表示を確認する

　こうした事情から、制作者が想定したフォントと異なるフォントで表示されると、デザインのバランスが崩れてしまう。

　たとえば次のサンプルでは、font-familyプロパティを利用して表示に使用するフォントの第1候補を「Verdana」、第2候補を「Times New Roman」と指定している。すると、「Verdana」がインストールされてない環境では「Times New Roman」で表示され、文字が小さく、1行の横幅も短くなってしまう。

サンプル1

Verdanaで表示された場合（上）と、Times New Romanの場合（下） 
div	{
	font-size: 16px;
	font-family: Verdana, 'Times New Roman';
	}

<div>
It is fine today. Never change your plans because of the weather.
</div>
※ブラウザで表示を確認する
  • コメント（1件）

#1 jdaggett  - 2008/08/28 14:18

Aspect valueの計算がフォントデータによるので下記のExample Vを利用すれば簡単に計算できると思います： http://dev.w3.org/csswg/... 続きを見る
» 不適切なコメントを報告する
記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Tips 小技 CSS Microsoft アプリケーション Flash Webデザイン リファレンス Windows XP Internet Explorer OS iPhone 開発環境 WebKit インストール 仮想化 Off Topic PHP Windows Ajax Windows 7 プログラミング言語 Chrome JavaScript Windows Vista マイクロソフト iPhone 3G ソフトウェア開発 Mac OS X Apple Opera UI ブラウザ Webサービス モバイル RIA Safari Linux セキュリティ Java データベース Firefox 脆弱性 HTML Mozilla iPod touch オープンソース Firefox 3 Database Google
  • 話題のタグを見る »