The CSS font-size property sets the size of the text. It affects readability, layout, and accessibility, and it is often best managed with scalable units like rem and responsive functions like clamp().
font-size は「文字の大きさ」を指定するCSSプロパティです。読みやすさ（可読性）とレイアウトの安定性に直結するため、実務でも試験でも“よく出る基本”のひとつです。
font-size が「何に効いて、何が変わるか」を説明できるpx / rem / % / clamp()）を使い分けられる% の基準や継承のしくみを理解し、意図しない拡大・縮小を避けられるfont-size って何？font-size は、文字そのものの大きさ（見え方）を決めます。小さすぎると読めず、大きすぎると行が折れてレイアウトが崩れます。rem が中心になりやすいpx は分かりやすい一方、全体の拡大・縮小を設計しづらい場面があります。実務では rem を基準にして、必要に応じて clamp() で可変にするのが定番になりやすいです。覚え方：font-size は「読むためのサイズ」。読みやすさを守りつつ、レイアウトも壊さないサイズを選びます。
テキスト（文字）の大きさを指定し、コンテンツの階層（見出し・本文・注釈など）や、読みやすさ（可読性）をコントロールするために存在します。
font-size は基本的に全要素に適用できます。特にテキストを表示する要素（例：p, a, button など）で強く意味を持ちます。::before / ::after）16px のような長さ、120% のような割合、small/large などのキーワードで指定できます。font-family、太さは font-weight、行の高さは line-height が担当です。font-size は「サイズだけ」です。padding などで確保しますが、文字サイズも操作の安心感に直結します。rem）はこの設計と相性が良いです。まずは、本文を 1rem（多くの環境で約16px）にして、見出しだけ大きくする最小の形です。
CSS
/* 基本：本文は 1rem を基準にする */
body {
font-size: 1rem;
}
/* 見出しは段階的に大きくする（例） */
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }デモは「悪い例 → 良い例」で、差が一目で分かるようにします。
悪い例：12px 固定（小さくなりやすく、拡大設計もしづらい）
この文章は font-size: 12px です。小さめで、長文になるほど読みにくくなります。
良い例：本文は rem、見出しは clamp() で少しだけ可変
見出しは画面幅に応じて少し変化します
この文章は font-size: 1rem（多くの環境で約16px）です。読みやすさの土台を守りやすく、全体の調整もしやすいです。
HTML
<p class="demoFontSizeMeta"><b>悪い例：</b><code>12px</code> 固定（小さくなりやすく、拡大設計もしづらい）</p>
<div class="demoFontSizeWrap">
<p class="demoFontSizeBadNote">この文章は <code>font-size: 12px</code> です。小さめで、長文になるほど読みにくくなります。</p>
</div>
<p class="demoFontSizeMeta"><b>良い例：</b>本文は <code>rem</code>、見出しは <code>clamp()</code> で少しだけ可変</p>
<div class="demoFontSizeWrap">
<p class="demoFontSizeGoodTitle">見出しは画面幅に応じて少し変化します</p>
<p class="demoFontSizeGoodBody">この文章は <code>font-size: 1rem</code>（多くの環境で約16px）です。読みやすさの土台を守りやすく、全体の調整もしやすいです。</p>
</div>CSS
.demoFontSizeWrap {
border: 1px solid #888;
border-radius: 0.2em;
padding: 1em;
background: rgba(152, 152, 152, 0.08);
margin: 1em 0;
}
.demoFontSizeBadNote {
font-size: 12px;
line-height: 1.4;
}
.demoFontSizeGoodBody {
font-size: 1rem;
line-height: 1.7;
}
.demoFontSizeGoodTitle {
font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
font-weight: bold;
margin: 0 0 0.5em;
}
.demoFontSizeMeta {
font-size: 0.875rem;
color: #555;
}
@media (prefers-color-scheme: dark) {
.demoFontSizeWrap {
border-color: #666;
background: rgba(255, 255, 255, 0.06);
}
.demoFontSizeMeta { color: #bbb; }
}px（絶対長さ）rem（ルート基準の相対長さ）em（親要素基準の相対長さ）%（親要素の font-size を基準にした割合）16px なら 125% は 20px 相当です。基準を理解すると使いやすいです。clamp()（最小〜理想〜最大）font-size は複数箇所に影響しやすいので、特に外部CSSで管理した方が安全です。<style>style="font-size: ..." は緊急の検証には便利ですが、運用では“最後の手段”になりがちです。上書き関係が追いづらくなるためです。font-size は継承プロパティです。子要素に指定が無ければ、親の font-size が使われます。medium（キーワード）です。実際のピクセル値は環境（ブラウザ/OS/設定）で変わりえます。% の基準は？（percentages）% は「親の文字サイズに対して何％か」です。font-size: 125% は、親の使用値（親の実際に使われているサイズ）を基準にして計算されます。% の場合、内部で計算されて実際の長さになります。DevTools の Computed は「最終的に効いた値」を見るのに役立ちます。font-size: 12 のように単位が無い長さは無効です（0 以外）。無効になると、その宣言はなかったことになり、別のルール（継承や別の指定）が採用されます。font-size 自体はロングハンドです。ただし、font（ショートハンド）に含まれます。font を使うと font-size もまとめて上書きされる点が落とし穴になりやすいです。px は“ズームで拡大されない”と思ってしまうpx でも拡大されます。問題になりやすいのは「全体設計としてのスケールの作りやすさ」で、rem の方が“軸”にしやすい場面が多いです。em は rem と同じだと思ってしまうrem はルート（多くは html）基準、em は親要素基準です。入れ子が深いと em は意図しない増減が起きやすいです。% は“画面幅に対する割合”だと思ってしまうfont-size の % は「親の文字サイズ」基準です。画面幅基準にしたいなら、vw や clamp() を検討します。font（ショートハンド）を軽く書いて事故るfont は省略時の上書きが強く、意図せず font-family や line-height まで変えることがあります。軽い気持ちで使うと、原因追跡が難しくなります。rem、コンポーネントは“必要な時だけ” emrem を主役にすると「全体のスケール」を作りやすいclamp() で“増えすぎ/減りすぎ”を防ぐclamp() は最小・理想・最大が決められる0.875rem のように“段階”で設計するfont で上書きされている。font-size を見て、どのCSSファイル・どのセレクタが勝っているか確認します。!important は最終手段にします。em の入れ子で想定外に大きく（小さく）なるfont-size も em で指定していて、掛け算的に増減している。font-size がどの段階で変化したか見ます。rem を主役にし、em は“コンポーネント内だけ”に限定すると事故が減ります。word-break や overflow-wrap も検討します。clamp() で上限・下限を持たせ、line-height もセットで調整します。12px 固定などにしている／行間が狭い。1rem 付近を土台にし、注釈も 0.875rem 程度など“下げすぎない”段階を決めます。1rem（目安：16px相当）から極端に下げない方が安全です。どうしても小さくする場合でも、情報の重要度が低い箇所に限定します。height）で“文字を閉じ込めない”のが基本です。@media (prefers-reduced-motion: reduce) で動きを抑える設計にします。line-height（行の高さ）line-height: 1.6 のように単位なしで指定すると、文字サイズに追従しやすいです。font-family（フォント）font-size でも、フォントによって“見かけの大きさ”は変わります。違和感が出たらフォント側の影響も疑います。font（ショートハンド）font を使うと font-size もまとめて上書きされます。意図せず崩れた時は、font の指定がないか検索します。clamp() / min() / max()clamp() は「最小〜理想〜最大」で制御できるため、見出しに向きます。em / rem / %（相対単位）@media）clamp() で“ほどよい可変”を検討すると実務は楽になります。font-sizepxremhtml）の文字サイズを基準にした相対長さ。全体設計の軸にしやすい。em%font-size を基準にした割合。clamp()font-size は継承される。font-size は継承される（子に指定がないと親の値）% は親の font-size 基準（画面幅基準ではない）font ショートハンドは font-size も巻き込むfont-size: 16px のとき、子が font-size: 125% なら何px相当？20px 相当です（16 × 1.25 = 20）。% は親の文字サイズが基準です。font-size: 14 と書いたらどうなる？0 以外の長さは単位が必要）。その宣言は無視され、別の指定（継承など）が採用されます。em / rem）rem です。em は親基準なので入れ子で増減しやすいです。height）や、行間（line-height）です。文字を“固定の箱”に閉じ込めていないか確認します。clamp() を使うと便利？1rem（目安：16px相当）付近に置き、見出しや注釈を段階的に設計することが多いです。小さくしすぎると読みにくさと問い合わせが増えます。html { font-size: 62.5%; } は使っていいですか？1rem = 10px 相当にして計算しやすくする狙いがあります。ただし“基準の変更”は全体に影響するため、案件ルールとして統一できる時に使います。途中参加の人が混乱しやすいなら、100% を維持して rem を素直に使う方が安全です。px を使うのはダメですか？rem を主役にして、部分的な調整に px を使う、のように役割分担すると破綻しにくいです。em と % はどっちが良い？rem を主役にして、em/% は限定的に使うのが安全です。height）や固定幅で“文字を閉じ込めていないか”を確認します。次に line-height と padding を見直し、ズーム 200% でも破綻しないか確認します。font で上書き／インライン指定。font-size の“勝ったルール”を見る。em を使ったら想定より大きい（小さい）rem を主役にし、em はスコープを限定する。clamp() と line-height をセットで調整する。height）や、line-height が小さすぎる。0.875rem）にして下げすぎない。1rem 付近）rem に寄せると保守しやすい% / em は親基準。基準を言葉で説明できないなら使う範囲を絞るclamp() で“増えすぎ/減りすぎ”を防ぐと安定しやすいline-height や余白、固定高さの有無もセットで確認する