<length>長さの値
pxは固定の長さ、remはルート要素、emは親要素の文字サイズを基準にします。
font-size
文字の大きさを決めるプロパティ。値を変えると、同じ文章の見え方や占める広さがどう変わるかを確かめられます。
遊んでみよう
親要素から子要素へ継承
Aa見てわかるCSS
CSS
.element font-size: 32px;
値のパターン
font-sizeの構成要素
<percentage>親要素に対する割合
125%なら、親要素から継承した文字サイズの1.25倍になります。
medium | larger | smaller大きさのキーワード
mediumは初期値です。largerとsmallerは親要素を基準に相対的な大きさを選びます。
早見表
初期値はmediumで、子要素へ継承されます。固定・ルート基準・親基準の違いを押さえます。
01
16px長さで指定固定値02
1remルートを基準基本サイズ向け03
1.25em親要素の1.25倍親基準04
125%親要素の125%割合05
clamp(1rem, 3vw, 2rem)範囲内で可変レスポンシブよくある使い方
01
本文の基本サイズを決める
ルート要素の設定を基準にremで本文を指定すると、利用者の文字サイズ設定を反映しやすくなります。
body { font-size: 1rem; }02
見出しを画面幅に合わせる
clamp()で最小値と最大値を決めると、狭い画面から広い画面まで見出しを滑らかに調整できます。
font-size: clamp(2rem, 6vw, 4rem);03
部品の文字を親に合わせる
emを使うと、カードやボタンなど部品の基準サイズを変えたときに内部の文字も一緒に調整できます。
font-size: 0.875em;ポイント
見た目だけでなく、拡大して読めるかも確認。
本文の文字を小さく固定しすぎると読みづらくなります。remやemなど利用者の設定を反映しやすい相対単位を使い、ブラウザーの文字拡大や200%ズームでも内容が切れたり重なったりしないか確認します。font-sizeはすべての要素とテキストに適用でき、子要素へ継承されます。行間はline-heightで別に調整します。
関連するCSSも見てみよう。
font-size と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。