概要

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

初期値medium
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承継承する
相対値の基準 親要素の font-size
メディアvisual
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの可否可。 の値として補完します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"> であるとき) と同様の表示結果をもたらします。
largersmaller
上記の絶対的サイズキーワードのジャンプ率に概ね従う形で、親要素のフォントサイズに対するフォントサイズを一段階拡大ないし縮小します。
<length>
正の数の <length>。単位を em または ex で指定した場合、自身の親要素のフォントサイズを 1 とするサイズ比で定義されます。例えば「0.5em」と指定すれば、親要素のフォントサイズの半分のサイズとなるでしょう。単位を rem で指定した場合は、html (ルート) 要素で使用するフォントサイズに対して相対的なサイズを定義します。
【訳注: ただし多くのモダンブラウザが可読性保持の為に、ユーザーが指定できる「最小フォントサイズ」の設定項目を持っており、そのサイズを下回る場合、製作者の意図と異なるフォントサイズで描画される可能性がある事に注意して下さい。】
<percentage>
親要素のフォントサイズを基準とする相対値を正の数の <percentage> で指定します。

一番良いのは、emex 以外の単位の、ユーザーのデフォルトフォントサイズと相対的でない値の使用を控えることです。しかしながら、「相対的でない値」が必要なら、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 より大きくレンダリングされます。

注意: フォントサイズを pixel で定義することは、アクセシブルではありません。ユーザーがブラウザからそのサイズを変えられないためです(例えば、視力の不自由な方は、ウェブデザイナーが選んだサイズより大きなフォントにしたいかもしれません)。こうした配慮のあるデザインをしたい場合は、フォントサイズに pixel を使わないようにしてください。

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

注意

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

仕様

仕様書 策定状況 コメント
CSS Fonts Module Level 3
font-size の定義
勧告候補 変更なし
CSS Transitions
font-size の定義
草案 font-size をアニメーション可能として定義
CSS Level 2 (Revision 1)
font-size の定義
勧告 変更なし
CSS Level 1
font-size の定義
勧告 最初期の定義

ブラウザ毎の互換性

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 1.0 (1.7 or earlier) 5.5 7.0 1.0
Rem 値 31.0 31.0 9[1]
11
28.0 7.0
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 1.0 1.0 1.0 (1) 6.0 6.0 1.0
Rem 値 4.1 42 ? ? ? ?

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

ドキュメントのタグと貢献者

 このページの貢献者: yyss, Sebastianz, Prinz_Rana, SphinxKnight, fscholz, teoli, ethertank, sosleepy
 最終更新者: yyss,