Webサイトのフォントサイズ

Friday, Apr 22, 2005 - 01:04 +09:00

  1. CSSで指定できる単位
  2. 絶対指定
  3. 相対指定
  4. ピクセル指定
  5. キーワードによる指定

CSSで指定できる単位

CSSで指定できる単位には、絶対的な単位、相対的な単位、ピクセル単位の3種類の長さの単位があります。さらにフォントサイズは、パーセント値やキーワード値によっても指定することも可能です。

Macintosh用のフォントは、9、10、12、14、18、24px（pt）のビットマップデータを持っていて、それらのサイズの中からなら綺麗に表示することができます。Windows用のフォントだと日本語は10px↑、英語のフォントは9px↑であれば1px刻みで綺麗なビットマップ表示が可能です。

絶対的な単位
インチ（in）、センチメートル（cm）、ミリメートル（mm）、ポイント（pt）、パイカ（pc）。
1in = 2.54cm、1pt = 1/72インチ、1pc = 12ポイント。
ポイントは印刷業界で標準的な単位で、印刷物に向く。
相対的な単位
「em」と「ex」の2つだけ。文字の大きさを相対的に測るための単位。「em」は使用中のフォントの文字高を 1 とする単位。「ex」は小文字の「x」の文字高を 1 とする単位で、その長さは使用中のフォントによって変動する。
ピクセル指定
テキストや画像などを構成する、１つ１つの小さな点（ドット）のことをピクセルといい、「1px」がピクセル１つの大きさを表す。出力デバイスの解像度に左右される相対値なのだが、１つの機器の範囲では絶対値として振る舞う。
パーセント値
他の値に対する割合を表す単位で、単位記号は「%」。要素の大きさに対して使用した場合は、親要素に対して、または周辺事情に対しての相対的な単位として扱われる。
キーワード値
「xx-small」、「x-small」、「small」、「medium」、「large」、「x-large」、「xx-large」の7つがある。ブラウザごとに設定されている7つのフォントサイズキーワードのことで、1段階大きなサイズを「larger」、1段階小さなサイズを「smaller」として相対的に指定することもできる。

絶対指定

モニタの画面解像度は「dpi」ドット・パー・インチ、または「ppi」ピクセル・パー・インチという単位が用いられていて、両者とも１インチの長さに収まるドット数を表しています。1pt = 1/72インチなので、画面解像度によって「pt」のサイズは変わります。１ドットの大きさが共通でも、その解釈によって１インチの長さが異なってしまうということです。

画面解像度が72dpi（1インチあたり72ドット）なMacintosh環境だと 1pt = 1px なのだけど、96dpiなWindows環境では 1pt = 96÷72 = 1.33px となります。12ptの文字はMacでは12pxなのだけど、Windowsだと16pxとなってしまいます。したがって文字サイズが大きくなればなるほど、この差も広がっていきます。モニタ上では絶対的な単位たりえないということですね。

また、フォントサイズを「px」および絶対的な単位で指定すると、Windows版IEではユーザーがフォントサイズを変更できなくなります。読み難いフォントサイズを調節できないというのは訪問者のストレスになるので、アクセシビリティの面からもフォントサイズは相対指定が望ましい、ということになります。

相対指定

相対指定ではサイズの細かい調節は難しい。ユーザーがデフォルトのフォントサイズを下げていると、読むことができないサイズまで小さくなってしまったりもします。そして変更していなくても、もともとデフォルトの値はブラウザごとに微妙に違っています。さらに「em」や「%」を使用していると、バージョン４世代以前のブラウザでは深刻なバグの嵐に見舞われます。

相対指定はクロスブラウザでもないし、クロスプラットフォームでもない。なのに何故使い続けられるかというと、（矛盾しているようですが）多様な環境に対応できるからです。ピクセルや絶対指定と違って、全てのブラウザでリサイズが可能だからです。それに、モダンなブラウザではそこまで深刻な違いでもないし、ブラウザのデフォルト値さえ統一されていれば、相対指定は立派に機能する。

訪問者のアクセシビリティを追及するだけなら、最良の方法はフォントサイズを指定しないことです。そうはいっても小さめの字体を必要とするデザインは多いし、美観からも制作者は小さめのフォントを使いたがる。大抵のユーザーは「デフォルトの文字は大きすぎて落ち着かない」と感じるものだし、全てのユーザーがテキストをリサイズする方法を心得ている訳でもないのです。

ピクセル指定

画面上のドットを単位として指定できるピクセルは、ブラウザの新旧、対応/非対応を問わず、どんなプラットフォームでも機能します。ピクセルはモニタの最小単位であり、Linuxでも、Macでも、NN4でも、13pxは13pxです。大部分の制作者とユーザーは「ピクセルは絶対的な単位だ」と思っているし、事実上すべてのブラウザがピクセルを同じ方法でサポートしています。

フォントサイズをピクセルで指定することの問題は、Windows版IEでテキストをリサイズできない、という一点に尽きます。Operaにはページズーム機能があるし、Netscape、Mozilla、Firefox、Chimera、Safari など、IE以外のほぼ全てのブラウザは、テキストズーム機能を有しています。テキストズームはMac版 IE5によって初めて世に出たものなので、Mac版IEも保有しています。

WebサイトがPCで閲覧されるとは限らないことを考えれば、ピクセルによってフォントサイズを固定することには、まだ問題があります。Webサイトを映すのは携帯電話かもしれないし、PDAかもしれない。プロジェクタで投影してプレゼンを行うことだって充分考えられます。そして、全ての機器が「media」属性に対応している訳でもない。

キーワードによる指定

CSSには、「xx-small」から「xx-large」までの7つのフォントサイズキーワードがあります。これらはWindows版IEでもリサイズが可能で、読めないほど小さくなったりもしません。アクセシビリティを満たしているし、サイズ調整のバランスも良いのですが、めったに使われることはありません。

何故かというと、キーワードによるサイズ指定はブラウザによって解釈がまるで違うから。Netscape Navigator4（NN4）はキーワードの大部分を無視するし、NN4.5とIE3では「xx-small」が6pxとして表示されます。これはCSS初期の仕様（CSS1）ではキーワードを1.5倍ずつ換算していたからなのですが、いずれにせよNN4でのキーワード指定は使用に耐えない。

他にもWindows版 IE4/5/5.5では、標準よりサイズが大きくなります。これは<font>タグのsize属性の値である1～7を、そのままキーワードに当てはめたから。通常はデフォルト値を表す<font size="3">に相当するサイズを、キーワードで下から3つめの「small」にしたのです。したがって「medium」はデフォルトのフォントサイズよりも大きく表示されることになります。

IE4はともかく、IE5はまだ使い続けている人がかなり居ます。かといって、それらのブラウザを基準にキーワードを誤用すると、キーワードを正しく理解しているモダンブラウザでは不適切な表示になってしまいます。ブラウザによってCSSを振り替えれば問題なく使えるけど、そこまでするなら「em」や「%」のほうが細かい調節ができる。

posted in Usability Trackback (0)

Trackback

このエントリーのトラックバックURL
http://rospear.info/other/mt-tb.cgi/12

« Previous Entry - Next Entry »