font-sizeは%で

font-sizeをpx，pt，inなどで絶対指定すると，Win IEで文字サイズの変更が出来なくなるのをご存じの方も多いでしょう。文字サイズを固定してしまうのはアクセシビリティ上少々問題があります。font-sizeはem，ex，%で相対指定（基準になるものとの比率で指定）するのがよいとされています。

Win IE6には，font-sizeをem，exで指定した場合のバグがあるようです。

• CSSバグリスト - em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6)

それでぼくは，問題の少ない%を使って指定するようにしています。

• font-sizeの値は継承されるので，祖先要素をたどっていって最初に出てくる指定が継承されていることになります。
• %で指定した場合は「親要素のフォントサイズ」を基準として計算されます。
• 最初の基準はブラウザに設定した標準文字サイズになります。たいがいのブラウザはデフォルトで16pxになっています。

90%と指定した要素の祖先要素に90%の指定があり，そのさらに祖先要素に90%があれば0.9 × 0.9 × 0.9 = 0.729，最初の基準の0.729倍になるわけです。

ブラウザによって同じサイズにならないことがある

ブラウザによって微妙にフォントサイズが違ってくることがあります。確かめるために font-size のページを作ってみました。

<span style="font-size: 100%;">あいう亜以宇abcABC012 :100%</span><br />

これを1%きざみに50～200%まで並べただけのものです。代表的ないくつかのブラウザで表示させてみました。文字サイズが1pxずつ変わっていく様子が分かります。%で指定しても表示する際はpxの整数値に計算し直されているようです。その変わり目の数値がブラウザによって違うことも分かります。

100%と99%のところが境目になっています。93%，87%でサイズが小さくなります。

Mac Firefoxと同じです。99%，93%，87%でサイズが小さくなります。

これも上の2つと同じです。

上の3つとはサイズが小さくなるところが違います。96%，90%で変わります。

IE6と同じです。

IE6,7では96%だったところが97%になっています。

IE6,7と同じです。

たとえばfont-size: 86%;とした場合，16px × 0.86 = 13.76px となりますが，このときの端数の処理がブラウザによって違うようなのです。

• Mac Firefox2，Win Opera9，Mac Opera9は端数を切り捨てて13px。
• Win IE6,7，Win Firefox2，Safari2は四捨五入して14px。

Win Firefox2も四捨五入のようですが，Win IE，Safariとずれた箇所が出ます。このずれの原因は特定できないのですが。 97%を96.5%（四捨五入して97%になる最小値）として計算してみるとWin Firefox2の結果に一致しました。

ブラウザごとの差異が出ない%での指定値

これらの結果から，表示させたい文字サイズ（px）とブラウザごとの差異が出ない%での指定値を対応表にまとめてみました。

* IE6, 7では，文字コードをUTF-8以外の日本語コードShift_JISやEUC-JPにするか，font-familyで最初に日本語フォントを指定しないと，日本語フォントが指定どおりの大きさになりません。（この例の場合12pxになりました）

%による指定値は整数となるようにしましたが，88.5%というふうな指定も可能です。表内にないサイズやさらに詳しい値を計算したい方は以下を参考にしてください。

• 切り捨てても四捨五入しても同じ値になるのは小数点以下の端数が.0以上.5未満の場合です。
• 指定したい文字サイズ ÷ 標準文字サイズ = min
  ( 指定したい文字サイズ + 0.5 ) ÷ 標準文字サイズ = max
• min以上max未満の値を指定すればよいことになります。

body要素でfont-size: 90%;として14pxにし，メニュー部分はさらに小さい13pxにしたいときは，「0.9 × 新しい指定値」の値が0.82～0.84の間になるようにしてください。0.92（92%）や0.93（93%）なら大丈夫です。

これはあくまで，ブラウザの標準文字サイズが16pxに設定されていて，表示文字サイズが標準（中）の場合の話です。これらの設定が変更されたブラウザでは期待通りのフォントサイズにならないことは承知しておいてください。

関連

• ブラウザに依存せず文字の大きさを統一させる方法 || Cool Web Window
• 数で合理的にデザインする - サイズ編