font-size:フォントの大きさを指定する

初期値 none
適用対象 全ての要素、::first-letterおよび::first-line
継承 する
アニメーション <length>値
対応ブラウザ caniuseで確認

font-sizeプロパティの説明

font-sizeは、ブラウザに表示される文字の大きさ、つまりフォントサイズを指定します。通常はブラウザの既定値で自動的に文字の大きさが決まりますが、これを変更したい箇所に任意のフォントサイズを適用できます。

ここで指定された値は、その効果が継承する範囲を含めてemexといった<length>値の基準になります。

font-sizeに指定できる値

<absolute-size>
既定のフォントサイズを基準とした大きさを表す絶対的なキーワード値です。サイズは全8段階用意されています。
  • xx-small:超極小サイズを表します
  • x-small:極小サイズを表します
  • small:小サイズを表します
  • medium:既定サイズを表します
  • large:大サイズを表します
  • x-large:極大サイズを表します
  • xx-large:超極大サイズを表します
  • xxx-large:超々極大サイズを表します
<relative-size>
親要素が持つフォントサイズを基準に、それよりも大きいか小さいかを表す相対的なキーワード値です。
  • smaller:一段小さいサイズを表します
  • larger:一段大きいサイズを表します
<length>
CSSで指定できる寸法を表すデータ型の値です。ピクセル、インチ、メートル法の単位による絶対値や、フォントサイズやビューポートの大きさを基準とした相対値が使用できます。負の数値は扱えません。
<percentage>
親要素のフォントサイズに対する相対的な大きさを割合で指定します。

font-sizeの使い方とサンプル

font-sizeプロパティの構文は以下の通りです。

CSS
/* <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: 16px;
font-size: 1em;
font-size: 1.5rem;

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

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

font-sizeの実例

それでは実際にfont-sizeプロパティの書き方を見ていきましょう。以下の例は、使用中のブラウザのフォントサイズを基準にして、font-sizeの値を変えた場合にどのように表示されるのかを比較したものです。

表示確認
CSS
.samp_box {
	overflow: auto;
	width: 100%;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box p {
	margin: 1rem 0 0;
	padding: .3rem;
	background: #fff;
}
#fs_m {
	font-size: medium;
}
#fs_xxs {
	font-size: xx-small;
}
#fs_xs {
	font-size: x-small;
}
#fs_s {
	font-size: small;
}
#fs_l {
	font-size: large;
}
#fs_xl {
	font-size: x-large;
}
#fs_xxl {
	font-size: xx-large;
}
#fs_xxxl {
	font-size: xxx-large;
}
HTML
<section class="samp_box">
	<p id="fs_m">これが基準となるフォントサイズです。</p>
	<p id="fs_xxs">font-size: xx-small;</p>
	<p id="fs_xs">font-size: x-small;</p>
	<p id="fs_s">font-size: small;</p>
	<p id="fs_l">font-size: large;</p>
	<p id="fs_xl">font-size: x-large;</p>
	<p id="fs_xxl">font-size: xx-large;</p>
	<p id="fs_xxxl">font-size: xxx-large;</p>
</section>

相対的なフォントサイズの指定

続いて、親要素のフォントサイズを基準にした相対的な指定のサンプルです。この場合は、共通の値を子要素に指定しても親要素のフォントザイズによって結果が変わります。

表示確認
CSS
.samp_box {
	overflow: auto;
	width: 100%;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > p {
	margin: 1rem 0 0;
	padding: .3rem;
	background: #fff;
}
#fs_m {
	font-size: medium;
}
#fs_xs {
	font-size: x-small;
}
#fs_xl {
	font-size: x-large;
}
#fs_ser {
	font-size: smaller;
}
#fs_ler {
	font-size: larger;
}
HTML
<section class="samp_box" id="fs_m">
	<p>基準値:medium</p>
	<p id="fs_ser">font-size: smaller;</p>
	<p id="fs_ler">font-size: larger;</p>
</section>
<section class="samp_box" id="fs_xs">
	<p>基準値:x-small</p>
	<p id="fs_ser">font-size: smaller;</p>
	<p id="fs_ler">font-size: larger;</p>
</section>
<section class="samp_box" id="fs_xl">
	<p>基準値:x-large</p>
	<p id="fs_ser">font-size: smaller;</p>
	<p id="fs_ler">font-size: larger;</p>
</section>

フォントサイズの継承が重なった時に起こる複合

相対値でフォントサイズを指定すると、継承された値を参照していくため、それが重なって複合(compounding)する場合があります。これは不具合ではありませんが、よく理解しておかないと意図しない箇所で文字の大きさが乱れます。

例えば、入れ子にした要素に同じ相対値を重ねて指定した場合は、一つ前に変更が加えられた大きさを元に、さらに変更が加えられるため、より大きな文字が表示されたり小さな文字が表示されます。

表示確認
CSS
.samp_box {
	overflow: auto;
	width: 100%;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box div {
	margin: 1rem 0 0;
	padding: .5rem;
	border: 1px solid #ccc;
	background: #fff;
}
#fs_m {
	font-size: medium;
}
#fs_up {
	font-size: 1.2em;
}
#fs_down {
	font-size: 0.8em;
}
HTML
<section class="samp_box" id="fs_m">
	<div>1階層目:font-size: medium;
		<div id="fs_up">2階層目:font-size: 1.2em;
			<div id="fs_up">3階層目:font-size: 1.2em;</div>
		</div>
	</div>
</section>
<section class="samp_box" id="fs_m">
	<div>1階層目:font-size: medium;
		<div id="fs_down">2階層目:font-size: 0.8em;
			<div id="fs_down">3階層目:font-size: 0.8em;</div>
		</div>
	</div>
</section>

複合を回避できるremによるフォントサイズの指定

親要素のフォントサイズではなく文書のルート要素に対して相対的な値を取るremは、複合を回避する目的で考案されました。複合は上手く使えば便利な機能ではあるのですが、複雑な入れ子構造のサイトや複数の開発者が関わるプロジェクトには不向きでした。

remを使うと、常に参照する値が決まっているため、親要素のフォントサイズが変わったとしても、期待した文字の大きさを表示させやすくなります。

先ほどのサンプルで使用していたfont-sizeの単位を、emからremに変えてみましょう。こうすることで、同じ値を指定した要素の文字列は入れ子になっていたとしてもルート要素である<html>のフォントサイズを基準にします。

表示確認

font-sizeに関連するCSSプロパティ

フォント・文字色
color 文字の色を指定する
font フォントに関する様々な機能を一括で指定する
font-family 文字フォントの種類を指定する
font-feature-settings OpenTypeフォントの拡張書体の特性を制御する
font-kerning フォントの文字詰め(カーニング)を制御する
font-language-override 文字を表示する祭に使用する言語情報を一時的に変更する
font-size 文字フォントの大きさを指定する
font-size-adjust 現在のフォントサイズを基準に小文字の大きさを相対的に調整する
font-stretch 表示させるフォントの幅広や幅狭のフェイスを指定する
font-style フォントを筆記体や斜体で表示するかどうかを指定する
font-synthesis 太字や斜体に対応していないフォントの加工を制御する
font-variant フォントの表示形式やブラウザの合成規則を一括で指定する
font-variant-alternates 文字フォントの代替字体(グリフ)の選定を制御する
font-variant-caps 文字列に適用されるキャピタライゼーションルールを制御する
font-variant-east-asian 東アジアの言語で使われる字体を制御する
font-variant-ligatures 隣り合った文字フォントの合字(リガチャ)を制御する
font-variant-numeric 数値に関する文字表記を制御する
font-variant-position 上付き文字や下付き文字として配置されるべき字体の使用を制御する
font-weight 文字フォントの太さを指定する