タイプスケールとは｜文字サイズを比率で段階化する考え方と作り方

Webサイトやアプリの文字サイズを決めるとき、「見出しは24px、その下は18px、本文は16px……」と、なんとなくキリの良い数字を並べていないでしょうか。一つひとつは悪くなくても、全体を眺めると大きさの飛び方がバラバラで、どこか落ち着かない。そんな違和感の正体は、サイズ同士の「比率」が揃っていないことにあります。これを解決するのがタイプスケール（モジュラースケール）です。本記事では、タイプスケールとは何か、どんな比率を選び、どう実装すればよいのかを順を追って解説します。

タイプスケールとは何か

タイプスケールとは、基準となる文字サイズに一定の比率（ratio）を掛け合わせて、文字サイズの段階（スケール）を作る考え方です。モジュラースケールとも呼ばれます。たとえば本文を16px、比率を1.25とすると、一つ上のサイズは16×1.25=20px、さらに上は20×1.25=25px……というように、すべてのサイズが同じ比率でつながっていきます。

このやり方の利点は、サイズ同士の関係が数学的に一貫することです。隣り合う段の比が常に同じなので、見出しと本文、大見出しと小見出しの大きさの差が規則正しくなり、デザイン全体に自然な秩序が生まれます。音楽の音階（スケール）が一定の周波数比で構成されているのと同じように、文字サイズにも「心地よい間隔」を持ち込む発想だと考えると分かりやすいでしょう。

実際にどんな数列ができるのかは、タイプスケール生成ツールで基準サイズと比率を入力して試してみるのが一番の近道です。数字を少し変えるだけで、全体の印象が大きく変わることが体感できます。

比率の選び方：黄金比・1.25・1.333

タイプスケールの印象を決めるのは、なんといっても比率です。比率が大きいほど見出しと本文の差が大きくダイナミックに、小さいほど落ち着いて穏やかな印象になります。代表的な比率には次のようなものがあります。

黄金比1.618は古くから美しいとされる比率で、見出しと本文のコントラストが強くなるため、トップページの大きな見出しなど「魅せる」場面で効果を発揮します。一方、本文中心の読み物では差が大きすぎて段階が荒くなりがちなので、1.25や1.333のような穏やかな比率のほうが扱いやすいことが多いです。

どの比率が正解ということはありません。サイトの性格（情報密度の高い実用系か、印象重視のブランド系か）と、確保したい段階の数を踏まえて選ぶのがコツです。迷ったら、まず汎用性の高い1.25から始めて、物足りなければ1.333へ上げてみる、という進め方がおすすめです。

見出しと本文の階層を設計する

比率を決めたら、それを使って見出しと本文の階層（ヒエラルキー）を組み立てます。階層とは、h1・h2・h3といった見出しや本文・注釈などの「役割ごとの大きさの序列」のことです。読み手は文字の大小を手がかりに、どこが重要でどこが補足かを瞬時に判断しています。

たとえば本文16px、比率1.25のスケールを使うと、次のような割り当てが考えられます。

• 本文：16px（基準）
• 小見出し（h3）：20px（16×1.25）
• 中見出し（h2）：25px（20×1.25）
• 大見出し（h1）：31px（25×1.25、端数は丸め）
• 注釈・キャプション：13px（16÷1.25）

ポイントは、すべての要素にスケール上の値を割り当て、スケールにない中途半端なサイズを混ぜないことです。役割ごとに使うサイズを固定しておけば、ページが増えても見た目がブレず、サイト全体で一貫したリズムが保たれます。なお、見出しを際立たせるには大きさだけでなく、太さ（font-weight）や上下の余白も合わせて調整すると、より明快な階層になります。

remで実装する：基準サイズと計算

タイプスケールを実装するときは、px直接指定よりもremという単位を使うのがおすすめです。remは「ルート要素（html）の文字サイズを1とした倍率」で、ブラウザの標準は1rem＝16pxです。remで書いておくと、利用者がブラウザの文字サイズ設定を変えたときに全体が連動して拡大・縮小し、アクセシビリティ（読みやすさ）の面で有利になります。

先ほどの1.25スケールをremで表すと、次のようになります。

本文 1rem ／ h3 1.25rem ／ h2 1.563rem ／ h1 1.953rem ／ 注釈 0.8rem

このように、基準を1remとして比率を掛けた値を並べるだけです。端数は小数第3位あたりで丸めれば十分で、CSSのcalc()やカスタムプロパティ（変数）と組み合わせれば、比率を一か所変えるだけでスケール全体を更新することもできます。手計算が面倒なときは、タイプスケール生成ツールで基準サイズと比率を入れれば、各段のpxとremの値をまとめて出力できます。

なお、文字サイズと密接に関わるのが行間（行の高さ、line-height）です。文字を大きくすると最適な行間も変わるため、サイズを決めたら行間（行の高さ）計算ツールであわせて行間も見直しておくと、読みやすさが一段と高まります。

可読性と一貫性を高めるコツ

タイプスケールはあくまで土台です。実際の読みやすさを仕上げるには、次のような点に気を配ると効果的です。

• 本文サイズは小さくしすぎない：画面で長文を読む場合、本文は16px前後が一つの目安です。スケールの起点となる基準サイズなので、ここを丁寧に決めると全体が安定します。
• 段階を増やしすぎない：用意するサイズは5〜7段程度に絞ると、役割と大きさの対応が分かりやすくなります。段階が多すぎると、かえって階層が曖昧になります。
• 行間とセットで考える：文字が大きい見出しは行間を詰めぎみ、小さい本文は行間を広めにすると読みやすくなります。サイズと行間は常にペアで調整しましょう。
• スマホでの見え方を確認する：黄金比のような大きい比率は、画面の狭いスマホで見出しが大きくなりすぎることがあります。必要なら画面幅に応じて比率や基準サイズを切り替えます。

こうした調整を一度ルール化してしまえば、新しいページを作るたびにサイズで悩むことがなくなります。タイプスケールの本当の価値は、見た目の美しさだけでなく、判断の迷いを減らし、チームでも再現できる一貫性を生み出すことにあるのです。

実際に作ってみる手順

最後に、自分のサイト用のタイプスケールを作る流れを整理しておきます。

1. 基準サイズを決める：本文の読みやすさを優先し、16pxなどを起点にします。
2. 比率を選ぶ：サイトの性格に合わせて1.25・1.333・1.618などから選びます。
3. 段階を生成する：基準に比率を掛け、上下に必要な段だけ数値を出します。
4. 役割に割り当てる：h1〜h3、本文、注釈などにスケール上の値を対応させます。
5. 行間を調整する：各サイズに合った行間を設定し、表示を確認します。

この一連の作業は、タイプスケール生成ツールを使えば数値を入力するだけで自動化できます。出てきた段階を行間（行の高さ）計算ツールと組み合わせれば、サイズと行間の両面から整ったタイポグラフィを短時間で組み立てられます。まずは比率を一つ選び、実際の文章に当てはめて見え方を確かめてみてください。

なお本記事は一般的な情報の提供を目的としたものです。最適な文字サイズや比率は、対象デバイスや読者層、ブランド要件によって変わります。実装にあたっては、最新の公式ドキュメントやアクセシビリティのガイドラインもあわせて確認してください。