モジュール型タイプスケール — すべてのデザインシステムのフォントサイズの数学的原理

あなたはモックアップをじっと見つめています。フォントサイズは 14px, 16px, 18px, 24px, 32px, 48px。何も間違っているように見えませんが、どこか少し違和感があります。サイズの変化が均一ではありません。見出しはサブヘッダーに近すぎます。小さなラベルは本文とつながっていません。あなたは丸みを帯びた、自然な数字を選んできましたが、その結果が少し任意に見える理由を不思議に思っています。それは任意です。それが問題なのです。

実際、人間がサイズの差を認識する方法は概ね対数的です。16pxと32pxの間の差を「2倍」とは感じません。それは1ステップとして認識されます。タイプグラフィックが視覚的に 比例的に一貫しているように感じさせるには、サイズの間隔は比に基づいていなければなりません。これはモジュラースケールの考え方です。

モジュラースケールが実際に何なのか

モジュラースケールとは、基準値を一定の比で繰り返し掛けた数の列です。その式は以下の通りです。

size = base × ratio^n

どこへ n nはステップ番号（基準値は0、大きい場合は正、小さい場合は負）です。基準値が 16px で、比が 1.25 (大三度)の場合、次のようになります。

• 16 × 1.25^-2 = 10.24px
• 16 × 1.25^-1 = 12.8px
• 16 × 1.25^0 = 16px（基準値）
• 16 × 1.25^1 = 20px
• 16 × 1.25^2 = 25px
• 16 × 1.25^3 = 31.25px
• 16 × 1.25^4 = 39.06px

ステップごとの増加は、前の値より正確に25%大きいです。視覚的なジャンプが一貫しているのは、それが 一貫しているからです — 幾何学的に。それと比較して では、ジャンプは 14, 16, 18, 24, 32, 48です。丸みを帯びた数字に見せかけた、まったく不均一な間隔です。 +2, +2, +6, +8, +16名前付きの比（そしてそれぞれがどのような状況で使われるか）

名前は西欧の音楽の間隔から来ています。それらは同じ数学的関係を持っています。ここに実用的な配置を示します。

1.067 — 小二度：

• 非常に狭い。ステップはほとんど区別できません。単一のコンポーネント内の細かい本文の間隔に適していますが、見出し階層には不向きです。 1.125 — 大二度：
• やや微妙。濃密なUIで、明確な違いが必要だが、ドラマチックさを避けたい場合に適しています — データテーブルやダッシュボードなど。 1.25 — 大三度：
• ほとんどのウェブUIにとって最適な場所です。レベル間のコントラストが十分で、階層を明確に読める一方で、見出しの大きさが過剰に見えません。最も多くのデザインシステムで使われています。 1.333 — 完全四度：
• きれいで広く使われています。見出しに少しの権威を与えます。階層が明確で、ステップが少ない場合に適しています。 1.414 — 増強四度（√2）：
• A4用紙のアスペクト比です。完全四度よりもドラマチックで、編集コンテンツに適しています。 1.5 — 完全五度：
• レベル間のコントラストが強いです。ヘッダーは大きく、強調されます。編集レイアウト、ランディングページ、表示テキストがメッセージを伝える必要がある場合に適しています。 1.618 — 黄金比：
• 理論的には美しいが、実際には激しいです。2ステップ上がると見出しはすでに非常に大きくなります。表示用の要素にのみ使用し、全体のUI階層には適用しないでください。 フロントエンド開発者が製品UIを構築する場合、大三度（1.25）または完全四度（1.333）はほぼすべてのケースをカバーします。不明な場合は、最初に1.25を選びましょう。階層がやや平坦に感じたら、比を増やせばよいです。

実際の応用：16pxから大三度のスケール

ここに、大三度のスケール（比 = 1.25、基準値 = 16px）が7ステップでどのように見えるかを示します。

px値

ステップ	乗数	rem値	xs
10.24px	1.25^-2	0.64rem	sm
12.8px	1.25^-1	0.8rem	base
1rem	1.25^0	16px	lg
1.25rem	1.25^1	20px	xl
25px	1.25^2	1.5625rem	2xl
31.25px	1.25^3	1.953rem	3xl
39.06px	1.25^4	2.441rem	小数値についての注記：

remに正確に保持してよいです — ブラウザはサブピクセルレンダリングを適切に処理します。丸めることを必要とせず、数学的整合性を保ちます。計算をシンプルに保ち、ブラウザがその仕事を行いましょう。 12.8px と 31.25px CSSカスタムプロパティ：あなたのデザイントークンシステム 13px または 31px スケールを直接CSSカスタムプロパティに変換します。これにより、コードベースのどこかでも簡単に消費できるデザイントークンシステムが得られ、後で比を変更する場合も一括で更新できます。

それらをデザイントークンのように使用します：

ハードコードされた値に比べる利点は、デザイナーが比を1.333に変更した場合、7つの数値を一度に更新できるということです。すべてのコンポーネントが自動的に更新されます。デザインシステムがこのステップをスキップすると、50個のフォントサイズがコンポーネントファイルに散在し、開発者がそれぞれ追加します。開発者とデザイントークンの関係は複雑ですが、これが実際に機能する形です。

:root {
  --font-size-xs:   0.64rem;    /* 16 × 1.25^-2 = 10.24px */
  --font-size-sm:   0.8rem;     /* 16 × 1.25^-1 = 12.8px  */
  --font-size-base: 1rem;       /* base = 16px             */
  --font-size-lg:   1.25rem;    /* 16 × 1.25^1  = 20px     */
  --font-size-xl:   1.5625rem;  /* 16 × 1.25^2  = 25px     */
  --font-size-2xl:  1.953rem;   /* 16 × 1.25^3  = 31.25px  */
  --font-size-3xl:  2.441rem;   /* 16 × 1.25^4  = 39.06px  */
}

手計算で値を求める必要がない場合、

body        { font-size: var(--font-size-base); }
small       { font-size: var(--font-size-sm);   }
h3          { font-size: var(--font-size-xl);   }
h2          { font-size: var(--font-size-2xl);  }
h1          { font-size: var(--font-size-3xl);  }
.label      { font-size: var(--font-size-xs);   }

を選び、基準サイズと比を指定し、瞬時に完全なスケールを出力し、CSSカスタムプロパティをコピーできるようにします。

スケールを意図的に破る場合 フォント モジュラススケール 生成ツール スケールは法則ではなく、ツールです。以下のような場合に意図的に破ります。

表示ヘッダーには別 treatment が必要です

ほとんどのデザインシステムは、ボディテキストやUIコンポーネントには緊密な比（1.25または1.333）を、表示ヘッダーにはよりドラマチックな比（1.5または1.618）を使用しています。マーケティングページのヒーローヘッダーは、フォーム内のラベルと同様の進行を必要としません。Tailwindのデフォルトスケールはまさにこれを行っています — 小さいサイズでは緊密なステップ、表示サイズでは大きなジャンプ。

流動的なタイプが遷移を滑らかにします

モバイルビューで、デスクトップでうまくいった1.5の比は、ヘッダーが小さすぎたり大きすぎたりする場合があります。現代的な解決策は

です。これはモジュラースケールの最小値と最大値をアンカーとして保持し、ビューの幅に基づいてサイズを流動的に調整します。モジュラースケールが範囲を定義し、

が遷移を処理します。数学的整合性は保たれ、すべてのデバイスサイズで読みやすさが維持されます。 clamp():

h1 {
  font-size: clamp(1.953rem, 4vw + 1rem, 2.441rem);
}

文脈によるオーバーライドは問題ありません clamp() サイドバー内のラベルが

で大きすぎる場合、その文脈で

に下げることで正当な選択です。スケールは一貫したデフォルトを提供し、変更不可能なルールではありません。目標は視覚的な調和であり、数学的純粋性ではありません。文脈がそれを要求する場合にスケールを破り、ただ丸みを帯びた数字を取るのではなく、意識的に破るべきです。 h2 基準サイズ（通常は16px）を選び、視覚的な重みに合った比（UI用は1.25、少し強い存在を必要とする場合は1.333、編集コンテンツ用は1.5）を選び、スケールを生成し、CSSカスタムプロパティとして記述します。完了です。フォントサイズに数学的な関係が生まれ、コードを読むデザイナーがすぐにシステムを理解できます。 1.953remIO Toolsでは、基準サイズ、比、ステップ数を設定でき、CSSをコピーできるようにします。比を1.25から1.333に調整して、ヘッダーのサイズがどのように変化するかを確認してみてください。それが構築すべき直感です：各比が 1.5625rem どのように感じるかを理解すること。

まとめ

モジュラータイプスケール — すべてのデザインシステムのフォントサイズの背後にある数学

の フォント モジュラススケール 生成ツール モジュラータイプスケール — すべてのデザインシステムのフォントサイズの背後にある数学 1 モジュラータイプスケール — すべてのデザインシステムのフォントサイズの背後にある数学 - IO Tools モジュラータイプスケール — すべてのデザインシステムのフォントサイズの背後にある数学

あなたも好きかもしれません