タイプスケールジェネレーター
流動的なclamp() CSSに対応したタイプスケールジェネレーター | We.Inc
基準サイズと比率からモジュラータイプスケールを作成します。すべての段階に流動的なclamp()値が付き、ライブプレビューと、コピーできるCSSやTailwindの変数も用意しています。
タイプスケールジェネレーター
タイプスケールとは、基準のフォントサイズに1つの比率を繰り返し掛けていくもので、すべての見出しサイズが本文と関連づけられます。スマートフォン用とデスクトップ用にそれぞれ基準サイズと比率を選ぶと、このジェネレーターが各段階をremとvwによるclamp()値に変換し、2つの幅の間でなめらかに大きくなるようにします。
よく使われる比率と向いている用途
- 増4度
- ポスター、インパクトのあるランディングページ
- 完全5度
- ポスター、インパクトのあるランディングページ
- 黄金比
- ポスター、インパクトのあるランディングページ
多くのタイプスケールツールは、固定されたサイズのセットを1つだけ出力します。このツールは小さな画面用と大きな画面用の2つのスケールを作り、clamp()でつなぎます。そのため、大量のメディアクエリの代わりに、段階ごとに1つのルールだけで済みます。
なぜ比率を2つ使うのか
- 1440ピクセルのモニターでゆったり見える比率でも、スマートフォンでは見出しが4行に折り返されてしまいます。小さな画面では1.2のような控えめな比率を、大きな画面では1.25や1.333のような広い比率を使えば、デスクトップでは見出しの力強さを保ち、モバイルでは読みやすさを保てます。
- ゼロより下の段階は逆の仕組みで、基準サイズを比率で割ります。これにより、キャプションや注記のサイズも比率を保ったまま得られます。
clamp()の値の求め方
- ツールは各段階について、狭い幅でのサイズと広い幅でのサイズを把握しています。その2点の間に直線を引き、傾きが推奨値のvwの部分に、始点のオフセットがremの部分になります。
- clamp(min, preferred, max)は、狭い幅より下では最小値に、広い幅より上では最大値にサイズを固定します。推奨値にremを混ぜることが重要です。vwだけのサイズはブラウザーのズームを無視しますが、remの部分があれば、ユーザーが拡大したときにも大きくなります。
- MDNによると、clamp()で文字サイズを設定する場合、最大値を最小値の2倍以上にすれば、WCAG 1.4.4のサイズ変更の基準である200パーセントのズームまで文字を拡大できます。控えめな流動範囲だけではこれを満たせないため、最も大きな段階はブラウザーのズームを200パーセントにしてテストしてください。
- ルートのフォントサイズ（CSSでhtmlのサイズを変えていなければ16）と、狭いビューポート幅、広いビューポート幅を設定します。
- 両端それぞれに基準サイズと比率を選びます。同じ値なら固定スケール、異なる値なら流動的なスケールになります。
- 基準より上と下に必要な段階の数を選びます。多くのサイトは上に4〜5段階、下に1〜2段階を使っています。
- プレビュー幅のスライダーを動かすと、どの画面サイズでもすべての段階を確認できます。その後、CSS変数かTailwindのテーマブロックをコピーします。
- 本文は16〜18ピクセルから始めましょう。これより小さくすると、スマートフォンで長文を読むのがつらくなります。
- サイズが大きくなるほど行の高さを小さくしましょう。本文は約1.5、大きな見出しは1.1〜1.2にするとバランスよく見えます。
- 6段階を超えることはめったにありません。プレビューで2つの段階がほとんど同じに見えたら、1つを削りましょう。
- 変数には要素名ではなく段階で名前を付けましょう（h2ではなくstep-3）。そうすれば、カードのタイトルに見出しのサイズを使っても混乱しません。
よくある質問
タイプスケールに適した比率はどれですか？
文字の多いサイトなら、1.2（短3度）か1.25（長3度）が無難な選択です。1.333（完全4度）は、短く力強い見出しを使うマーケティングページに向いています。1.5以上の比率は大きく跳ね上がるため、ポスターには合いますが、すぐに巨大な見出しになってしまいます。
黄金比はタイポグラフィに適していますか？
約1.618と非常に急な比率で、16pxから5段階上がるだけで170pxを超えてしまいます。2〜3段階の見出し用スケールなら使えますが、ほとんどのインターフェースでは、より小さな比率のほうが読みやすくなります。
vwだけでなくremとvwを組み合わせるのはなぜですか？
vwだけでサイズを指定した文字は、ブラウザーの文字ズームに反応しないため、文字を拡大する人が困ってしまいます。推奨値にremの部分があればズームが機能し続け、幅の間でのなめらかな拡大はvwが担います。
出力をTailwind CSSで使えますか？
はい。Tailwind v4では、@themeブロック内の各--text-*変数からtext-*ユーティリティが作られます。Tailwindの出力を貼り付ければ、マークアップでtext-step-2のようなクラスを使えます。
CSSでスケールを使う
具体例：基準は375pxで16px、1280pxで18pxに増え、比率は1.2から1.25に増えます。
カスタムプロパティとしての段階
各段階は1つのclamp()です。要素やユーティリティクラスに適用し、段階ごとに行の高さも設定します。
ライブの結果
同じ変数を小さなページで使った例です。コードを編集すれば別の値を試せます。フレームは幅が狭いため、小さな画面側の表示を確認できます。
比率の名前と正確な値
音楽的な名前は音程の周波数比に由来しています。ここに示す各値は、正確な分数を小数点以下3桁に丸めたものです。
名前の付いた比率
スケールを作成する
小さな画面と広い画面それぞれに基準サイズと比率を設定します。すべての段階に、2つの幅の間でなめらかに大きくなるclamp()値が付き、ライブプレビューとコピーできるCSSも表示されます。
- 短2度
- 長2度
- 短3度
- 長3度
- 完全4度
- 増4度
- 完全5度
- 黄金比
ルートのフォントサイズ（px）
狭い幅（px）
広い幅（px）
基準より上の段階数（最大8）
狭い幅での基準サイズ（px）
広い幅での基準サイズ（px）
狭い幅での比率
広い幅での比率
基準より下の段階数（最大4）
プレビューのテキスト
いろはにほへと
画面幅{n}pxでのプレビュー
段階 {n}
サンプル
出力形式
CSS変数
コードをコピー
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る