CSS clamp() 計算機

画面幅に合わせて文字サイズがなめらかに変わる clamp() を計算します。最小・最大の文字サイズと、それを適用する画面幅を入れてください。

—

画面幅と文字サイズの関係

プレビュー（仮想の画面幅）

画面幅 768px

架空の喫茶店「みなと珈琲」秋の新メニュー

計算式：傾き＝(最大サイズ−最小サイズ)÷(最大幅−最小幅)、中央の値＝(最小サイズ−傾き×最小幅) ＋傾き×100 vw。1vw はビューポート幅の1%です。rem はブラウザの文字サイズ設定（初期値は多くの環境で16px）に連動するので、拡大表示にも追従しやすくなります。最大が最小の2.5倍を超えると、ブラウザの拡大機能で文字が十分大きくならない場合があるといわれます（WCAG 1.4.4 の観点）。実際の表示は各ブラウザで確認してください。

CSS clamp() 計算機でできること

画面幅に応じて文字サイズがなめらかに変わる CSS の clamp() を計算します。スマホでは小さく、PCでは大きくしたい見出しや本文のサイズを、メディアクエリなしで指定したいときに使えます。

使い方

「最小の文字サイズ」「最大の文字サイズ」に px で値を入れます。「本文 16→18」「見出し 24→40」などのボタンでも入れられます。
「この幅以下で最小」「この幅以上で最大」に、変化させる画面幅の範囲（px）を入れます。
必要なら「1rem の大きさ」を変え、「出力の単位」で rem か px を選びます。
表示された font-size の行を「CSSをコピー」でコピーし、グラフと「プレビュー」のスライダーで幅ごとの文字サイズを確かめます。

計算の仕組みと注意点

傾き＝(最大サイズ−最小サイズ)÷(最大幅−最小幅)、切片＝最小サイズ−傾き×最小幅として、clamp(最小, 切片 + 傾き×100vw, 最大) の形にしています。1vw はビューポート幅の1%です。
rem 出力ではブラウザの文字サイズ設定（初期値は多くの環境で16px）に連動するため、通常は rem がおすすめです。px 出力は設定に連動しません。
最大が最小の2.5倍を超えると、ブラウザの拡大時に文字が十分大きくならない場合がある（WCAG 1.4.4 の観点）ため、ツール上で注意を表示します。目安なので実際の表示は各ブラウザで確認してください。
最小サイズを最大サイズより大きくすると、画面が広いほど小さくなる指定として計算し、注意を表示します。
計算はこのブラウザ内だけで行われます。

よくある質問

clamp() の真ん中の値はどうやって決める？

最小と最大のサイズを、指定した2つの画面幅の間で一直線に結ぶ式です。たとえば 16px→24px を 375px〜1280px で変えると clamp(1rem, 0.7928rem + 0.884vw, 1.5rem) になります。ツールに値を入れるとすぐ計算されます。

vw だけで文字サイズを指定してはだめ？

vw だけだとブラウザの文字サイズ設定や拡大に追従しにくくなります。rem を足した形にすると拡大にもある程度追従します。このツールの rem 出力はその形で出します。

1rem が16pxでないサイトでは？

html の font-size を変えている場合は「1rem の大きさ」にその値を入れてください。たとえば 62.5% 指定なら 10 を入れると、rem の数値がその基準で計算されます。

font-size 以外にも使える？

使えます。余白（padding や margin）や gap なども、px の最小・最大を入れて同じ式で計算できます。コピーした行の font-size を目的のプロパティ名に書き換えて使ってください。