CSSを使ってどのブラウザでもフォントサイズを「％」で統一させる方法

CSSによるフォントサイズの指定は「font-size」属性を使って簡単に設定することができますが、ピクセル指定などの絶対的サイズで統一する方法にくらべて非常にやっかいなのが、相対的なサイズによるサイズの統一です。

ブラウザによって異なる、フォントサイズの境界

例えば「font-size:70%」というふうに指定して、Internet Explorer 6とFirefox2.0で見てみたページが以下のようなものです。　※ページはxmlタグつきのXHTML1.0 Strictで作成、つまりInternet Explorer6は下位互換モードで表示されていますが、標準モードでも同じサイズで表示されます。

あきらかにFirefoxで表示されたページのフォントサイズが小さくなっていることがわかります。　このように、フォントをパーセント指定した場合は、その数値によってフォントサイズを規定する境界に微妙なずれがあり、WEBページの製作者はこの点を理解してフォントのサイズを指定する必要があります。

と煽っておいてなんですが、手軽に指定する方法があります。　それはYahoo! User Interface Library（通称「YUI」）というJavaScriptのライブラリ内で利用されているcssfonts.cssの中のフォントサイズチャートに倣って指定すれば良いのです。

準備

まず、基本となるフォントサイズを指定します。　YUIに倣うと、bodyタグとtableタグへのスタイル追加で以下のような指定を行います。　でもこれでは日本語フォントをサポートしている指定方法ではないので、デフォルトでは「ＭＳ Ｐゴシック」を適用させるようにしておきます。　これによって、基本となるフォントサイズ（font-size:100%）が13ピクセルになります。　　基本フォントがゴシック系になってしまうのが難点ですが。。
2014/11/2 YUI3.x用に更新しました。

body {
    font: 13px/1.231 "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;
}
select, input, button, textarea {
    font: 99% "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;
}
table {
    font-size: inherit;
}
pre, code, kbd, samp, tt {
    font-family: monospace;
    line-height: 100%;
}

CSSフォントサイズチャート

次に、Yahoo!開発チームが検証した「フォントサイズをピクセル指定からパーセント指定にした場合に何パーセントになるか」のチャートに従って、パーセンテージを指定します。　以下のチャートは独自にルーラーを付加したバージョンです。　ピクセル数に対する幅の一致をお持ちのブラウザごとに確認してみてください。　ブラウザごとでも幅が一致していることがお分かりでしょうか。

小数点第一位までこだわる辺り、プロだなといった感じです。　また新たに奇妙なブラウザが登場したら更新されるかもしれません。　ひとまず現状ではこれで大丈夫なようです。

動作確認： IE7, IE6, Firefox2, Safari3, Opera9

追記：Opera9では22pixel以降の%指定で若干小さく表示される、という問題が発生しています。参考にされる場合はご注意を。（解決案をご存知の方はお知らせいただけると幸いです。）

簡単にまとめてみた

サイズ指定もこんな感じでクラスにしておくと便利ですね。

body {
    font: 13px/1.231 "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;
}
select, input, button, textarea {
    font: 99% "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif;
}
table {
    font-size: inherit;
}
pre, code, kbd, samp, tt {
    font-family: monospace;
    line-height: 100%;
}
.text10 { font-size:77%; }
.text11 { font-size:85%; }
.text12 { font-size:93%; }
.text13 { font-size:100%; }
.text14 { font-size:108%; }
.text15 { font-size:116%; }
.text16 { font-size:123.1%; }
.text17 { font-size:131%; }
.text18 { font-size:138.5%; }
.text19 { font-size:146.5%; }
.text20 { font-size:153.9%; }
.text21 { font-size:161.6%; }
.text22 { font-size:167%; }
.text23 { font-size:174%; }
.text24 { font-size:182%; }
.text25 { font-size:189%; }
.text26 { font-size:197%; }