タイプスケール生成

タイプスケールは、1つの基準サイズに同じ比率を繰り返し掛けて得られるフォントサイズの集まりで、音楽の音程が音どうしを結びつけるのと同じ考え方です。こうすると、見出し、本文、キャプションがバラバラではなく、関連して見えます。このジェネレーターは、基準サイズと、控えめな短2度から劇的な黄金比までの定番の比率からスケールを作り、すべての段をpxとremと推奨の用途とともに並べ、CSSカスタムプロパティと見出しのルールを書き出し、小さい画面と大きい画面の間で各段をclamp()で流動的にすることもできます。

使い方

1. 基準（本文）のフォントサイズを入力します。通常は16 pxです。
2. 比率を選びます。文章が多いページやアプリには1.125〜1.25、大胆な編集記事やマーケティングページには1.333〜1.618が向きます。
3. 上と下に何段必要か、丸め方を選びます。
4. 必要なら「流動的」にチェックを入れてスマホ用に小さい基準サイズと比率を設定し、CSS変数と見出しのルールをコピーします。

計算式

size(n) = base × ratioⁿ · rem = px ÷ root size · fluid: clamp(small, intercept + slope × 100vw, large)

nは段です。0が基準で、正の段は大きく、負の段は小さくなります。流動的をオンにすると、各段に、小さい基準サイズと比率から求めた小さい画面のサイズと、メインの値から求めた大きい画面のサイズができ、傾き = (大きい値 − 小さい値) ÷ (大きい画面の幅 − 小さい画面の幅) です。

計算例

基準16 px、長3度（1.25）なら、段は12.8、16、20、25、31.25 pxで、remでは0.8、1、1.25、1.5625、1.9531です。h1は3段上の31.25 pxになります。黄金比ははるかに速く大きくなり、16、25.89、41.89 pxで、整数ピクセルに丸めると26 pxと42 pxです。