タイポグラフィスケールとは

タイポグラフィスケールは、見出し・本文・補足テキストなどの文字サイズを数学的な比率で決定するシステムです。一定の倍率を使うことで、視覚的に調和のとれた文字サイズの体系を作ることができます。

主なスケール比率

  • Minor Second（1.067）：小刻みな変化。密度の高いUIに
  • Major Second（1.125）：ニュースサイト・情報密度の高いサイト
  • Minor Third（1.2）：汎用的でバランスがよい。多くのWebサイトで使われる
  • Major Third（1.25）：はっきりした階層感
  • Perfect Fourth（1.333）：余白を活かしたモダンなデザインに
  • Golden Ratio（1.618）：ドラマチックな階層感。ランディングページなど

スケールの計算例（ベース16px、比率1.25）

  • xs：10.24px（0.64rem）
  • sm：12.8px（0.8rem）
  • base：16px（1rem）
  • lg：20px（1.25rem）
  • xl：25px（1.5625rem）
  • 2xl：31.25px（1.953rem）
  • 3xl：39.06px（2.441rem）

CSSカスタムプロパティでの実装

:root {
  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
}

Tailwind CSSとの対応

Tailwind CSSのデフォルトフォントスケール（text-xs〜text-9xl）はMajor Thirdをベースに設計されています。カスタムフォントサイズを設定する際は、同様の比率を維持することで一貫性のあるデザインになります。