W3G

絶対サイズ指定

xx-small

超極小

x-small

極小

small

小

medium

標準

large

大

x-large

特大

xx-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要素との対照表を参照するように推奨されています。

相対サイズ指定

smaller

より小さく

larger

より大きく

相対サイズ指定とは親要素のフォントサイズを基準に対する比率で指定する方法です。たとえば親要素のフォントサイズが "medium" の場合に、当該要素に "larger" を指定すると、そのフォントサイズは "large" が指定されているものとして解釈します。あるいは当該要素に "smaller" を指定すると、そのフォントサイズは "small" として解釈します。

font-sizeプロパティの実装状況

IE

◯：IE6は絶対サイズの7段階ある内の1段階大きく表示されるキーワードごとに標準準拠（standard）モードでは1.2倍、後方互換（quirk）モードでは1.5倍の比率で表示する。また、IE6,7ともに12px以下のフォントサイズにfont-familyで和文フォント指定が含まれていない場合、1px相当フォントサイズを大きく表示させる振る舞いをする

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

IE6,7では、フォントサイズの実装に問題を多く抱えています（IE8も後方互換モードの場合に問題が起ります）。IE9からはサブピクセルレンダリングが採用され、細かなフォントサイズの調節まで可能になっています。

IE6でフォントサイズの実装にバラつきがあるのは、後方互換のためで、絶対サイズの7段階ある内の1段階大きく表示されるキーワードごとに CSS1仕様では1.5倍、CSS2仕様では1.2倍の比率となる実装が推奨されていました。このためキーワードによる指定を行うと、とても古いUAでは1.5倍の比率で表示し、CSS2.0に適合するUAでは1.2倍の比率で表示するといったようにキーワードによる指定はUAに応じて文字の大きさに違いがでる問題を抱えていました。（レンダリングモードの切り替わりについては !DOCTYPE スイッチを参照）。そこでCSS2.1仕様では絶対サイズのフォントサイズについては参照表に基づいた実装をするように改善されました。

なお、UAごとの実装の違いや多用なデバイスへの対応を考えるとフォントサイズはパーセンテージ値で指定しておくのが最も無難です。

サンプル

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 ; }