Fluid Typography 計算機
レスポンシブなフォントサイズ調整に便利なCSSの「clamp()」関数を、数値を入力するだけで自動計算します。
▶このツールについて
画面幅に合わせてフォントサイズが滑らかに変化するFluid Typography用の「clamp()」関数を自動計算できるツールです。スマホ向け・PC向けの画面幅とフォントサイズを入力するだけで、必要なCSSコードがサクッと完成します。
レスポンシブデザインで「スマホでは16px、PCでは24px、その間は画面サイズに合わせて徐々に大きくしたい」と思ったことはありませんか？ メディアクエリを何個も書かなくても、CSSの
clamp() という関数を使えば1行で実現できます。ただ、その計算式（推奨値のvwなど）を自力で弾き出すのは少し面倒です。このツールなら、デザインカンプに書かれている画面幅とフォントの最小・最大サイズを入れるだけで、最適な clamp() の値をパパッと算出できます。ツール操作
使い方
- 最小幅・最大幅・最小フォントサイズ・最大フォントサイズを入力します
- clamp()の推奨値が自動で生成されます
- 生成されたCSSをコピーしてプロジェクトに貼り付けます
いつ使うか
レスポンシブデザインでフォントサイズを画面幅に応じて変化させたい、clamp()の計算が面倒な場合。
使用例
clamp(1rem, 2.5vw + 0.5rem, 2rem) のような形式で出力。
よくある質問
clamp()とは？
CSSの関数で、最小値・推奨値・最大値の3つを指定し、その範囲内で値を返します。フォントサイズのレスポンシブ化に便利です。
Fluid Typographyのメリットは？
メディアクエリを多数書かずに、画面幅に応じてスムーズにフォントサイズが変化します。可読性とデザインの一貫性を両立できます。
clamp()の書き方は？
clamp(最小値, 推奨値, 最大値)の形式。例: clamp(1rem, 2.5vw + 0.5rem, 2rem)。推奨値はvwやcalc()でビューポートに連動させます。
Fluid Typographyとメディアクエリの違いは？
メディアクエリはブレークポイントで段階的に変化。Fluid Typographyは連続的にスムーズに変化。中間サイズのデバイスでも自然な表示になります。
clamp()の推奨値の計算方法は？
linear interpolation: 最小幅でのフォントサイズと最大幅でのフォントサイズから、vwを使った式を導出。このツールで自動計算できます。
レスポンシブフォントサイズのベストプラクティスは？
clamp()で最小・最大を設定し、中間はvwでスムーズに変化させる。極端に小さく/大きくならないよう範囲を設けるのが重要です。
Fluid Typographyはモバイル対応？
はい。ビューポート幅に応じて自動でスケールするため、スマホ・タブレット・PCすべてで適切なサイズになります。
clamp()のブラウザ対応は？
Chrome、Firefox、Safari、Edgeの最新版で対応。IE11は非対応のため、フォールバック（font-size: 1rem等）を先に指定します。
フォントサイズの最小値はいくつ？
アクセシビリティのため、本文は16px（1rem）以上が推奨。clamp()の最小値に1remを設定するのが一般的です。
Fluid Typographyの計算式は？
最小幅・最大幅・最小フォント・最大フォントから、clamp(最小, calc(最小 + (最大-最小) * (100vw - 最小幅) / (最大幅-最小幅)), 最大)のような形になります。このツールで自動算出できます。
関連ツール
タイポグラフィセット