apply-typography-scale

スキル：タイポグラフィのスケールを適用する

目的

手作業で設計したフォントサイズ、ウェイト、色を使い、明確なタイポグラフィの階層を作成します。

基本ルール

1. 数学的ではなく、手作業で設計する — 小数ピクセルを使うモジュラースケールは避けます
2. px または rem を使い、em は使わない — 値が累積する問題を防ぎます
3. サイズの変化は最低 25% — 16px → 20px（25%）とし、16px → 18px（12.5%）にはしません
4. ウェイトは 2 種類のみ — 通常は 400/500、太字は 600/700
5. UI では 400 未満を使わない — 小さいサイズでは読みにくくなります

推奨スケール

マーケティングページ

Hero:     48-60px,  weight 700,  line-height 1.1
H1:       36-40px,  weight 700,  line-height 1.2
H2:       28-32px,  weight 600,  line-height 1.3
Body:     16-18px,  weight 400,  line-height 1.6
Small:    14px,     weight 400,  line-height 1.6
Caption:  12px,     weight 400,  line-height 1.5

アプリケーション／高密度 UI

H1:     30-36px,  weight 700
H2:     24px,     weight 600
H3:     20px,     weight 600
H4:     16px,     weight 600
Body:   14-16px,  weight 400
Small:  12-13px,  weight 400

行の高さのルール

サイズに反比例させます：

• 小さなテキスト（12-14px）：1.6-1.7（次の行を見つけやすくするため）
• 本文（16px）：1.5-1.6
• 大きな見出し（30px 以上）：1-1.2（補助を少なくするため）

行の長さ

• 最適：1 行あたり 45-75 文字
• 最大幅：段落は 20-35em
• 幅の広い段落：行の高さを 1.8-2.0 に増やします

判断基準

合格

• スケールが意図的に選んだ少数のサイズで構成され、用途ごとのサイズが明確に変化している
• タイポグラフィの階層が、サイズ、ウェイト、行の高さ、色を組み合わせている
• マーケティング、アプリ、コンテンツの各コンテキストで本文が読みやすい
• 行の長さと行の高さが、読書のコンテキストに合っている

不合格

• 階層を作れないほど小刻みな増分に頼っている
• UI テキストのフォントウェイトが軽すぎる
• 長文の行が長すぎる、または窮屈すぎる
• 入れ子になった要素で em のサイズが予測不能に累積する

よくある失敗パターン

失敗	例	修正
em 単位	親が 1.25em、子が 0.875em = 17.5px	px または rem を使います
小刻みな段階	16px、18px、20px	16px、20px、28px
ウェイト 300	細すぎる本文	最低 400
長い行	100 文字以上	35em に制限します
均一な行の高さ	すべて 1.5	サイズに応じて変えます

例

スケールの実装については、examples/typography-scale/ を参照してください。

参考資料

• references/hand-crafted-scales.md
• references/avoid-em-units.md
• references/line-height-proportion.md