タイポグラフィスケール ジェネレーター
基準サイズと比率からモジュラータイポグラフィスケールを生成 — ライブプレビュー、px/rem表、コピー可能なCSS変数付き。
604回閲覧
なぜモジュラースケールなのか
見出しのサイズを目分量で決めるのではなく、モジュラースケールは基準サイズに一定の比率をステップごとに掛け合わせます。16 pxの基準に1.25（メジャーサード）の比率を適用すると、20、25、31.3、39.1、48.8…となります。サイズは音楽的な関係で結びついており、基準や比率を変えれば階層全体が一緒に調律し直されます。
よく使われる比率: 1.125（メジャーセカンド — 密なUI向け）、1.25（メジャーサード — 安全な既定値）、1.333（パーフェクトフォース — エディトリアル向け）、1.618（黄金比 — 劇的な差、少ない段階数で十分）。生成されたCSSカスタムプロパティはそのままスタイルシートに貼り付けられます。rem値は16 pxのルートを前提としています。
よくある質問
どの比率を選べばよいですか？
製品・UI系の作業は通常1.125〜1.25に収まります（見出しが本文よりそれほど大きくならない）。マーケティングやエディトリアル系のページは1.333〜1.618でも十分機能します。h1が強すぎると感じたら、1つのサイズを手動調整するのではなく比率自体を一段階下げましょう。
なぜスケールは基準より下にも広がるのですか？
負のステップ（基準 ÷ 比率）は、同じシステムに属するキャプションや注釈用の小さな文字サイズを与えます — 16/1.25のスケールでは、適当な13ではなく12.8 pxになります。
pxとremのどちらを使うべきですか？
CSSではremを使いましょう。ブラウザのフォントサイズを大きくしたユーザーには、スケール全体が比例して大きく表示されます。px列はデザインツールでのモックアップ用です。
関連ツール
問題を報告
タイポグラフィスケール ジェネレーター