メディアクエリに頼らない、次世代のレスポンシブ・タイポグラフィ。 最小・最大サイズを指定するだけで、複雑な計算が必要なclamp()関数を即座に生成します。
The quick brown fox jumps over the lazy dog.
font-size: clamp(1.000rem, 0.333rem + 3.333vw, 3.000rem);Advertisement
Fluid Typography（流体タイポグラフィ）とは？
Fluid Typographyは、画面幅（Viewport Width）に合わせて文字サイズを「滑らかに」拡大縮小させる手法です。 従来のメディアクエリ（@media）を用いた手法では、特定のブレイクポイントで文字サイズが急激に変化していましたが、clamp()関数を用いることで、あらゆるデバイス幅で最適なサイズを維持できます。
こんなシーンで便利です
モダンなWebサイト制作
スマホから大画面デスクトップまで、一つのスタイル定義で完璧な見出しサイズを実現。メディアクエリの記述量を大幅に削減できます。
デザインシステムの実装
デザインガイドラインに基づいた最小・最大フォントサイズをコード化。一貫性のあるタイポグラフィシステムを構築する際に役立ちます。
LP（ランディングページ）の構築
インパクトのある巨大な見出しを、デバイス幅を問わず美しくレイアウトしたい場合に最適です。
アクセシビリティの向上
rem単位ベースの計算により、ユーザーがブラウザでフォントサイズを拡大した場合でも、レイアウトを崩さずに適切なスケールを維持します。
使い方は簡単 4ステップ
- 基準となる最小画面幅（例: 320px）と最大画面幅（例: 1280px）を入力します。
- それぞれの幅における最小フォントサイズと最大フォントサイズを指定します。
- リアルタイムで生成されるプレビューを確認し、スライダーでシミュレーションを行います。
- 生成された「font-size: clamp(...)」のコードをコピーしてCSSに貼り付けます。
※ルートフォントサイズは標準の16pxとして計算されます。独自のrem基準を設けている場合はご注意ください。
ご利用時の注意点
- clamp関数の構造：clamp(最小値, 可変値, 最大値) の形式で出力されます。
- SEOへの影響：適切にスケーリングされたテキストは可読性が高く、GoogleのCore Web Vitalsにおける「LCP」などの改善にも寄与する可能性があります。
- アクセシビリティ：本ツールはユーザーのブラウザ設定（文字サイズ変更）を壊さないよう、絶対単位(px)ではなく相対単位(rem)でコードを生成します。
Advertisement
画面幅とフォントサイズの可変シミュレーション（早見表）
最小幅375px(16px) 〜 最大幅1280px(32px) に設定した場合の計算値の目安です。
| 画面幅 (Viewport Width) | 計算されるフォントサイズ | 表示イメージ |
|---|---|---|
| 375px 以下 | 1.0rem (16px) | スマートフォンの最小サイズ（固定） |
| 600px | 1.24rem (約19.8px) | タブレット・小型デバイス |
| 800px | 1.47rem (約23.5px) | iPad・ラップトップ（可変中） |
| 1024px | 1.72rem (約27.6px) | 標準的なデスクトップモニター |
| 1280px 以上 | 2.0rem (32px) | 大画面ディスプレイの最大サイズ（固定） |
【SEO・アクセシビリティへのヒント】
CSSの clamp() を使用する際は、中央の可変値（推奨値）に必ず rem と vw を組み合わせた計算式 を使用してください。font-size: clamp(1rem, 5vw, 2rem) のように vw 単体で指定すると、ブラウザのズーム機能が正しく動作せず、アクセシビリティの評価（WCAG準拠）を下げる原因になります。本ツールが生成するコードはこの問題を自動的に回避します。
よく使われる実装例
- h1見出し: 2rem 〜 4rem
- h2見出し: 1.5rem 〜 2.5rem
- 本文（リード文）: 1rem 〜 1.25rem
主要なブレイクポイント
- Mobile: 320px / 375px
- Tablet: 768px
- Desktop: 1024px / 1280px / 1440px
よくある質問（FAQ）
Q.vwだけで指定するのと何が違いますか？
A. vw単位のみだと、極端に小さな画面で文字が小さくなりすぎたり、大画面で巨大になりすぎたりします。clamp()を使えば、それらに上限と下限を設けることができます。
Q.どのブレイクポイントを最小・最大にすべきですか？
A. 一般的には最小をモバイル幅の320px〜375px、最大をデスクトップの標準的なコンテンツ幅である1200px〜1440pxに設定するのが定石です。
Q.calc()を使った古い手法との違いは？
A. 以前はcalcとvwを組み合わせた複雑な計算式が必要でしたが、clamp()はそれを1つのプロパティで完結させ、可読性を劇的に向上させたモダンな書き方です。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。