この記事のポイント
- 画面幅375pxで16px、1440pxで20pxを指定した
- base用CSSはclamp(1rem, 0.38vi + 0.91rem, 1.25rem)になった
- 見出しを含む7段階を同じ条件から生成できた
サムネイルはイメージ写真。写真の配布元：Unsplash（利用許諾）。本文の画面は実際の操作時に撮影した。
検証環境：2026年10月11日、Windows上のGoogle Chrome。Fluid Type Scale Calculator 2.1.0を無料・未ログインで利用した。rem使用をオン、1rem＝16pxの既定値で確認した。
スマートフォンとPCで文字サイズを切り替えると、中間幅で急に大きさが変わる。Fluid Type Scale Calculatorへ最小幅375px・基準16px、最大幅1440px・基準20pxを入力した。
base用の出力はclamp(1rem, 0.38vi + 0.91rem, 1.25rem)だった。375px以下では16px相当、1440px以上では20px相当、その間は画面幅に応じて連続的に変わる。
操作手順
- Fluid Type Scale Calculatorを開く。
- MinimumへBase 16、Screen width 375を入力する。
- MaximumへBase 20、Screen width 1440を入力する。
- Use remsがオンで、Rem valueが16であることを確認する。
- OutputのCSS変数と下のPreviewを読む。
基準文字だけでなく見出しも同時に作れる
出力にはsm、base、md、lg、xl、xxl、xxxlの7段階が並んだ。最大幅ではbaseが1.25rem、lgが2.22rem、xxxlが5.26remになる。見出しごとに別々の式を手計算せず、同じ比率から一式を作れる。
生成式を入れただけでは読みやすさは保証されない。日本語の字形、行間、1行の長さ、拡大表示を実ページで確認し、サイズ段階が多すぎないかも調整する必要がある。
コメント