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: smaller;
font-size: larger;

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

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

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

font-size プロパティは、以下の何れかの方法で指定します。

  • 絶対的サイズのキーワードまたは相対的サイズのキーワードのうちの一つ
  • <length> または親要素のフォントサイズからの相対的な <percentage>

値

xx-small, x-small, small, medium, large, x-large, xx-large
ユーザーの既定のフォントサイズ (つまり medium) を基準とした絶対的なサイズのキーワードです。
larger, smaller
相対的なサイズのキーワードです。フォントは親要素のフォントサイズから相対的に、上記の絶対的サイズのキーワードで使われている倍率におよそ沿う形で拡大または縮小されます。
<length>

正の <length> の値。 (em や ex などの) フォント相対単位のほとんどは、親要素のフォントサイズに対する相対値です。

(rem などの) ルートを基準としたフォント相対単位では、フォントサイズは <html> (ルート) 要素で使われているフォントのサイズからの相対値です。

<percentage>

正の <percentage> 値で、親要素のフォントサイズからの相対値です。

メモ: アクセシビリティを最大化するために、一般的に最適なのは、ユーザーの既定のフォントサイズからの相対値を使用することです。

形式文法

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

可能なアプローチ

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

キーワード

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

ピクセル

ピクセル値 (px) でフォントサイズを設定することは、ピクセル精度が必要な場合に適しています。ピクセル値は静的です。これは OS にもブラウザーにも依存しない方法であり、ブラウザーに文字を指定した高さのピクセルの数値で描画することを厳密に指示します。ブラウザーによって、同じ効果を得るのに異なるアルゴリズムが使われている可能性があるため、結果は多少異なるかもしれません。

フォントサイズの指定を組み合わせることもできます。例えば親要素のフォントサイズを 16px 、子要素を larger とした場合、子要素のフォントサイズは親要素の 16px より大きくレンダリングされます。

メモ: フォントサイズを px で定義すると、ユーザーがブラウザーでフォントサイズを変更することができないため、アクセシブルはありません。例えば、弱視の人は、ウェブデザイナーが選んだサイズより大きなフォントにしたいかもしれません。こうした配慮のあるデザインをしたい場合は、フォントサイズにピクセルを使わないようにしてください。

em

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

必要なピクセル値に相当する 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)。

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

em 値が複合的であるということは、覚えておくべき重要な事実です。以下の HTML と CSS をご覧ください。

html { 
  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ 
} 
span { 
  font-size: 1.6em; 
}
<div>
<span>Outer <span>inner</span> outer</span>
</div>

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

ブラウザーの既定の font-size が 16px と仮定すると、単語 “outer” は 16px で描画され、単語 “inner” は 25.6px で描画されます。これは、内側の <span> 要素の font-size は 1.6em ですが、これは親要素の font-size からの相対値で、さらにその親要素の font-size からの相対値になるからです。これはよく複合 (compounding) と呼ばれます。

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 のままであるとします)。

例

例 1

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

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

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

例 2

CSS

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

HTML

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

結果

メモ

em と ex の単位を 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 の定義		 勧告 初回定義
初期値medium
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
パーセンテージ 親要素の font-size
メディア視覚
計算値指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの種類length
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
font-sizeChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 5.5Opera 完全対応 7Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
rem valuesChrome 完全対応 31Edge 完全対応 12Firefox 完全対応 31
補足
完全対応 31
補足
補足 Before Firefox 57, animations using em units are not affected by changes to the font-size of the animated element's parent (bug 1254424).
補足 Before Firefox 57, some language settings' inherited font-size is smaller than expected (bug 1391341).
IE 完全対応 11
完全対応 11
未対応 9 — 10
Opera 完全対応 28Safari 完全対応 7WebView Android 完全対応 4.1Chrome Android 完全対応 42Firefox Android 完全対応 31Opera Android 完全対応 28Safari iOS 完全対応 7Samsung Internet Android 完全対応 4.0
xxx-large keywordChrome 完全対応 79Edge 完全対応 79Firefox 完全対応 70IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 79Chrome Android 完全対応 79Firefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
関連トピック