font-size

CSSfont-size プロパティはフォントの大きさを定義します。フォントの大きさを変更すると、フォントの大きさに相対的な <length> の単位例えば em, ex, なども更新されます。

構文

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

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

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

<percentage>

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

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

解説

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

キーワード

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

ピクセル

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

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

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

em

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

必要なピクセル値に相当する em は、次の式で計算することができます。

em = 要素に設定したい 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 ではとても便利な単位です。

emex の単位が font-size プロパティで用いられると、親要素のフォントサイズからの相対になります (要素のフォントサイズからの相対値を使用する他のプロパティとは異なります)。すなわち、 em の単位やパーセント値は font-size の場合と同様です。

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 は既定値が 10px のままであるとします)。

公式定義

初期値medium
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承あり
パーセント値 親要素の font-size に対する相対値
計算値指定通り。ただし相対的な長さはは絶対的な長さに変換される
アニメーションの種類length

形式文法

<absolute-size> | <relative-size> | <length-percentage>

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

フォントサイズの設定

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>

結果

仕様書

仕様書 状態 備考
CSS Fonts Module Level 4
font-size の定義
草案 xxx-large キーワードを追加
CSS Fonts Module Level 3
font-size の定義
勧告 変更なし
CSS Level 2 (Revision 1)
font-size の定義
勧告 変更なし
CSS Level 1
font-size の定義
勧告 初回定義

ブラウザーの互換性

BCD tables only load in the browser