タイプスケール生成（文字サイズ体系）

基準サイズと比率のふたつから、見出し・本文・キャプションの文字サイズをひとまとまりとして作ります。ページ内のサイズに関係が生まれるので、ウェブサイトやアプリ画面、文書テンプレートを始めるときに使います。

使い方

1. 本文の「基準の文字サイズ」を px で入力し、「比率」を選びます。「カスタム」では 1.05〜2 の値を入力できます。
2. 「丸め」で小数を保持するか、整数 px にするか、「4px グリッド」に合わせるかを決めます。
3. 「行の高さ」を決めます。「見出しは詰める」は大きいサイズほど倍率を下げ、「すべて同じ」はひとつの値を使います。
4. 「プレビュー文」に自分の文章を入れ、「プレビューの書体」を切り替えて各段階を実寸で確認します。
5. 「CSS 変数をコピー」「要素の CSS をコピー」「JSON をコピー」を押します。

計算方法と補足

• 段階 n のサイズ = 基準 × 比率の n 乗です。段階は −2 (xs) から +6 (5xl) まで。段階 0 が本文 (p)、段階 1〜6 が h6 から h1 に対応します。
• rem は px を基準サイズで割った値、pt は px × 0.75 です（1 インチ = 96 px）。
• 「見出しは詰める」では、倍率が基準サイズで「本文の行の高さ」、基準の 3 倍で「見出しの行の高さ」になるよう直線的に下がります。「4px グリッド」では行ボックスも 4 px の倍数に丸めます。
• 設定はこのブラウザーに保存され、次回も同じ体系が表示されます。

よくある質問

ウェブサイトにはどの比率が向いていますか？

1.2 と 1.25 は長い記事に合う控えめな見出しになり、1.333 以上はポスターのような大きな見出しになります。小さい画面では小さめの比率のほうが見やすいことが多いです。

本文の文字サイズは何 px がよいですか？

16 px がブラウザーの既定で一般的な出発点です。長文では 17〜18 px もよく使われます。入力した基準サイズに合わせて残りの段階が決まります。

サイズを rem に変換するには？

表には px の隣に rem が表示されます。コピーした要素の CSS のように html に基準サイズを px で指定すると、1rem が基準サイズと等しくなります。

見出しの行の高さはどれくらいがよいですか？

本文は 1.5 前後、大きな見出しは 1.1〜1.25 程度がよく使われます。見出しが折り返したときに行間が空きすぎないためです。自動モードがこの変化を適用します。