フォントの種類でレイアウトを崩さないために：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にログインしてコメントする

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