CSS font-size

CSSのfont-sizeプロパティを使って、HTML文書におけるフォントのサイズを指定することができます。フォントのサイズは絶対値、相対値または数値と単位で指定します。フォントのサイズはCSSのfontプロパティで指定することもできます。

font プロパティでも文字の大きさを指定できる。

書式

font-size: absolute

font-size: relative

font-size: length

font-size: clamp(min, val, max)

属性

absolute

フォントの大きさ以下に示す絶対値で指定する。

フォントサイズ（絶対値）

値	意味	スケール	見出し
xx-small	極小	0.6	h6
x-small	小さい	0.75
small	やや小さい	8/9	h5
medium	通常（規定値）	1	h4
large	やや大きい	1.2	h3
x-large	大きい	1.5	h2
xx-large	極大	2	h1

フォントのサイズを絶対値で指定する例を以下に示す。

<p style="font-size: xx-small">xx-small</p>
<p style="font-size: x-small">x-small</p>
<p style="font-size: small">small</p>
<p style="font-size: medium">medium</p>
<p style="font-size: large">large</p>
<p style="font-size: x-large">x-large</p>
<p style="font-size: xx-large">xx-large</p>
      

xx-small

x-small

small

medium

large

x-large

xx-large

relative

親要素のフォントサイズに対する相対値でフォントのサイズを指定する。

フォントサイズ（相対値）

値	意味
smaller	親要素のフォントサイズより小さい
larger	親要素のフォントサイズより大きい

フォントのサイズを相対値で指定する例を以下に示す。

<p style="font-size: smaller">smaller</p>
<p style="font-size: larger">larger</p>

smaller

larger

length

フォントのサイズを数値と単位で指定する。以下に示す単位を利用できる。

単位

単位	意味	説明
em	font-size	現在のフォントサイズ
ex	x-height	xの高さ
rem	root em	ドキュメントのルート要素のフォントサイズ
cm	centimeters	1cm
mm	millimeters	1mm
Q	級 (quarter-millimeters)	0.25mm
in	inches	1 inch
pc	picas	1/6 inch
pt	points	1/72 inch
px	pixels	1/96 inch
%	percent	パーセント
vw	viewport width	ビューポートの幅の1/100
vmin	minimum viewport	ビューポートの幅または高さで小さい方の1/100
vmax	maximum viewport	ビューポートの幅または高さで大きい方の1/100

フォントのサイズを相対値で指定する例を以下に示す。

<p style="font-size: 62.5%">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

clamp()

フォントのサイズをレスポンシブにする。

フォントサイズの指定に単位 vw を使うと、スマホのような小さい画面では小さい文字、デスクトップパソコンのような大きい画面では大きい文字にすることができる。 ただし、下限と上限がないため、画面のサイズによってはフォントのサイズが小さすぎたり、大きすぎたりする。clamp 関数を使うと、最小値と最大値を指定することができる。

font-size: clamp(min, val, max)

min

最小のフォントサイズ

val

デフォルトのフォントサイズ

max

最大のフォントサイズ

画面のサイズに応じてフォントのサイズを可変にする例を以下に示す。

<p style="font-size: clamp(16px, 3vw, 32px)">
  The quick brown fox jumps over the lazy dog.
</p>

The quick brown fox jumps over the lazy dog.

参考文献

World Wide Web Consortium (2018) CSS Fonts Module Level 3

World Wide Web Consortium (2021) CSS Values and Units Module Level 4