We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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;

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

構文

font-size プロパティは、以下の 2 つの方法のいずれかで使用します:

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

可能なアプローチ

フォントサイズの定義にはいくつかの方法があり、キーワードと数値 (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)。

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

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

Live Sample

注意

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

ブラウザー実装状況

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

11

9 — 10

287
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1112461 あり
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).

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

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