font-sizeプロパティは文字の大きさ(フォントサイズ)を指定します。値には "em", "px" などの単位識別子を伴う数値の長さやパーセンテージ値(%)による割合(長さもパーセンテージ値も負の値は不正)、または絶対サイズと相対サイズの2種類のキーワードが指定できます。
mediumfont-sizeプロパティに指定できるキーワードには、次の絶対サイズと相対サイズの2種類あります。ただし、CSS1 の仕様と CSS2 の仕様において絶対サイズの7段階ある内の1段階大きく表示されるキーワードごとに CSS1 では1.5倍、CSS2 では1.2倍の比率となる実装が推奨されていたため、キーワードによる指定を行うと、バージョンの古い UA は1.5倍の比率で表示し、CSS2.0 に適合する UA では1.2倍の比率で表示するといったようにキーワードによる指定は UA によって文字の大きさに違いがでる問題があります。さらに Windows版Internt Explorer 6 と Macintosh版Internet Explorer 5 においてはレンダリングモードによってもサイズが異なり、標準準拠(standard)モードでは1.2倍、後方互換(quirk)モードでは1.5倍の比率で表示される実装となっています(レンダリングモードの切り替わりについては !DOCTYPE スイッチを参照ください)。
xx-smallx-smallsmallmediumlargex-largexx-large絶対サイズ指定とは直接大きさを指定する方法です。各キーワードのサイズは UA に設定されているフォントサイズの対照表を参照します。"medium" を標準サイズとして、最も小さいサイズである "xx-small" から最も大きいサイズの "xx-large" まで7つのキーワードが用意されています。CSS1 の仕様では7段階ある内の1段階大きく表示されるキーワードごとに1.5倍の比率となる実装が推奨されていましたが、CSS2 の仕様では1段階大きくなるごとに1.2倍の比率となる実装が推奨されていました。しかし、改訂版の CSS2.1 の仕様では1.5倍や1.2倍といった固定比率は推奨しないと見直され、UA は下記の h1-h6要素、および font要素との対照表を参照するように推奨されています。
| 絶対サイズ | xx-small | x-small | small | medium | large | x-large | xx-large | |
|---|---|---|---|---|---|---|---|---|
| h1-h6要素 | h6 | h5 | h4 | h3 | h2 | h1 | ||
| font要素 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | |
| パーセンテージ | 60% | 75% | 88.8% | 100% | 120% | 150% | 200% | 300% |
相対サイズ指定とは親要素のフォントサイズを基準に対する比率で指定する方法です。たとえば親要素のフォントサイズが "medium" の場合に、当該要素に "larger" を指定すると、そのフォントサイズは "large" が指定されているものとして解釈します。あるいは当該要素に "smaller" が指定すると、そのフォントサイズは "small" として解釈します。
ul li { font-size : medium ; }
.xx-small { font-size : xx-small ; }
.x-small { font-size : x-small ; }
.small { font-size : small ; }
.large { font-size : large ; }
.x-large { font-size : x-large ; }
.xx-large { font-size : xx-large ; }
.larger { font-size : larger ; }
.smaller { font-size : smaller ; }
Windows版Internet Explorer 6 やその他バージョンの古い UA において絶対サイズ指定のキーワードや "em", "px" などの単位識別子を伴う長さによる指定は問題点が多いため、フォントサイズはパーセンテージ値以外の使用を避けた方が無難です。