モジュラータイポグラフィスケール計算ツール
ベースサイズ、比率、ステップ数からモジュラータイプスケールを生成します。デザインシステムのタイポグラフィトークンセットの基盤となるツールです。
モジュラータイポグラフィスケール計算ツールの使い方
- ベースフォントサイズをpxで入力します。
- モジュラー比率を選択します。
- 生成する最大ステップ数を選択します。
- Calculate をクリックしてカンマ区切りのリストを確認します。
使用例
- •タイポグラフィトークンの作成。
- •ブランドスタイルガイドのデザイン。
- •Figmaのテキストスタイルをコードで再現する。
計算式
size(step) = base × ratio^step。ステップ0はベースサイズを返し、上位のステップは指数的に増加します。
よくある質問
どの比率を使えばよいですか？
小さめの比率（1.125、1.200）は、密度の高いUIに適した控えめな階層を作ります。大きめの比率（1.414、1.500）は、編集的なコントラストを演出します。1.250はウェブの標準的な選択肢です。
整数ピクセルに丸めるべきですか？
remベースのスケールは小数値を保持できますが、pxトークンはレンダリングの精度のため通常0.5pxまたは整数ピクセルに丸められます。
Tailwindのスケールと同じですか？
違います。Tailwindは純粋なモジュラースケールではなく、手動で調整されたストップを使用しています。カスタムブランドが必要な場合は、この計算ツールで代替スケールを生成してください。