Type Scale Calculator

使い方

1. 基準サイズを入力します。これが本文サイズになり、スケール全体の基準点になります。
2. 比率を選びます。Minor Second のような小さな比率は情報密度の高い画面に、Perfect Fifth のような大きな比率は編集系のレイアウトに向きます。
3. 出力の小数点以下の桁数を選びます。2 桁が実用的な既定値です。
4. プレビュー行で各段の大小関係を確認し、カスタムプロパティのブロックをコピーします。
5. スタイルシートに貼り付け、見出しの強弱が足りない場合はその段だけ手で調整します。

よくある用途

• デザインシステムの立ち上げ — 1 つの判断から 8 つの一貫したサイズを導けます。
• 比率の比較 — 2 つの比率を切り替えて h1 の動き幅を確認します。
• レガシー CSS の整理 — 散在するハードコードされたサイズを変数の組に置き換えます。
• タイポグラフィの学習 — 指数が大きくなるほど比率が効いてくる様子を確認します。

よくある質問

Q: 6 段ではなく 8 段なのはなぜですか？ A: 見出し 6 段と本文が一般的な構成ですが、本文より下に補足テキスト・キャプション・注記用の段が必要です。手作業で拡張しなくて済むよう、最初から含めています。

Q: どの比率を選べばよいですか？ A: 内容によって変わります。データ密度の高い画面は 1.067 から 1.2、マーケティングページは 1.333 から 1.5、大きな見出しには黄金比 1.618 が使えます。プレビューを見比べて決めてください。

Q: 1 つのページで比率を使い分けられますか？ A: できます。狭い画面では小さな比率、広い画面では大きな比率を使うチームも多いです。スケールを 2 つ生成し、メディアクエリで切り替えてください。