見出しのサイズをその都度決めていると、ページごとに大きさがばらつきます。基準サイズに一定の比率を掛けて段階を作る「タイポグラフィスケール」を先に決めておくと、どの画面でも一貫した見た目になります。
比率の選び方
比率が大きいほど見出しが目立ちますが、段階の数が多いと最大サイズが極端になります。段階を9つ使うなら1.2〜1.25、5つ程度なら1.333以上でも収まります。
| 比率 | 名称 | 印象・向いている用途 |
|---|---|---|
| 1.125 | 短2度 | 差が小さい。情報量の多い管理画面向き |
| 1.200 | 短3度 | 落ち着いた差。長文のサイト向き |
| 1.250 | 長3度 | 扱いやすい標準。多くのWebサイトで使える |
| 1.333 | 完全4度 | 見出しが目立つ。ブログ・記事向き |
| 1.414 | 増4度 | メリハリが強い。ランディングページ向き |
| 1.500 | 完全5度 | 差が大きい。見出し中心の構成向き |
| 1.618 | 黄金比 | 最も差が大きい。要素が少ないページ向き |
clamp() で画面幅に応じて変える
PCで見栄えのする大きな見出しは、スマホではみ出したり詰まって見えたりします。メディアクエリで段階的に切り替える方法もありますが、clamp() を使うと画面幅に応じて滑らかに変化します。
本ツールのclamp版は、画面幅375pxでスマホ用の基準サイズ、1280pxでPC用の基準サイズになるよう計算しています。
font-size: clamp(最小値, 可変の式, 最大値); /* 例：スマホで24px、PCで32pxまで滑らかに変わる */ font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
サイズ以外に決めておきたいこと
文字サイズだけを整えても、行間と1行の文字数が適切でなければ読みやすくはなりません。max-width で本文幅を制限するところまでがセットです。
- 行間（line-height）：本文は1.6〜1.8、見出しは1.2〜1.4が読みやすい範囲
- 1行の文字数：日本語は35〜45文字程度が読みやすいとされます
- 最小サイズ：本文を14px未満にすると読みにくくなります。スマホでは16px前後が基準
- 字間（letter-spacing）：日本語の見出しはわずかに詰めると締まって見えます
remで指定する理由
本ツールはremでも出力しています。remはルート要素の文字サイズを基準にする単位で、利用者がブラウザの文字サイズ設定を変えたときに追従します。pxで固定すると、その設定が無視されてしまいます。
アクセシビリティの観点から、文字サイズはremでの指定が推奨されています。枠線の太さのように拡大させたくない値はpxのままで構いません。
よくある質問
Q どの比率を選べばいいですか？
迷ったら1.25（長3度）が扱いやすい標準です。見出しを強調したいブログなら1.333も向いています。
Q clamp()はどのブラウザで使えますか？
主要なブラウザで広くサポートされています。
Q px出力とrem出力のどちらを使うべき？
文字サイズはremを推奨します。利用者のブラウザ設定に追従するためです。
Q Tailwind CSSで使えますか？
生成されたCSS変数を定義し、theme.extend.fontSize から参照する形で組み込めます。