Updated / Published

font-sizeプロパティは文字の大きさ(フォントサイズ)を指定します。値には "em", "px" などの単位識別子を伴う数値の長さパーセンテージ値%)による割合(長さもパーセンテージ値も負の値は不正)、または絶対サイズと相対サイズの2種類のキーワードが指定できます。

初期値
medium
適用対象
すべての要素
継承
する
メディア
visual

font-sizeプロパティに指定できるキーワードには、次の絶対サイズと相対サイズの2種類あります。

絶対サイズ指定

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

CSS2.1 での絶対サイズ指定キーワードのフォントサイズ対照表
絶対サイズ 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%

相対サイズ指定

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