メインコンテンツへスキップ
Redmoon Converters
🎨 デザイン・クリエイティブ

タイポグラフィスケール生成ツール(モジュラータイプスケール)

任意の基準サイズと比率(1.125〜1.618)からモジュラータイポグラフィスケールを生成し、CSSカスタムプロパティやTailwind設定としてコピーできます。

ブラウザの初期値は16pxです。
スケールのプレビュー
基準 16 px・比率 1.2
ステップpxremem行間プレビュー
計算の仕組み

モジュラースケールは、上に1段階進むごとに基準値に比率を掛け、下に1段階進むごとに比率で割ります。ステップ0が基準値、ステップ1=基準値×比率、ステップ−1=基準値÷比率、という具合です。

推奨される行間はサイズが大きくなるほど小さくなります:本文は1.6、見出しは1.4、ディスプレイサイズは1.1—`1.7 − 0.1 × stepAbove`で計算し、[1.05, 1.7]の範囲に収めています。

別名

typography scale calculatormodular type scalerem font size scalecss type scale

関連ツール