CSS font-sizeプロパティ

例

さまざまな HTML 要素のフォントサイズを設定する：

h1 {font-size:250%} h2 {font-size:200%} p {font-size:100%}

試してみる »

プロパティの定義と使用説明

font-size プロパティはフォントサイズを設定するために使用します。

font-size はテキストの表示サイズを決めるだけでなく、em、line-height、letter-spacingなどの関連するレイアウト計算にも影響します。

初期値（デフォルト値）： medium
継承： yes
バージョン： CSS1
JavaScript 構文： object.style.fontSize="larger"
/*<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; /*<relative-size>、相対サイズ値*/ font-size: larger; font-size: smaller; /*<length>、長さの値*/ font-size: 12px; font-size: 0.8em; /*<percentage>、パーセンテージ値*/ font-size: 80%; font-size: inherit;

ブラウザサポート

表内の数字は、そのプロパティをサポートする最初のブラウザバージョンを示します。

プロパティ
font-size 1.0 5.5 1.0 1.0 7.0

基本概念

font-size要素内の文字のサイズを設定するために使います。

ブラウザのデフォルトのルートフォントサイズは通常、16px。

つまり、デフォルトではhtml { font-size: 100%; }通常は次と同等です：html { font-size: 16px; }。

このデフォルト値は、多くの相対単位の計算の基準になります。

例

/* ページのデフォルトフォントサイズを設定 */
html {
    font-size: 100%; /* 通常は 16px に相当し、ユーザーのブラウザ設定を尊重する */
}

/* 本文の文字サイズを設定 */
body {
    font-size: 16px; /* 一般的な本文の基準フォントサイズ */
    line-height: 1.6; /* 行高は単位なしで記述すると継承しやすい */
}

/* 見出しのサイズを設定 */
h1 {
    font-size: 2rem; /* デフォルトでは約 32px */
}

ルート要素のフォントサイズを簡単に小さな値に固定することは推奨されません。ユーザーのブラウザフォント設定やアクセシビリティ体験に影響を与える可能性があるためです。

font-size の一般的な値のタイプ

font-sizeキーワード、長さの単位、パーセンテージ、関数を使用できます。

値の種類によって適したシナリオが異なります。

値のタイプ 例 説明 適用シーン
キーワード small、large ブラウザが既定の比率で計算します。 シンプルなページや、ユーザーのデフォルト設定に従う必要があるシーン。
絶対単位 16px、12pt サイズは比較の固定されており、制御性が高いです。 インターフェースの正確な制御、印刷スタイル。
相対単位 1rem、1.25em 親要素またはルート要素に対して計算します。 レスポンシブデザイン、コンポーネント化されたページ。
ビューポート単位 4vw、3vmin ブラウザのビューポートサイズに基づいて計算します。 大きな見出し、展示ページ、流動的なタイポグラフィ。
CSS 関数 clamp()、calc() 式を使用してフォントサイズを動的に計算します。 モダンなレスポンシブタイポグラフィ。

キーワード値

CSS には2種類のフォントサイズキーワードがあります。

1つは絶対サイズのキーワードで、例：small、medium、large。

もう1つは相対サイズのキーワードで、例：largerとsmaller。

絶対サイズのキーワード

絶対サイズのキーワードは固定ピクセル値ではなく、ブラウザがデフォルトのフォントサイズから換算したレベルです。

キーワード デフォルト16pxでの近似値 比率 適用シーン
xx-small 約 9px 0.56 倍 極小の注釈。本文での使用は推奨されません。
x-small 約 10px 0.625 倍 脚注や補助情報。
small 約 13px 0.8 倍 補助テキスト。
medium 約 16px 1 倍 デフォルトの本文。
large 約 18px 1.125 倍 小見出しや強調テキスト。
x-large 約 24px 1.5 倍 見出し。
xx-large 約 32px 2 倍 大見出し。
xxx-large 約 48px 3 倍 展示用の大見出し。

相対サイズのキーワード

largerとsmaller親要素のフォントサイズに対して拡大・縮小されます。

親のフォントサイズに追従する必要があるシンプルなシーンに適しています。

例

/* 親要素のフォントサイズは 16px */
.parent {
    font-size: 16px;
}

/* larger は親要素に対して拡大され、具体的な比率はブラウザが決定します */
.child-larger {
    font-size: larger;
}

/* smaller は親要素に対して縮小され、具体的な比率はブラウザが決定します */
.child-smaller {
    font-size: smaller;
}

キーワード値はアクセシビリティには比較的優しいですが、制御性が低いため、実際のプロジェクトでより頻繁に使用されるのは、rem、em 或 clamp()。

絶対単位

絶対単位の値は比較的固定されており、親要素のフォントサイズに依存しません。

これらは正確な制御が必要なインターフェースや、印刷スタイルに適しています。

単位 意味 換算関係 適用シーン
px CSS 論理ピクセル。 画面上で最も一般的に使われる長さの単位。 Web インターフェース、コンポーネントのフォントサイズ。
pt 印刷用ポイント。 1pt = 1/72 インチ、約 1.333px。 印刷スタイル。
cm / mm センチメートル / ミリメートル。 1cm = 37.8px，1mm = 3.78px。 印刷レイアウト。Web ではあまり使われません。
in インチ。 1in = 96px。 印刷や特殊なサイズ換算。
pc パイカ。 1pc = 12pt = 16px。 伝統的な組版シーンで、Web ではほとんど使われません。

例

/* 絶対単位の換算関係 */
/* 1in = 96px = 2.54cm = 25.4mm = 6pc = 72pt */

/* 印刷時は通常 pt を使用 */
@media print {
    body {
        font-size: 12pt;
    }
}

/* 画面表示では通常 px、rem、clamp() を使用 */
@media screen {
    body {
        font-size: 16px;
    }
}

現代の画面上で 1px は通常 CSS 論理ピクセルを指し、必ずしも物理ピクセル1つと等しいわけではありません。

相対単位

相対単位は参照値に基づいて動的に計算されます。

これらはモダンなレスポンシブデザインで最も一般的に使われるフォントサイズの単位です。

単位 参照対象 説明 代表的な使い方
em 親要素または現在の要素のフォントサイズ。 使用font-size時は、親要素に対して相対的になり、ネストすると乗算されます。 ローカルなコンポーネントのスケーリング。
rem ルート要素htmlフォントサイズ。 ネストの影響を受けず、計算がより安定します。 サイト全体のフォントサイズ体系。
% 親要素のフォントサイズ。 にfont-size動作は em に似ておりem。 親要素の比率に応じて拡大・縮小します。
ch 文字0の幅。 行幅の制御に使われることが多いです。 width: 60ch;
ex 小文字の x の高さ。 フォントデザインの影響を大きく受けます。 少量の特殊な組版。
lh 要素の行の高さ。 CSS Values 4 で追加された単位。 行の高さに合わせた間隔。

em と rem の違い

em設定する場合font-sizeは、親要素のフォントサイズを基準に計算されます。

多層のネストがすべて使用する場合emフォントサイズは階層ごとに乗算されます。

rem常にルート要素のフォントサイズを基準に計算されるため、より安定しています。

例

/* ルート要素のフォントサイズは 16px */
html {
    font-size: 16px;
}

/* em は親要素のフォントサイズの影響を受けます */
.outer {
    font-size: 1.5em; /* 16px × 1.5 = 24px */
}

.middle {
    font-size: 1.5em; /* 24px × 1.5 = 36px */
}

/* rem は常に html を基準に計算されます */
.outer-rem {
    font-size: 1.5rem; /* 16px × 1.5 = 24px */
}

.middle-rem {
    font-size: 1.5rem; /* 16px × 1.5 = 24px、乗算されません */
}

にfont-sizeに使用する場合emは、親要素のフォントサイズを基準にします。ただし、同じ要素のpadding 或 marginに使用する場合emは、その要素自身のフォントサイズを基準にします。

ビューポート単位

ビューポート単位はブラウザウィンドウのサイズに基づいて計算されます。

これらは、画面幅に応じて変化する流動的なタイポグラフィを実現するのに適しています。

ただし、ビューポート単位だけを使用すると、スマートフォンでは小さすぎ、超ワイド画面では大きくなりすぎる可能性があります。

単位 意味 説明 代表的な使用例
vw ビューポート幅の 1%。 ビューポートが広いほどフォントサイズが大きくなります。 レスポンシブな見出し。
vh ビューポート高さの 1%。 モバイルではブラウザのツールバーの影響を受けます。 全画面表示ページ。
vmin vwとvhのうち小さい方の値の 1%。 横画面と縦画面の両方に対応するのに適しています。 自己調整する大見出し。
vmax vwとvhのうち大きい方の値の 1%。 変化の幅が大きくなります。 展示用のビジュアルデザイン。
svh / dvh / lvh 小 / 動的 / 大ビューポート高さ。 モバイルブラウザのツールバー変動の問題を解決するために使用します。 モバイルの全画面ページ。
cqi / cqb コンテナクエリ単位。 ビューポート全体ではなく、コンテナのサイズを基準にします。 コンポーネントレベルのレスポンシブタイポグラフィ。

例

/* vw を単独で使うと、フォントサイズのスケーリングが急激すぎる場合があります */
h1 {
    font-size: 5vw;
}

/* clamp() で上下限を設定する方が推奨されます */
h1 {
    font-size: clamp(1.5rem, 5vw, 3.5rem);
}

/* コンテナクエリ単位はコンポーネントレベルのレスポンシブデザインに適しています */
.card {
    container-type: inline-size;
}

.card-title {
    font-size: clamp(1rem, 4cqi, 2rem);
}

コンテナクエリ単位は、コンポーネントライブラリやカードレイアウトに適しています。コンポーネントのサイズはブラウザのビューポートサイズと必ずしも等しくないためです。

clamp() 関数

clamp()は、現代のレスポンシブタイポグラフィにおいて非常に実用的な関数です。

フォントサイズを最小値と最大値の間に制限できます。

中間値には通常、ビューポート単位や計算式を使用して、フォントサイズを画面に応じて変化させます。

引数 意味 例 説明
最小値 フォントサイズはこの値より小さくなりません。 1rem モバイルでの可読性を保証します。
優先値 ブラウザはこの動的な値を優先的に使用します。 2vw + 1rem フォントサイズを画面に応じて流動的に変化させます。
最大値 フォントサイズはこの値より大きくなりません。 3rem 大画面での文字の大きすぎを防ぎます。

例

/* clamp(最小値, 優先値, 最大値) */
h1 {
    font-size: clamp(1.75rem, 2.5vw + 1rem, 3.5rem);
}

h2 {
    font-size: clamp(1.25rem, 2vw + 0.75rem, 2.25rem);
}

p {
    font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
}

/* CSS変数と組み合わせてデザインシステムを構築 */
:root {
    --text-sm: clamp(0.8rem, 1.5vw + 0.25rem, 0.95rem);
    --text-md: clamp(1rem, 2vw + 0.5rem, 1.25rem);
    --text-lg: clamp(1.25rem, 3vw + 0.5rem, 2rem);
    --text-xl: clamp(1.75rem, 4vw + 0.75rem, 3.5rem);
}

.article-title {
    font-size: var(--text-xl);
}

min() と max() 関数

min()複数の値の中から小さい方を採用します。

max()複数の値の中から大きい方を採用します。

これらはフォントサイズにも使用できますが、流動的なタイポグラフィでは通常はclamp()直感的ではありません。

関数 動作 例 適用シナリオ
min() 小さい方の計算結果を選択します。 min(5vw, 48px) 最大値のみを制限します。
max() 大きい方の計算結果を選択します。 max(1rem, 2vw) 最小値のみを制限します。
clamp() 最小値・優先値・最大値を同時に設定します。 clamp(1rem, 2vw, 2rem) 完全な流動的なフォントサイズの手法。

例

/* フォントサイズは 48px を超えませんが、小さい画面では小さすぎる可能性があります */
h1 {
    font-size: min(5vw, 48px);
}

/* フォントサイズは 16px 以上ですが、大きい画面では大きすぎる可能性があります */
h2 {
    font-size: max(16px, 3vw);
}

/* 最小値と最大値を同時に制限するので、実際のプロジェクトにより適しています */
h3 {
    font-size: clamp(16px, 3vw, 32px);
}

calc() 関数

calc()CSS内で異なる単位を混在させて計算できます。

固定値と相対値を組み合わせるためによく使用されます。

フォントサイズのシナリオでは、calc()よくvw、rem一緒に使用されます。

例

/* calc() で rem と vw を組み合わせる */
h1 {
    font-size: calc(1.5rem + 2vw);
}

/* clamp() 内で calc() を使うと、より明確になります */
h2 {
    font-size: clamp(1.25rem, calc(1rem + 2vw), 3rem);
}

/* 演算子の両側にはスペースを入れる必要があります */
p {
    font-size: calc(1rem + 0.25vw);
}

calc(1rem+2vw)このような書き方は誤りです。演算子の両側にはスペースを書くべきです。例えばcalc(1rem + 2vw)。

継承とカスケード

font-sizeは継承されるプロパティです。

子要素がフォントサイズを宣言していない場合、親要素で計算されたフォントサイズを継承します。

これもemネスト時に乗算問題が発生しやすい原因の一つです。

例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>font-size 継承の例</title>
    <style>
        .article {
font-size: 18px; /* 子要素はデフォルトでこのフォントサイズを継承 */
        }

        .article p {
font-size: 1em; /* 18px に相当 */
        }

        .article .note {
            font-size: 0.875em; /* 18px × 0.875 = 15.75px */
        }
    </style>
</head>
<body>
    <div class="article">
        <p>これは本文です。</p>
        <p class="note">これは小さめの注釈テキストです。</p>
    </div>
</body>
</html>

ベストプラクティス

実際のプロジェクトでは、すべての文字を直接固定値として書き込むことは推奨されません。px。

より良い方法は、ルートフォントサイズ、CSS変数とclamp()を組み合わせて安定したフォントサイズシステムを構築することです。

非推奨の書き方 推奨される書き方 理由
font-size: 12px;長い本文として使用します。 font-size: 1rem; 本文が小さすぎると読みやすさに影響します。
多層コンポーネントがすべて使用するem。 グローバルフォントサイズは使用するrem、局所的なスケーリングには を再び使用するem。 ネストによる乗算でフォントサイズが制御不能になるのを防ぎます。
見出しはのみ記述するfont-size: 6vw;。 font-size: clamp(1.75rem, 4vw, 3.5rem); 小さい画面で小さすぎ、大きい画面で大きくなりすぎるのを防ぎます。
ページごとにフォントサイズを随意に定義する。 CSS変数を使用してフォントサイズの段階を統一する。 一貫したビジュアルシステムを維持しやすくなります。

例

/* 推奨：CSS変数を使用してフォントサイズ体系を管理 */
:root {
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: clamp(1.5rem, 3vw, 2.5rem);
    --font-size-hero: clamp(2rem, 6vw, 4.5rem);
}

body {
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.caption {
    font-size: var(--font-size-sm);
}

.article-title {
    font-size: var(--font-size-xl);
}

.hero-title {
    font-size: var(--font-size-hero);
}

一般的にはremでグローバルなフォントサイズ体系を構築し、emで局所的な比率のスケーリングを行い、clamp()でレスポンシブ見出しを処理します。

推奨されるフォントスケールシステム

以下は、Modular Scale の考え方に基づくフォントサイズ Token 体系です。

各 Token は使用し、clamp()最小画面と最大画面の両方で適切なサイズになるようにします。

Token 用途 clamp() 推奨値 備考
--text-xs ラベル、バッジ clamp(0.7rem, 0.5vw + 0.5rem, 0.8rem) 11px 未満は推奨されません。
--text-sm 補助テキスト、説明 clamp(0.85rem, 0.8vw + 0.6rem, 0.95rem) 注釈や二次的な情報によく見られます。
--text-md 本文基準 clamp(1rem, 1vw + 0.75rem, 1.125rem) デフォルトの本文フォントサイズとして推奨されます。
--text-lg 副見出し clamp(1.15rem, 1.5vw + 0.8rem, 1.5rem) 記事やカードの小見出し。
--text-xl h3 レベルの見出し clamp(1.25rem, 2vw + 0.75rem, 2rem) 小節の見出し。
--text-2xl h2 レベルの見出し clamp(1.5rem, 2.5vw + 1rem, 2.5rem) 章の見出し。
--text-3xl h1 レベルの見出し clamp(2rem, 4vw + 1rem, 3.5rem) ページのメインタイトル。
--text-hero 展示用の大見出し clamp(2.5rem, 6vw + 1rem, 5rem) ホームページやランディングページのタイトル。

例

/* 推奨：clamp() + CSS変数でフォントサイズ体系を管理 */
:root {
    --text-xs:   clamp(0.7rem, 0.5vw + 0.5rem, 0.8rem);
    --text-sm:   clamp(0.85rem, 0.8vw + 0.6rem, 0.95rem);
    --text-md:   clamp(1rem, 1vw + 0.75rem, 1.125rem);
    --text-lg:   clamp(1.15rem, 1.5vw + 0.8rem, 1.5rem);
    --text-xl:   clamp(1.25rem, 2vw + 0.75rem, 2rem);
    --text-2xl:  clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
    --text-3xl:  clamp(2rem, 4vw + 1rem, 3.5rem);
    --text-hero: clamp(2.5rem, 6vw + 1rem, 5rem);
}

body {
    font-size: var(--text-md);
    line-height: 1.6;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
small { font-size: var(--text-sm); }

推奨される方法と避けるべき方法

以下に、一般的なシナリオにおける推奨と非推奨の書き方を示します。

シナリオ 非推奨の書き方 推奨される書き方
ルートフォントサイズの設定 html { font-size: 10px; } html { font-size: 100%; }
本文フォントサイズ p { font-size: 14px; } p { font-size: 1rem; }
見出しフォントサイズ h1 { font-size: 48px; } h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem); }
小さい文字 small { font-size: 11px; } small { font-size: max(0.75rem, 12px); }
レスポンシブフォントサイズ 複数の@mediaブレークポイントで固定値を切り替える を使用してclamp()流動的な遷移を実現する
アクセシビリティ html { font-size: 62.5%; } ルートフォントサイズを設定しない、または使用する100%

には使用しないhtml 或 body上で固定のpxルートフォントサイズを設定すると、ユーザーがブラウザで設定した好みのフォントサイズを上書きし、大文字のアクセシビリティ機能が無効になります。

clamp() を使った流体フォントサイズの公式の導出

clamp()の中間値には通常、ビューポート単位に 1 つの rem 基準を加えたものを使います。

これにより「アンカーポイント + 傾き」の線形補間公式が形成され、異なる画面幅におけるフォントサイズの変化率を正確に制御できます。

公式の導出手順

ビューポートが 320px から 1240px の間で、フォントサイズを 16px から 24px へ滑らかに遷移させるとします。

手順 公式 本例の計算
1. 傾きを計算する (最大px - 最小px) / (最大vp - 最小vp) (24 - 16) / (1240 - 320) = 0.00869、約 0.87vw
2. 切片（intercept）を計算する 最小px - 傾き × 最小vp 16 - 0.00869 × 320 = 13.2px、約 0.825rem
3. 推奨値を求める 傾き × 100vw + 切片 0.87vw + 0.825rem

例

/* 公式：preferred = 斜率 × 100vw + 截距 */
/* 斜率 = (最大px - 最小px) / (最大vp - 最小vp) */
/* 截距 = 最小px - 斜率 × 最小vp */

/* 例：320px〜1240pxのビューポート間で16pxから24pxに遷移 */
/* 斜率 = (24-16) / (1240-320) = 0.00869 ≈ 0.87vw */
/* 截距 = 16 - 0.00869×320 ≈ 13.2px ≈ 0.825rem */

p {
    font-size: clamp(1rem, 0.87vw + 0.825rem, 1.5rem);
}

clamp()Chrome 79+、Firefox 75+、Safari 13.1+、Edge 79+ のすべてでサポートされており、本番環境で安全に使用できます。

min() と max() 関数の詳細

min(a, b, ...)複数の値のうち最小値を返します。これは「上限」を設定する効果に相当します。

max(a, b, ...)複数の値のうち最大値を返します。これは「下限」を設定する効果に相当します。

これらは任意の数の引数を受け取ることができ、引数間で異なる単位を混在させることができます。

関数 動作 効果 適用シーン
min() すべての引数の中から最小値を選択する 上限を設定する フォントサイズが大きくなりすぎるのを防ぐ。
max() すべての引数の中から最大値を選択する 下限を設定する 最小限の可読フォントサイズを保証する。
clamp() 最小値・推奨値・最大値を同時に制限する 上下限を設定する 完全な可変フォントサイズ（fluid type）ソリューション。

例

/* min() — 字号不超过 2rem */
h2 {
    font-size: min(5vw, 2rem);
}

/* max() — 字号不低于 1rem */
small {
    font-size: max(0.75vw, 1rem);
}

/* 組み合わせ：min と max は clamp と同等 */
/* clamp(MIN, VAL, MAX) 等价于 max(MIN, min(VAL, MAX)) */
h1 {
    font-size: max(1.5rem, min(4vw, 3rem));
}

/* 多个参数：取三者中最小值 */
.label {
    font-size: min(1rem, 3vw, 14px);
}

/* 混合单位 */
.fluid {
    font-size: max(12px, 1.2vw + 0.5rem);
}

calc() 関数の詳細

calc()加減乗除の四則演算をサポートし、任意の単位を混用できます。

フォントサイズのシーンでは、しばしば〜とremとvw組み合わせて使用します。

四則演算のルール

演算 構文 制限 例
加算 calc(1rem + 0.5vw) 演算子の両側にスペースが必要です。 font-size: calc(1rem + 0.5vw);
減算 calc(2rem - 4px) 演算子の両側にスペースが必要です。 font-size: calc(2rem - 4px);
乗算 calc(1.5 * 16px) どちらか一方の値は単位なしである必要があります。 font-size: calc(1.5 * 16px);
除算 calc(24px / 1.5) 右側は単位なしの数値で、かつ 0 以外でなければなりません。 font-size: calc(24px / 1.5);

calc(1rem+2px)は誤った書き方です。演算子の両側にはスペースを入れるべきで、正しい書き方は〜です。calc(1rem + 2px)。

例

/* 基础四则运算 */
font-size: calc(1rem + 0.5vw);       /* 加法 */
font-size: calc(2rem - 4px);         /* 减法 */
font-size: calc(1.5 * 16px);         /* 乗算（一方は無単位の数でなければならない）*/
font-size: calc(24px / 1.5);         /* 除算（右側は無単位の数でなければならない）*/

/* 搭配 CSS 变量 */
:root {
    --scale: 1.25;
    --base: 1rem;
}
h3 {
    font-size: calc(var(--base) * var(--scale));
}

/* 嵌套 calc（现代浏览器支持省略内层 calc）*/
font-size: calc(clamp(1rem, 2vw, 2rem) * 0.8);

calc を使用したモジュール式フォントスケールの構築

〜を通じてcalc()と CSS 変数により、固定比率に基づくフォントサイズの段階（スケール）を実現できます。

以下の例では Major Third（1.25）比率を使用しています。

例

/* 使用 calc + CSS 变量实现 Major Third (1.25) 比例 */
:root {
    --ratio: 1.25;
    --step-0: 1rem;                                       /* 16px */
    --step-1: calc(var(--step-0) * var(--ratio));         /* 20px */
    --step-2: calc(var(--step-1) * var(--ratio));         /* 25px */
    --step-3: calc(var(--step-2) * var(--ratio));         /* 31.25px */
    --step--1: calc(var(--step-0) / var(--ratio));        /* 12.8px */
}

p     { font-size: var(--step-0); }
h3    { font-size: var(--step-1); }
h2    { font-size: var(--step-2); }
h1    { font-size: var(--step-3); }
small { font-size: var(--step--1); }

継承とカスケード

font-sizeは継承されるプロパティです。

子要素は、フォントサイズを明示的に設定していない場合、親要素の「宣言値」ではなく「計算値」を継承します。

継承の計算プロセス

以下に典型的なフォントサイズの継承チェーンを示します。

セレクタ 宣言値 計算結果 説明
html 100% 16px ブラウザのデフォルト値。
body inherit 16px html から継承。
.article 1.125rem 18px ルートフォントサイズに基づいて計算。
.article p inherit 18px 継承されるのは 1.125rem ではなく、計算後の 18px です。
.article em 1em 18px em親要素の計算値に基づき、1 × 18px = 18px。

優先順位とカスケード順序

複数のルールが同時にfont-sizeを設定する場合、以下の優先度が高い順に適用されます。

優先度 由来 例
1（最高） !importantインラインスタイル <p style="font-size: 20px !important">
2 !importantスタイルシートのルール p { font-size: 20px !important; }
3 インラインスタイル <p style="font-size: 18px">
4 ID セレクタ #title { font-size: 24px; }
5 クラス / 擬似クラス / 属性セレクタ .heading { font-size: 22px; }
6 要素 / 擬似要素セレクタ p { font-size: 16px; }
7（最低） 継承 / ブラウザのデフォルトスタイル 親要素またはブラウザのデフォルトから。

例

/* 优先级由高到低 */
/* 1. !important 内联样式 */
/* <p style="font-size: 20px !important"> */

/* 2. !important 样式表规则 */
p { font-size: 20px !important; }

/* 3. 内联样式 */
/* <p style="font-size: 18px"> */

/* 4. ID 选择器 */
#title { font-size: 24px; }

/* 5. 类/伪类/属性选择器 */
.heading { font-size: 22px; }

/* 6. 元素/伪元素选择器 */
p { font-size: 16px; }

/* 7. 继承 / 浏览器默认样式 */

〜にはhtml 或 body固定の〜でpxルートフォントサイズを設定しないでください。これはユーザーのブラウザのフォント設定を上書きします。代わりに〜を使用してくださいhtml { font-size: 100%; }または、いっそ設定しないでください。

インタラクティブデモ

以下のデモを通じて、異なる単位でのフォントサイズの効果を直感的に確認できます。

単位の種類を選択して数値スライダーをドラッグすると、プレビュー領域がリアルタイムに更新されます。

font-size 単位換算とプレビュー
16px
CSS font-size チュートリアルのサンプル文字

まとめ

font-sizeは CSS タイポグラフィシステムの基本プロパティです。

px精密な制御に適しています。remグローバルなフォントサイズ体系に適しています。em局所的なスケーリングに適しています。

ビューポート単位は可変タイポグラフィに適していますが、できれば〜と組み合わせてclamp()上下限を制限するのが良いでしょう。

実際のプロジェクトでは、CSS 変数を使用してフォントサイズを一元管理し、可読性とレスポンシブな体験を最優先にすることをお勧めします。

スクリーンの本文には〜を推奨しますrem + clamp()、印刷スタイルには〜を使用しますpt。

ルートフォントサイズを固定せず、小さな文字には常に最小値の下限を設定してください（12px / 0.75rem 以上を推奨）。

コンポーネントレベルのレスポンシブでは、コンテナクエリ単位を優先的に検討してください。cqi / cqb。


関連記事

CSS チュートリアル:CSS Font

CSS リファレンス:font プロパティ

その他の拡張