font-size

font-size プロパティは、フォントのサイズ、つまり高さを指定します。

p { font-size: 20px;}

font-size は、適用されるフォントに影響を与えるだけでなく、em、rem、exの長さ単位の値を計算するためにも使用されます。 ただし、fontfont-size は必須の値であることに注意してください。

font-sizeに適用される長さの値（px、em、rem、exなど）には、負の値を設定することはできません。

絶対的なキーワードと値

.element { font-size: small;}

以下のような絶対的なキーワードの値を受け付けます。

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

これらの絶対値は、ブラウザで計算された特定のフォントサイズにマッピングされます。 しかし、親要素のフォントサイズに相対する2つのキーワード値を使用することもできます。

その他の絶対値としては、mmcminptpc（ピカ）となります。 1ポイントは1/72インチに相当し、1picaは12ポイントに相当します。これらの値は通常、印刷文書に使用されます。

相対的なキーワード

.element { font-size: larger;}

• larger
• smaller

例えば、親要素にフォントサイズが指定されているとします。 親要素のフォントサイズがsmalllargermediumと等しくなります。

パーセンテージ値

.element { font-size: 110%;}

font-sizeを110%にするなどのパーセンテージ値も、以下のデモのように親要素のフォントサイズからの相対値となります:

CodePenのCSS-Tricks(@css-tricks)によるPen qdbELLをご覧ください。

em単位

.element { font-size: 2em;}

em単位は、親要素のフォントサイズの計算値を基にした相対的な単位です。 つまり、子要素のフォントサイズの設定は、常に親要素に依存することになります。

<div class="container"> <h2>This is a heading</h2> <p>This is some text.</p></div>

.container { font-size: 16px;}p { font-size: 1em;}h2 { font-size: 2em;}

上記の例では、段落のフォントサイズは1×16=16pxであるのに対し、見出しのフォントサイズは2×16=32pxとなっています。

See the Pen Figuring out how the em unit works by CSS-Tricks (@css-tricks) on CodePen.

remユニット

ただし、remユニットの場合は、フォントサイズがルート要素（またはhtml要素）の値に依存します。

html { font-size: 16px;}p { font-size: 1.5rem;}

上記の例では、rem単位は16pxに等しいため（html/root要素から継承されるため）、すべての段落要素のフォントサイズは24px（1.5 x 16 = 24）と計算されます。 emユニットとは異なり、パラグラフはルート以外の親のスタイルを無視します。

このユニットは以下のブラウザでサポートされています。

th th

です。 です。

Chrome	Safari	Firefox	Opera	IE	Android	iOS
ワークス	ワークス	10+	ワークス

EXユニット

.element { font-size: 20ex;}

EXユニットの場合。 1exは、ルート要素の小文字のxの計算された高さと同じになります。 したがって、以下の例では、html20pxに設定され、他のすべてのフォントサイズは、その特定のフォントのx-heightによって決定されます。

See the Pen Figuring out how the ex unit works by CSS-Tricks (@css-tricks) on CodePen.

上のデモで、font-familyhtml要素に置き換えて、他のフォントサイズがどのように変化するかを実験してみましょう。

ビューポート単位

.element-one { font-size: 100vh;}.element-two { font-size: 100vw;}

vwvhなどのビューポート単位は、ビューポートの寸法に合わせて要素のフォントサイズを設定します。

• 1vw = ビューポートの幅の1%
• 1vh = ビューポートの高さの1%

それでは、次のような例を考えてみましょう。

.element { font-size: 100vh;}

そうすると、要素の font-size は常にビューポートの高さの 100% であるべきだということになります (50vh は 50%、15vh は 15% というように)。

See the Pen Sizing type with vh units by CSS-Tricks (@css-tricks) on CodePen.

vw 単位は、文字の高さをビューポートの幅で設定するという点で異なり、以下のデモでは、これらの変更を確認するためにブラウザのウィンドウを水平にリサイズする必要があります:

CodePenのCSS-Tricks (@css-tricks)によるvw単位のPen Sizingタイプをご覧ください。

これらの単位は、以下のブラウザでサポートされています。

Chrome	Safari	Firefox	Opera	IE	Androidth	iOS
31+	7+	31+	27+	9+	4.4+	7.1+

他にも2つのビューポート単位があることに注意しましょう。 vminvmaxvhvwvmax でフォントサイズをこの 2 つの値のうちの最大のものに設定します。

chユニット

.element { font-size: 24ch;}

chex ユニットと同様に、フォントの0（ゼロ）グリフの幅に関連して要素のフォントサイズを設定します。

The Pen Sizing type with ch units by CSS-Tricks (@css-tricks) on CodePenをご覧ください。

このユニットには以下が対応しています。

Chrome	Safari	Firefox	Opera	IE	Android	iOS
27+	Works	10+	Works	9+	Works

関連するプロパティ

• font
• font-?family
• font-stretch
• font-style
• font-variant
• font-weight