font-sizeはpxやptなどで指定するとIEで拡大、縮小ができないので、パーセントなどで指定することが多いと思います。しかし、パーセントで指定すると、ブラウザごとに大きさが違ったりします。そこで、基本サイズが12px～16pxのときに10px～26px相当を表示するパーセントの数値を計算して、各ブラウザで確認したものをまとめました。

注意点

これは僕が自分で確認できる環境でのみ動作確認を行っています。動作確認したブラウザは以下になります。

Windows

• IE6
• IE7
• Firefox2.0.0.14
• Opera9.27
• safari3.1
• Netscape7.01

Mac

• Firefox2.0.0.14
• Opera9.27
• Safari3.1.1
• Safari2.0.4
• IE5.2

計算式は以下のとおりです。小数点以下は四捨五入するとブラウザ間で差異でるようなので、切り上げることで対応しました。

表示したいサイズ / 基本サイズ * 100 （小数点以下切り上げ）

font-sizeのパーセント表記一覧表

そんな感じで計算した結果が下記です。CSSファイルの最初とかにこの対応表を書いておくと便利かなーとか思います。

基本サイズ12px

表示したいサイズ	指定する値
10px	84%
11px	92%
12px	100%
13px	109%
14px	117%
15px	125%
16px	134%
17px	142%
18px	150%
19px	159%
20px	167%
21px	175%
22px	184%
23px	192%
24px	200%
25px	209%
26px	217%

基本サイズ13px

表示したいサイズ	指定する値
10px	77%
11px	85%
12px	93%
13px	100%
14px	108%
15px	116%
16px	124%
17px	131%
18px	139%
19px	147%
20px	154%
21px	162%
22px	170%
23px	177%
24px	185%
25px	193%
26px	200%

基本サイズ14px

表示したいサイズ	指定する値
10px	72%
11px	79%
12px	86%
13px	93%
14px	100%
15px	108%
16px	115%
17px	122%
18px	129%
19px	136%
20px	143%
21px	150%
22px	158%
23px	165%
24px	172%
25px	179%
26px	186%

基本サイズ15px

表示したいサイズ	指定する値
10px	67%
11px	74%
12px	80%
13px	87%
14px	94%
15px	100%
16px	107%
17px	114%
18px	120%
19px	127%
20px	134%
21px	140%
22px	147%
23px	154%
24px	160%
25px	167%
26px	174%

基本サイズ16px

表示したいサイズ	指定する値
10px	63%
11px	69%
12px	75%
13px	82%
14px	88%
15px	94%
16px	100%
17px	107%
18px	113%
19px	119%
20px	125%
21px	132%
22px	138%
23px	144%
24px	150%
25px	157%
26px	163%

基本サイズについて

一応、基本サイズについても触れておきます。基本サイズとはここではサイトのデフォルトのfont-sizeのことを指しています。一般的にはbodyにfont-sizeを指定します（下記は12pxの場合）。

body {
    font-size: 12px;
}

/* for IE6 */
* html body {
    font-size: 75%;
}

/* for IE7 */
*:first-child+html body {
    font-size: 75%;
}

各pxに対応する、IEハックで指定するパーセントの値は以下のとおりです。

基本サイズ	値
12px	75%
13px	82%
14px	88%
15px	94%
16px	100%

これは余談ですが、一般的にfont-sizeを指定しないときのブラウザのデフォルトサイズは16pxです。しかしMacのFirefox2のデフォルトサイズが14pxなので、基本サイズを16pxにする場合もちゃんと指定したほうがいいです。確かFirefox3ではMac版もデフォルト16pxになると聞いたような聞いてないような。

Yahoo UIのfonts.cssについて

ぶっちゃけ、Yahoo!UIのfonts.cssを使えば？話なんですよね。fonts.cssはすごく便利だと思うし、僕も今まで何度もお世話になりました。でも、基本サイズが13px以外のときで微妙に面倒だったり、CSSがValidじゃなかったり、諸事情により使えない状況もあるので、今回はfonts.cssには頼らずにコーディングする場合の話です。