Fluid Typography
CSS clamp()計算ツール
画面幅に応じて滑らかに変わるフォントサイズを生成し、仮想ビューポートを動かして確認できます。
Generator
clamp()を生成
生成先プロジェクトのルートフォントサイズを入力します。
生成されたCSS
clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem)Live Preview
仮想ビューポートプレビュー
仮想ビューポート幅
スライダーまたは数値入力で、プレビューする幅を設定します。
仮想幅: 760px
現在のサイズ: 20px / 1.25rem
現在の状態: 流動範囲
仮想幅に応じてサイズが変化しています。
このテキストでフォントサイズを確認できます
Guide
使い方
- 変化を始める幅と終える幅をpxで入力します。
- それぞれの幅でのフォントサイズとルートフォントサイズを入力します。
- 仮想幅を動かしてプレビューとグラフを確認し、生成されたCSSをコピーします。
Formula
計算の考え方
2つのビューポート幅とサイズから直線の傾きと切片を求め、remとvwで中央項を組み立てます。
MIN・MAXはビューポート幅の境界です。