デザイン / タイポグラフィ
タイプスケールジェネレーター（CSS・Tailwind用モジュラースケール）
基準フォントサイズと1.25や黄金比などの比率からモジュラータイプスケールを生成します。独自のテキストで各ステップをプレビューし、サイズをCSSカスタムプロパティまたはTailwindのfontSize設定としてremまたはpxでコピーできます。
タイプスケールジェネレーター（CSS・Tailwind用モジュラースケール）: 各サイズは、ステップごとに基準サイズへ比率を1回ずつ掛けて算出します。16 pxとメジャーサードの1.25を使用した場合、上のステップは20、25、31.25、39.06、48.83 px、下のステップは12.8と10.24 pxです。サイズはpxとremで一覧表示され、Tailwindのテキストサイズと同じくxsから4xlまでの名前が付けられます。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
:root {
--step-5: 3.0518rem;
--step-4: 2.4414rem;
--step-3: 1.9531rem;
--step-2: 1.5625rem;
--step-1: 1.25rem;
--step-0: 1rem;
--step--1: 0.8rem;
--step--2: 0.64rem;
}各ステップは、1つ下の値に比率を掛けたものです。基本サイズが16 px、比率が1.25の場合、上のサイズは20、25、31.25 px、下のサイズは12.8、10.24 pxになります。1.125のような小さい比率は情報量の多いインターフェースに適し、1.5のような大きい比率は見出しにメリハリを与えます。rem値では、ブラウザのデフォルトのルートサイズが16 pxであると想定します。
比率名の由来
名前は音楽の音程に由来します。完全5度の周波数比は3 : 2なので、1.5を基準にしたタイプスケールは、完全5度離れた音と同じ比率で大きくなります。Tim Brownのモジュラースケールによって、この考え方はウェブで広く知られるようになりました。
黄金比の1.618では変化幅が非常に大きくなります。詳しくは黄金比計算機で説明しています。
丸め処理
ブラウザは小数のピクセルサイズを描画できるため、31.25 pxのままで問題ありません。デザインシステムで整数のピクセル値が必要な場合は、各ステップを丸め、ツールと同じようにrem値を小数点以下4桁にしてください。その他の値はpxからremへの変換ツールで変換できます。
使い方
- 基準サイズを入力し、比率を選択します。
- 上下にいくつステップ進めるかを設定し、入力したテキストでプレビューします。
- CSS変数またはTailwind設定をコピーします。
プライバシーと制限事項
すべての処理はブラウザ上で実行されます。
関連ツール
よくある質問
どの比率を使えばよいですか？
テキストが多いインターフェースや小さな画面には1.125や1.2などの穏やかな比率が適しています。エディトリアルページやランディングページでは、見出しをより印象的にするため1.333から1.618を使用できます。
remを使う理由は何ですか？
remのサイズは閲覧者のブラウザのフォントサイズ設定に従うため、文字を大きくする必要がある人にはテキストも大きく表示されます。変換ではルートのデフォルト16 pxを前提としています。
サイズを可変にできますか？
はい。ステップに設定したい最小サイズと最大サイズを使い、CSSのclampジェネレーターでclamp()式に変換できます。
無料ツール · ブラウザ内で · アカウント不要