CSSfont-size プロパティはフォントのサイズを定義します。この値は emex、及び様々なその他の相対的な <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>

Values

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

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

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

<percentage>

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

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

形式文法

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

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

可能なアプローチ

フォントサイズの定義にはいくつかの方法があり、キーワードと数値 (pixel や 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 の大きさの乗数であることに注意してください。

必要な 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)。

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

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

結果

メモ

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 の定義
勧告 初回定義

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

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応11215.571
Rem values3112311 2

11

9 — 10

287
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応11812461 あり
Rem values4.142123112 あり4.0

1. Before Firefox 57, animations using em units are not affected by changes to the font-size of the animated element's parent (bug 1254424).

2. Before Firefox 57, some language settings' inherited font-size is smaller than expected (bug 1391341).

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

最終更新者: mfuji09,