タイプスケールとは

タイプスケールとは、デザインシステムが許容するフォントサイズを順に並べた集合で、通常は基準サイズに一定の比率を掛けて作ります。テキストをこの段階に限定することが、多人数で作る画面のタイポグラフィを一貫させる仕組みです。

スケールの作り方

基準サイズを決めます。ふつうは 16px です。ブラウザの既定値であり、本文が本来あるべきサイズだからです。次に比率を決め、上下に掛けていきます。

16px を基準に 1.25（長三度）の比率を取ると、おおよそ次のようになります。

12px  ← 16 / 1.25 / 1.067
14px
16px  ← 基準
20px
25px
31px
39px

そのうえで、値は扱いやすい数に丸めます。よく使われる比率は 1.125（控えめ。情報密度の高い画面向き）から 1.5（劇的。アプリケーションよりマーケティングページ向き）までです。

スケールがないと、サイズはその都度個別に選ばれ、アプリケーションには誰も違えるつもりのなかった 13px・14px・15px の文字が溜まっていきます。どれか一つが特定できるほど間違っているわけではないのに、全体としてどこか詰め切れていない印象になります。

スケールは縦のリズムも扱いやすくします。サイズが既知の比率で関係していれば、行の高さや余白もコンポーネントごとに調整するのではなく、予測できる形でそれに結び付けられます。

サイズはタイポグラフィの決定の一部にすぎません。完全なトークン群は、各段に次を組み合わせます。

サイズだけをトークン化した体系は、残る三つをコンポーネントごとに決め直させます。そこから不揃いが戻ってきます。

段をサイズではなく役割で名付けるのは、色の場合と同じ理由で価値があります。

--font-size-body: 16px;
--font-size-heading-2: 25px;

--text-lg はサイズを表します。--font-size-heading-2 は決定を表し、その指し先を変えるのに見出しを一つずつ探す必要はありません。

よくある組み合わせは、見出しに個性のある表示用書体、本文に可読性の高い実務的な書体です。失敗の形は、似ているが同一ではない二書体を選ぶことで、これは決定ではなく手違いに見えます。対比させるか揃えるか。「ほぼ同じ」で止めないことです。

生成される体系には書体の組み合わせと完全なスケールが含まれ、各段にサイズ・ウェイト・行の高さ・字間のトークンが付きます。いずれもプロンプトで説明されたプロダクトに合わせて選ばれます。