見出しフォントサイズスケール — タイプスケールのベストプラクティス

フォントサイズスケールの構築

タイプスケールとは、一貫した数学的比率に基づくフォントサイズのセットです。任意のサイズを選ぶ代わりに、スケールが調和のとれた自然な視覚的リズムを作り出します。

一般的なタイプスケール比率

比率	値	特徴
マイナーセカンド	1.067	非常に微妙
メジャーセカンド	1.125	穏やか
マイナーサード	1.200	バランス
メジャーサード	1.250	クラシック
パーフェクトフォース	1.333	大胆
ゴールデンレシオ	1.618	ドラマチック

スケールの構築（メジャーサード、1.250）

16pxベースから：

:root {
  --text-xs: 0.64rem;    /* 10.24px */
  --text-sm: 0.8rem;     /* 12.80px */
  --text-base: 1rem;     /* 16.00px */
  --text-lg: 1.25rem;    /* 20.00px */
  --text-xl: 1.563rem;   /* 25.00px */
  --text-2xl: 1.953rem;  /* 31.25px */
  --text-3xl: 2.441rem;  /* 39.06px */
  --text-4xl: 3.052rem;  /* 48.83px */
}

レスポンシブの考慮事項

モバイルではより狭い比率（マイナーサード：1.200）を使用し、デスクトップではより広い比率（パーフェクトフォース：1.333）を使用してください。これにより、小さな画面で見出しが大きすぎるのを防ぎます：

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

フォントペアリングとサイズの組み合わせ

見出しフォントはスケールの大きい側（2xl-4xl）に設定し、本文テキストはベースサイズのままにします。サイズ間の数学的関係が、選択したフォントペア間の関係と同じ調和を生み出します。