文字サイズを画面幅になじませる。無料ツール「clamp() 流体タイポ計算」を公開しました。

スマートフォンでは見出しが窮屈で、大きなディスプレイでは間が抜けて見える。フォントサイズをメディアクエリで刻んでいくと、ブレークポイントの境目で文字が段差のように跳ねてしまいます。デザイン事務所AMIXは、最小・最大のフォントサイズとビューポート幅からCSSの clamp() を自動計算する無料Webツール「clamp() 流体タイポ計算」を公開しました。数値を4つ入れるだけで、画面幅に応じてなめらかに変化する流体タイポグラフィの1行が出来上がります。アプリのインストールやアカウント登録は不要で、ブラウザを開けばすぐに使い始められます。

どんなツールか

「clamp() 流体タイポ計算」は、「最小サイズ」「最大サイズ」「最小幅」「最大幅」の4つの数値を入力すると、clamp(最小, 傾き×vw + 切片, 最大) という形のCSSを組み立ててくれる計算ツールです。出力はそのまま font-size に貼れる1行で、右上のボタンからコピーできます。

手計算でやろうとすると、これはなかなか面倒な作業です。2つの画面幅と2つの文字サイズを直線で結び、その傾きを vw の係数に直し、切片を rem に換算する。電卓と紙が必要になりますし、数値を1つ変えるたびに全部やり直しです。本ツールは入力欄を触った瞬間に再計算するので、「最大幅を1440pxにしたらどうなるか」を試すコストがほぼゼロになります。

計算はすべてお使いのブラウザ内のJavaScriptで行われ、入力した数値が当方のサーバーへ送信・保存されることはありません。初期値は最小16px・最大24px、最小幅375px・最大幅1280px、ルートフォントサイズ16pxが入っているので、まずはこのまま数値をいじって挙動を確かめるのがわかりやすいはずです。ちなみに既定値のままだと、出力は font-size: clamp(1rem, 0.884vw + 0.7928rem, 1.5rem); になります。

clamp() とは何か

CSSの clamp() は「最小値・推奨値・最大値」の3つを受け取り、推奨値がその範囲から外れないように挟み込む関数です。clamp(1rem, 2vw, 1.5rem) と書けば、2vw の計算結果が1remを下回れば1rem、1.5remを超えれば1.5remになり、あいだにあるときだけ 2vw がそのまま採用されます。

このしくみが流体タイポグラフィに向いているのは、推奨値の部分に画面幅に比例する単位を置けるからです。vw は「ビューポート幅の1%」を表す単位なので、vw を含む式は画面幅に応じて連続的に変化します。そこへ clamp() で上下の歯止めをかけると、「小さい画面ではここまで、大きな画面ではここまで」という安全域の中でなめらかに伸縮する文字サイズが1行で書けます。

本ツールが求めているのは、この推奨値の中身です。指定した最小幅における最小サイズと、最大幅における最大サイズを直線で結び、その傾きから vw の係数を、直線の位置から切片を割り出しています。最小サイズを最大サイズより大きくした場合、つまり画面が広いほど文字を小さくしたい指定でも、常に小さい方が下限・大きい方が上限になるように整えて出力するので、clamp() の前提が崩れません。

なぜ vw だけでは足りないのか

「画面幅に比例させたいなら font-size: 2vw と書けばいいのでは」と思われるかもしれません。実際、それでも文字サイズは画面幅に追従します。問題は、比例がどこまでも続いてしまうことです。

幅320pxのスマートフォンでは6.4px。読めません。幅2560pxの外部ディスプレイでは51.2px。本文としては大きすぎます。vw 単体の指定は「ちょうどよく見える幅」の外側でいきなり破綻するので、実務ではそのまま使いにくいのです。ブラウザのウィンドウを横に引き伸ばすと文字が止まらずに膨らんでいく挙動は、レイアウト全体の印象を崩します。

さらに、vw だけの指定はユーザーがブラウザで文字サイズを大きく設定しても反応しません。画面幅しか参照していないため、読みやすさの調整が効かなくなってしまいます。clamp() で下限と上限を与え、推奨値の中に vw とルート要素の文字サイズに応じた値（rem）を混ぜておくと、「比例して動くが、行き過ぎない」「ユーザー設定も一定程度反映される」という中間の落ち着きどころが得られます。本ツールは、rem出力時に vw と rem を組み合わせた式を生成します。

主な機能・特徴

入力から確認までがひと画面に収まるよう作っています。

• 「フォントサイズ」の最小・最大と「ビューポート幅」の最小・最大、計4つの数値を入力するだけで clamp() を自動計算します。入力欄を打ち替えた瞬間に結果が更新されるため、値の当たりをつけながら詰められます。
• 出力単位は「rem」「px」の切り替えに対応。既定はremで、「ルートフォントサイズ（rem換算用）」に入れた数値（初期値16px）を基準に換算します。ルート側を変えたデザインでも正しい値が出せます。
• 生成されたCSSは font-size: から始まる貼り付け可能な1行。コードの右上にある「コピー」ボタンを押すと表示が「済み」に変わり、クリップボードへ写されます。
• 「画面幅での結果」のスライダーで、240pxから1920pxまで、10px刻みの幅における実際のフォントサイズをpx単位で確認できます。既定値のままなら800pxの時点で約19.8pxと表示されます。
• スライダーの下にはライブプレビューがあり、「流体タイポグラフィのプレビュー Aa 123」のサンプル文字が、その幅で計算されたサイズのまま表示されます。数値だけでなく見た目で判断できます。
• 最小幅に最大幅以上の数値を入れると「最小幅は最大幅より小さくしてください。」と赤いメッセージで知らせます。ゼロ除算で意味のない式が出てしまうのを防ぐしくみです。
• 係数は小数第4位まで丸めて出力するため、無駄に長い数値列になりません。
• スマートフォンでも同じ画面構成で使えます。数値入力欄はテンキーが出るよう指定してあるので、外出先で値を差し替えるのも手早く済みます。

使い方

手順は3つです。まず「フォントサイズ」欄に、最小サイズと最大サイズを入力します。本文なら16pxから18px、見出しなら24pxから40pxといった具合に、いちばん小さい画面で確保したいサイズと、いちばん大きい画面で見せたいサイズを決めます。

次に「ビューポート幅」欄で、その2つのサイズが成立する画面幅を指定します。最小幅はスマートフォンの幅（375px前後）、最大幅はデザインの基準幅（1280pxや1440pxなど）にするのが一般的です。remで出力する場合は「ルートフォントサイズ（rem換算用）」も確認しておきます。ここを16pxのまま使えば、ブラウザの初期設定に沿った換算になります。

最後に「生成されたCSS」に表示された1行を「コピー」で取得し、対象のセレクタの宣言ブロック内に貼り付けます。出力には font-size: が含まれているため、プロパティ名を二重に付けないでください。貼る前に「画面幅での結果」のスライダーを左右に振って、想定している端末幅で文字が何pxになるかを確かめておくと確実です。プレビューのサンプル文字も同時に変わるので、「この幅だと詰まりすぎる」といった感覚的な違和感もその場で拾えます。単位をpxで出したいときは、コードの右上にある「rem／px」の切り替えを押してください。

rem と px の使い分け

出力単位をどちらにするかは、好みの問題ではなくアクセシビリティの問題です。

ブラウザには既定の文字サイズを変更する設定があります。rem はルート要素のフォントサイズを基準にするため、ルート側がその設定を反映する作りなら文字サイズも追従します。ただし、ルートをpxで固定している場合などは、remを使うだけでは十分ではありません。px指定は既定の文字サイズ設定には通常追従しませんが、ページ全体のズームとは別の話です。生成後は文字サイズ設定とズームの両方で読みやすさを確認してください。

とはいえpxの出番がないわけではありません。既存サイトの一部だけを差し替えるとき、周囲がpx指定で揃っているなら合わせたほうが管理しやすいことがあります。ロゴの近くに置く装飾的な文字や、画像と厳密にサイズを合わせたい箇所も、pxのほうが読み解きやすい場合があります。表示上の見た目は同じなので、「本文や見出しはrem、意図的に固定したい部分だけpx」といった線引きにしておくと迷いません。ルートフォントサイズを16px以外に設定しているプロジェクトでは、入力欄の数値をその値に直してから出力してください。ここを揃え忘れると、計算上のpxと実際の表示がずれます。

活用シーン

• レスポンシブ対応で、ブレークポイントごとの font-size 指定を減らしたいとき
• 見出しやキャッチコピーを、画面幅に合わせてなめらかに伸縮させたいとき
• メディアクエリの境目で文字サイズが段差になるのを解消したいとき
• デザインデータの「スマホ時16px／PC時24px」という指示を、そのままCSSに落としたいとき
• ランディングページで、大画面でも余白負けしない見出しサイズを探したいとき
• vw 指定で文字が大きくなりすぎる／小さくなりすぎる問題を直したいとき
• ルートフォントサイズが16px以外のプロジェクトで、rem換算を間違えずに済ませたいとき

見出し・本文・キャプションのように役割の違う要素は、それぞれ別に計算して指定するのが基本です。ひとつの式を使い回すと、階層の差が画面幅によって崩れてしまいます。

ご利用にあたって

本ツールおよび本ページは現状有姿（as-is）で提供されるため、ご利用は利用者ご自身の責任においておこなってください。出力される値は入力した2点を直線で結ぶ計算に基づくもので、実際の表示は各要素の line-height、フォントの字面、親要素のサイズなどによって印象が変わります。最終的な見た目は実機・実ブラウザでご確認ください。ブラウザの種類・バージョンや端末環境によっては、表示・動作・コピー機能の挙動が異なる場合があります。本ツールの利用、または利用できなかったことにより生じたいかなる損害についても、AMIXは責任を負いかねます。本ツールの仕様・内容は、予告なく変更または提供を終了する場合があります。

数値を4つ入れて、1行をコピーするだけ。文字サイズの調整に費やしていた時間を、そのままデザインに回せます。ぜひ気軽にお試しください。