font-size

概要

CSS の font-size プロパティはフォントのサイズを定義します。このフォントサイズは em と ex の <length> 単位の値の計算に使われるので、他の項目のサイズも変更する可能性があります。

構文

/* <absolute-size> 値 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size> 値 */
font-size: larger;
font-size: smaller;

/* <length> 値 */
font-size: 12px;
font-size: 0.8em;

/* <percentage> 値 */
font-size: 80%;

/* グローバル値 */
font-size: inherit;
font-size: initial;
font-size: unset;

値

xx-small, x-small, small, medium, large, x-large, xx-large

ユーザーの既定のフォントサイズ（medium）を基準とする絶対的サイズキーワード。HTML の <font size="1"> から <font size="7"> (ユーザの既定のフォントサイズが <font size="3"> であるとき) と同様の表示結果をもたらします。

larger、 smaller

上記の絶対的サイズキーワードのジャンプ率に概ね従う形で、親要素のフォントサイズに対するフォントサイズを一段階拡大ないし縮小します。

<length>

正の数の <length>。単位を em または ex で指定した場合、自身の親要素のフォントサイズを 1 とするサイズ比で定義されます。例えば「0.5em」と指定すれば、親要素のフォントサイズの半分のサイズとなるでしょう。単位を rem で指定した場合は、html (ルート) 要素で使用するフォントサイズに対して相対的なサイズを定義します。
【訳注: ただし多くのモダンブラウザが可読性保持の為に、ユーザーが指定できる「最小フォントサイズ」の設定項目を持っており、そのサイズを下回る場合、製作者の意図と異なるフォントサイズで描画される可能性がある事に注意して下さい。】

<percentage>

親要素のフォントサイズを基準とする相対値を正の数の <percentage> で指定します。

一番良いのは、em や ex 以外の単位の、ユーザーのデフォルトフォントサイズと相対的でない値の使用を控えることです。しかしながら、「相対的でない値」が必要なら、OS が考えるモニタ解像度 (たいてい誤っています) によって意味が変わらない px が、他の単位より好まれます。

形式文法

<absolute-size> | <relative-size> | <length> | <percentage>
where 
<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size> = larger | smaller

可能なアプローチ

フォントサイズの定義にはいくつかの方法があり、キーワードと数値（pixel や em の場合）が使われます。個々のウェブページで必要とされるものにあわせて、最適な方法を選んでください。

キーワード

キーワードはウェブのフォントサイズを決める良い方法です。body 要素のフォントサイズをキーワードで定義すると、ページのどこであってもフォントサイズを相対的に調整することができ、したがってページ全体のフォントサイズの拡大縮小が容易にできます。

px

ピクセル（px） を単位として用いる事で、よりピクセル精度の高いフォントサイズ指定出来ます。ピクセル値は静的な値であり、OS にも依存せず、クロスブラウザで同じピクセルサイズでの文字のレンダリングを実現出来ます。ブラウザによって、同じ効果を得るのに別のアルゴリズムが使われている可能性があるため、少し結果が異なるかもしれません。

フォントサイズの指定は異なる単位の併用によっても可能です。例えば親要素のフォントサイズを 16px 、子要素を larger とした場合、子要素のフォントサイズは親要素の 16px より大きくレンダリングされます。

Em

フォントサイズをセットするもう一つの方法は em 値を使うものです。em 値の大きさは動的です。font-size プロパティを定義するとき、1em はその要素の親要素で用いられているフォントサイズと一致します。ページ内でまだフォントサイズをセットしていなければ、ブラウザのデフォルト、おそらく 16px が使われます。したがって、デフォルトでは 1em = 16px であり、2em = 32px です。もし body 要素で font-size を 20px にセットすれば、1em = 20px で 2em = 40px です。本質的には、値の 2 が現在の em の大きさの乗数であることに注意してください。

必要な pixel 値に相当する em を計算するには、次の計算式を使えます:

em = 要素に設定したい pixel 値 / 親要素の pixel 単位でのフォントサイズ

例えば、body のフォントサイズが 1em にセットされているものとすると、ブラウザ標準の 1em = 16px です。使いたいフォントサイズが 12px なら、0.75em を指定します（12/16 = 0.75 だからです）。同様に、使いたいフォントサイズが 10px なら、0.625em を指定します（10/16 = 0.625）。22px なら 1.375em です（22/16）。

文書内どこでも使えるよく知られたテクニックとして、body のフォントサイズを 62.5% にすることで（これはデフォルト 16px の 62.5% です）、これは 10px、すなわち 0.625em になります。これで「px 値 を10で割る」という覚えやすい変換式を使って、どの要素にも em 単位でフォントサイズをセットできます。この方法では 6px = 0.6em、8px = 0.8em、12px = 1.2em、14px = 1.4em、16px = 1.6em になります。例を挙げます:

body {
  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}
span {
  font-size: 1.6em; /* 1.6em = 16px */
}

em は読者が選んだフォントに自動的に再調整されるため、CSS ではとても便利な単位です。

em 値が複合的であるということは、覚えておくべき重要な事実です。以下の HTML に、先ほどの CSS を適用してみましょう:

<div>
<span>Outer <span>inner</span> outer</span>
</div>

結果は以下のようになります:

ブラウザはデフォルトの font-size を 16px と考えており、単語 "outer" は 16px でレンダリングしますが、単語 "inner" は 25.6px でレンダリングします。これは、内側の span 要素の font-size が親要素の font-size に対して相対的な 1.6em であり、結果的にさらに親の要素の font-size に対して相対的になります。これは複合とよく呼ばれます。

rem

rem 値は、複合の問題を避けるために考案されました。rem 値は親要素ではなく、ルート html 要素に対して相対的です。言い換えると、親要素のサイズの影響を受けることなく相対的な方法でフォントサイズを指定できますので、複合が発生しません。

以下の CSS は、先ほどの例とほぼ同じです。唯一の違いは、単位を rem に変更したことです。

html {
  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}
span {
  font-size: 1.6rem;
}

この CSS を同じ HTML に適用すると、以下のようになります:

<span>Outer <span>inner</span> outer</span>

この例では、単語 "outer inner outer" はすべて 16px で表示されます (ブラウザの font-size はデフォルト値が 16px のままであるとします)。

例

Example 1

/* 段落のテキストを非常に大きなものにします */
p { font-size: xx-large }

/* h1 のフォントサイズを、周囲のテキストの 2.5 倍にします */
h1 { font-size: 250% }

/* span タグに囲まれたテキストを 16px にします */
span { font-size: 16px; }

Example 2

.small {
	font-size: xx-small;
}
.larger {
	font-size: larger;
}
.point {
	font-size: 24pt;
}
.percent {
	font-size: 200%;
}

<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>

Result

注意

em と ex 単位を font-size プロパティで使うと、「親要素の」フォントサイズに相対的な値になります（要素のフォントサイズに相対的な、他のどのプロパティとも異なります）。これは em 単位とパーセンテージが、font-size に関しては同じものであるということです。

仕様

ブラウザ毎の互換性

[1] Internet Explorer 9 および 10 は、この機能を部分的にサポートしています。