フルードタイプスケール生成ツール（clamp()）

:root { --step--2: clamp(0.6944rem, 0.6593rem + 0.1759vw, 0.8rem); --step--1: clamp(0.8333rem, 0.7778rem + 0.2778vw, 1rem); --step-0: clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem); --step-1: clamp(1.2rem, 1.0792rem + 0.6042vw, 1.5625rem); --step-2: clamp(1.44rem, 1.269rem + 0.8552vw, 1.9531rem); --step-3: clamp(1.728rem, 1.4902rem + 1.189vw, 2.4414rem); --step-4: clamp(2.0736rem, 1.7475rem + 1.6303vw, 3.0518rem); --step-5: clamp(2.4883rem, 2.0462rem + 2.2106vw, 3.8147rem); --step-6: clamp(2.986rem, 2.3919rem + 2.9706vw, 4.7684rem); }

変数	最小時 (px)	最大時 (px)	×
--step-6	47.78	76.29	1.6
--step-5	39.81	61.04	1.53
--step-4	33.18	48.83	1.47
--step-3	27.65	39.06	1.41
--step-2	23.04	31.25	1.36
--step-1	19.2	25	1.3
--step-0	16	20	1.25
--step--1	13.33	16	1.2
--step--2	11.11	12.8	1.15

変数

最小時 (px)

最大時 (px)

--step-6

47.78

76.29

1.6

--step-5

39.81

61.04

1.53

--step-4

33.18

48.83

1.47

--step-3

27.65

39.06

1.41

--step-2

23.04

31.25

1.36

--step-1

19.2

1.3

--step-0

1.25

--step--1

13.33

1.2

--step--2

11.11

12.8

1.15

ライブプレビュー

シミュレーションするビューポート幅1024px

6 · 68.7pxフルードな文字は画面に合わせてなめらかに変化します。

5 · 55.4pxフルードな文字は画面に合わせてなめらかに変化します。

4 · 44.7pxフルードな文字は画面に合わせてなめらかに変化します。

3 · 36pxフルードな文字は画面に合わせてなめらかに変化します。

2 · 29.1pxフルードな文字は画面に合わせてなめらかに変化します。

1 · 23.5pxフルードな文字は画面に合わせてなめらかに変化します。

0 · 18.9pxフルードな文字は画面に合わせてなめらかに変化します。

-1 · 15.3pxフルードな文字は画面に合わせてなめらかに変化します。

-2 · 12.3pxフルードな文字は画面に合わせてなめらかに変化します。

モジュラータイプスケールとは

モジュラースケールは、基準サイズに同じ比率を繰り返し掛けていく方法です。基準 16px、比率 1.25 なら 16、20、25、31.25……となり、割り算をすれば小さいステップの 12.8 と 10.24 が得られます。すべてのサイズが 1 つの比率でつながっているため、見出し・本文・キャプションが同じファミリーとして調和して見えます。

2 つの比率を使う理由

小さな画面には見出しと本文の劇的なコントラストを入れる余裕がなく、大きな画面ではコントラストがないと平板に見えます。そこでこのツールでは、最小ビューポート用と最大ビューポート用に別々の比率を設定します。よく使われる組み合わせは、スマートフォンで短3度（1.2）、デスクトップで長3度（1.25）か完全4度（1.333）です。各ステップはそれぞれ独立した clamp() の値になり、ビューポートが広がるにつれて小さいスケールから大きいスケールへ移行します。

書き出した変数の使い方

書き出されるのは、--step--2 から --step-6 までの変数を含む :root ブロックです。たとえば h1 にステップ 5、h2 にステップ 4、本文にステップ 0、注記にステップ −1 を割り当てます。変数名は要素ではなくスケール上の位置を表しているので、あとから基準サイズと比率を変えるだけで、システム全体を調整し直せます。

大きいステップには注意してください。比率が大きいと、WCAG 1.4.4 に由来する 2.5 倍のズーム目安を超えることがあります。表には範囲の両端でのサイズが表示されるので、増え方が急すぎるステップを見つけ、必要に応じてデスクトップ側の比率を下げましょう。

比率の選び方

1.125 や 1.2 といった小さな比率は、情報量の多い UI、ダッシュボード、ドキュメントに向いています。1.25 や 1.333 などの中くらいの比率は、マーケティングページやブログに幅広く使えます。1.5 や黄金比 1.618 のような大きな比率は、雑誌的な強いコントラストを生みますが、扱いやすくするにはステップ数を減らす必要があります。

よくある質問

ステップはいくつ必要ですか？

多くのサイトは 5〜7 段階です。基準より下の 1〜2 段をキャプションやラベルに、基準を本文に、上の 3〜4 段を見出しに使います。ツールは −2〜+6 を出力するので、不要なものは削除してください。

ブログに合う比率は？

モバイルで短3度（1.2）、デスクトップで長3度（1.25）か完全4度（1.333）にすると、本文を圧迫せずに見出しをはっきりさせられます。

これらの変数は Tailwind で使えますか？

使えます。text-[length:var(--step-2)] と書くか、Tailwind のテーマにフォントサイズとして登録すれば、text-step-2 のようなユーティリティで指定できます。

負のステップが --step--1 という名前なのはなぜですか？

変数名は --step- にステップ番号を続けたものなので、ステップ −1 は --step--1 になります。有効なカスタムプロパティ名であり、多くのフルードタイポグラフィツールの命名規則とも一致しています。