タイプスケール

定義

タイプスケールは、ひとつの基準サイズ（base）を決めておき、そこに一定の比率（ratio）を 繰り返し掛けたり割ったりして、H1、H2、本文、キャプションといった複数の文字サイズを まとめて作り出す方法です。たとえば本文を16pxに設定して比率を1.25にすると、上に向かって 20px、25px、31pxと見出しサイズが自動的につながり、下に向かってキャプションのサイズも 自然に導かれます。音楽の音階が決まった間隔で並ぶように、文字サイズも一定の比率で 連なると、互いに調和した響きが生まれます。つまりサイズをひとつずつ手で選ぶのではなく、 たったひとつのルールからサイズのセットをまるごと生成する、という考え方です。

なぜ重要か

画面には見出し、小見出し、本文、補足説明のように重要度の異なる文字が混ざり合っています。 これらのサイズが互いに無関係な数字で決められると階層がぼやけてしまい、どれがより大切なのかが ひと目で伝わりません。タイプスケールはサイズ同士を同じ比率でつなげるので、見出しと本文の あいだに一定のリズムが生まれ、画面全体に整った印象を与えます。またサイズを勘で決めなくなるため、 ページごとに値がばらばらにずれてしまうことも減ります。サイズをあらかじめ計算しておけば、 新しい画面を作るたびに悩む必要はなく、すでにある段階から選んで使うだけで済みます。結果として ユーザーは特別な努力をしなくても文章の構造を読み取れ、開発者はいくつかの決まったサイズだけを 管理すればよくなるので、メンテナンスもずっとシンプルになります。

よくある間違い

• サイズをその場その場の勘で決めてしまうことです。18px、22px、28pxのようにルールのない値が 画面ごとに積み重なると階層があいまいになり、ページ同士が微妙に違って見えて全体が 散らかった印象になります。あとからサイズを変えようとしても、どこをどれだけ直せばよいか わからず修正が難しくなります。
• 段階を細かく分けすぎることです。15px、16px、17pxのようにほとんど差のないサイズを いくつも用意すると、ユーザーはその違いを認識できず、管理すべき値だけが無駄に増えて かえって混乱してしまいます。
• 比率を決めるときに画面の性格を考えないことです。情報密度の高いダッシュボードで 見出しを劇的に大きくする大きな比率を使うと、画面がすぐに埋まってしまい、かえって スペースが足りず窮屈になります。

実務のヒント

• サイズは勘で決めず、比率から生成しましょう。比率が大きいほど（1.5）見出しが劇的に 大きくなって力強くなり、小さいほど（1.2）落ち着いた情報中心の印象になります。作ろうとする 画面の雰囲気に合わせて、まず比率から選ぶのが正しい順序です。
• 実際に使う段階の数は5〜7個ほどに絞りましょう。見出し二、三段階と本文、キャプションがあれば たいていの画面をカバーでき、選択肢が少ないほど毎回の判断が速くなり、画面同士の 一貫性も自然と保たれます。
• 作ったスケールの値はデザイントークンとして保存しておきましょう。コードのあちこちに数字を 直接埋め込まず、トークンで参照すれば、あとから基準サイズや比率をひとつ変えるだけで 画面全体の文字サイズが一気に調整され、手間がぐっと減ります。

関連概念