Typography Scale設計ガイド｜Webで迷わない文字サイズ設計の結論

結論：この設定で9割の案件は破綻しない

Base: 16px Ratio: 1.25 Line-height: 本文 1.6 / 見出し 1.2

迷ったらこれ。問題が出たら変える。計算は Typography Scale で。

私の設計基準

Typography Scale は「美しさ」ではなく 「説明可能性」と「再現性」 のために使う。

デザインレビューで「なぜこのサイズか？」に即答できない設計は採用しない。

「なんとなく32px」ではなく「base 16px × ratio 1.25 の3段階上」。これが言えるだけで、設計の信頼性が変わる。

この記事が解決する状況

あなたの状況	読むべきセクション
「見出しは何pxにすればいい？」	結論の設計
なんとなくでフォントサイズを決めている	なぜTypography Scaleか
比率の選び方がわからない	比率の選び方
line-heightの設定に迷う	line-heightの設計
チームで設計を共有したい	実装と命名

なぜTypography Scaleか

「なんとなく」設計の問題

h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

なぜ32px？ → 根拠がない
追加の見出しが必要になったら？ → また「なんとなく」
他人に説明できる？ → できない

Typography Scaleの価値

size = baseSize × ratio^n

根拠がある → 「なぜその数値か」を説明できる
一貫性がある → 全体が調和する
拡張できる → 新しいサイズも計算で導出

属人的な「センス」から、再現可能な「設計」へ。

結論の設計を深掘りする

Base: 16px

ブラウザのデフォルトが16px。これに合わせることで：

ユーザーのフォントサイズ設定が正しく反映
remでの計算が直感的（1rem = 16px）
アクセシビリティの基準を満たす

変える理由がない限り、16pxから始める。

Ratio: 1.25（Major Third）

比率	h1サイズ（4段階上）	印象
1.125	25.6px	控えめ
1.25	39.1px	バランス良い
1.333	50.5px	ダイナミック
1.618	111.1px	インパクト重視

1.25は「読みやすさ」と「視認性」のバランスが最も良い。

Line-height: 本文 1.6 / 見出し 1.2

用途	line-height
本文	1.6
見出し	1.2

大きいサイズほど詰める。 64pxの見出しに1.6を適用すると行間が38.4px、スカスカに見える。

比率の選び方

迷ったら1.25

サイト種別	比率
ブログ・メディア	1.2
コーポレート・EC	1.25
LP・プロモーション	1.5〜1.618
ダッシュボード	1.067〜1.125

比率が合わないサイン

見出しが大きすぎて画面を圧迫 → 比率を下げる
見出しと本文の差がわからない → 比率を上げる
例外が増える → 比率自体を見直す

line-heightの設計

基本ルール

サイズ	line-height
小さいテキスト	1.6〜1.8
本文（16px）	1.5〜1.6
小見出し	1.3〜1.4
大見出し	1.1〜1.2

小さいほど広げる、大きいほど詰める。

単位なしで指定する

/* ✓ 推奨 */
line-height: 1.6;

/* ✗ 避ける */
line-height: 24px;

単位ありだと子要素に「計算値」が継承され、問題が起きる。

実装と命名

命名規則

規則	例	使いどころ
Semantic	xs, sm, base, lg, xl	迷ったらこれ
Heading	h1, h2, h3, body	HTMLと対応
Numeric	100, 200, 300	大規模システム

使うサイズだけ残す

生成された9段階すべてを使う必要はない。実際に使うのは5〜7段階。

:root {
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
}

よくある失敗

失敗	対処
スケールを無視して個別調整	スケール自体を見直す
比率が大きすぎる	1.25から始める
全サイズを使おうとする	5〜7段階に絞る
line-heightを固定値で指定	単位なしで

例外ケース

以下は「結論の設定では合わない」場合だけ読めばいい。

LP・プロモーション

インパクト重視なら ratio 1.5〜1.618。ただしh1が100px超えになるので使う場面を選ぶ。

ダッシュボード・管理画面

情報密度優先なら ratio 1.067〜1.125。差は最小限に。

印刷物と統一

√2（1.414）はA4などの紙のサイズ比と同じ。印刷物と親和性が高い。

設計チェックリスト

項目	推奨
Base	16px
Ratio	1.25
本文line-height	1.6
見出しline-height	1.2
命名規則	Semantic
使用段階数	5〜7

まとめ

Base 16px / Ratio 1.25 / Line-height 1.6

これで始めて、問題が出たら変える。

判断	結論
Baseサイズ	16px
比率に迷ったら	1.25
line-height	本文1.6、見出し1.2
命名規則	Semantic

「何pxにすればいい？」は、この記事で終わり。 計算は Typography Scale で。