タイポグラフィスケール計算ツール
ベースサイズと比率からフォントサイズ一覧を自動生成します。
| 名前 | px | rem | プレビュー |
|---|---|---|---|
| 4xl | 48.8 | 3.052 | あいうえお Aa |
| 3xl | 39.1 | 2.441 | あいうえお Aa |
| 2xl | 31.3 | 1.953 | あいうえお Aa |
| xl | 25.0 | 1.563 | あいうえお Aa |
| lg | 20.0 | 1.250 | あいうえお Aa |
| basebase | 16.0 | 1.000 | あいうえお Aa |
| sm | 12.8 | 0.800 | あいうえお Aa |
| xs | 10.2 | 0.640 | あいうえお Aa |
:root {
--font-4xl: 3.052rem; /* 48.8px */
--font-3xl: 2.441rem; /* 39.1px */
--font-2xl: 1.953rem; /* 31.3px */
--font-xl: 1.563rem; /* 25.0px */
--font-lg: 1.250rem; /* 20.0px */
--font-base: 1.000rem; /* 16.0px */
--font-sm: 0.800rem; /* 12.8px */
--font-xs: 0.640rem; /* 10.2px */
}スケール比率の選び方
- Minor Second (1.067): 差が小さい。本文テキスト中心のデザイン向け
- Major Third (1.25): バランスが良く、一般的なWebサイトに最適
- Perfect Fourth (1.333): 見出しと本文の差を明確にしたい場合
- Golden Ratio (1.618): 差が大きい。ランディングページなど大胆なデザイン向け