フルードタイポグラフィとは
従来のレスポンシブな文字組みでは、いくつかの固定サイズを用意し、メディアクエリで切り替えていました。スマートフォンは 16px、タブレットは 18px、デスクトップは 20px といった具合です。フルードタイポグラフィは、この段差をビューポート幅に応じて連続的に変わる関数に置き換えます。CSS clamp() を使えばルール全体が 1 行に収まり、2 つの端点の間のあらゆる幅に対して、ブラウザが適切なサイズを計算してくれます。
clamp() の背後にある計算式
フルードなサイズは、（最小ビューポート, 最小サイズ）と（最大ビューポート, 最大サイズ）の 2 点を通る直線です。傾き =（最大サイズ − 最小サイズ）÷（最大ビューポート − 最小ビューポート）で、これに 100 を掛けると vw の係数になります。切片 = 最小サイズ − 傾き × 最小ビューポートです。結果は clamp(最小サイズ, 切片 + 傾き·100vw, 最大サイズ) となります。上のジェネレーターはまさにこの計算を行い、指定した桁数で丸めています。
サイズの選び方
本文の文字サイズは、それほど大きく変える必要はありません。16〜18px や 16〜20px で、ほとんどの読み物レイアウトに対応できます。フルード化の恩恵が大きいのは見出しです。ノートパソコンで映える 48px の見出しも、スマートフォンでは画面の半分を占めてしまいます。いちばん大きな見出しから順に決め、文字が小さいほど最小値と最大値の比率を小さくするのがコツです。
ビューポートの範囲は、端末の一覧ではなくレイアウトから決めましょう。最小値は 320px か 360px が一般的です。最大値は、コンテンツのコンテナが max-width に達する幅です。それ以上では行の長さが伸びないので、フォントサイズも大きくし続ける必要はありません。
アクセシビリティのチェックリスト
最小値・最大値・切片を rem で指定し、ユーザーのフォント設定が反映されるようにします。200% にズームして WCAG 1.4.4 を確認しましょう。最大値が最小値の約 2.5 倍を超えると、ズームで文字が十分に大きくならないおそれがあり、ツールが警告を表示します。行の高さは相対値（例：1.5）にしてフォントサイズに連動させ、最も長い単語を最も狭い画面で確認してください。