これなら超簡単！ CSSのclamp()によるレスポンシブ対応のフォントサイズを数クリックで定義できるツール -Size Matters
Post on:2025年11月12日
sponsorsr
フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのビューポートサイズが増えた現在に欠かせないテクニックです。
CSSでレスポンシブ対応のフォントサイズを超簡単に定義できる、先日ローンチされたばかりのオンラインツールを紹介します。
Size Mattersの特徴
流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなビューポートサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でビューポートサイズに応じた最適な値をレンダリングさせることができます。
|
1 2 3 |
p{ font-size: clamp(1rem, calc(0.75rem + 1vw), 1.5rem); } |
このたった1行のCSSで、下記のように表示されます。
※ルート要素が、16pxの場合
- 360pxのビューポート: 1rem 16px
- 480pxのビューポート: 1.05rem 16.8px
- 800pxのビューポート: 1.25rem 20px
- 1000pxのビューポート: 1.375rem 22p
- 1280pxのビューポート: 1.5rem 24px
Size Mattersは、ベースのサイズとスケール比、あとは必要なビューポートサイズを設定するだけで、clamp()関数を使ったCSSを生成してくれます。
Step 1: 文字スケールの設定
まずはベースのサイズとスケール比を設定し、ベースより何サイズ小さいのと大きいのが必要なのかを設定します。最小・最大ビューボードサイズも設定できますが、基本的にはデフォルトのままで大丈夫です。
文字スケールの設定
設定が完了したら、下部の「Review Type Scale」をクリックします。
Step 2: 文字スケールの確認
設定した文字サイズのバリエーションを確認できます。
文字サイズの確認
ライブプレビューでは、テキストの拡大縮小がコンテキスト内でどのように表示されるかを確認できます。ここではビューポートで設定した最小値から最大値までのスマホ・タブレット・ラップトップ・デスクトップなどの確認ができます。
各デバイスでどのように表示されるか確認
サイズを修正したい場合は「Back」をクリック、問題なければ「Export Type Scale」をクリックして進みます。
Step 3: エクスポート
文字サイズの設定は、さまざまな形式でダウンロードできます。
- CSS
- SCSS
- JSON
- WordPress
- Elementor
エクスポート
たとえば、CSSだと下記のような感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
/* Size Matters Type Scale * Generated on 2025-10-21 * Base: 16px, Ratio: 1.25, Steps: -2 to +5 * Viewport: 360px - 1280px */ :root { /* Base font size */ --font-size-base: 16px; /* Type scale tokens */ --font-size-xs: clamp(0.375rem, 0.179rem + 0.87vw, 0.875rem); --line-height-xs: 1.6; --font-size-s: clamp(0.5rem, 0.255rem + 1.087vw, 1.125rem); --line-height-s: 1.6; --font-size-r: clamp(0.688rem, 0.443rem + 1.087vw, 1.313rem); --line-height-r: 1.6; --font-size-m: clamp(0.75rem, 0.359rem + 1.739vw, 1.75rem); --line-height-m: 1.55; --font-size-l: clamp(0.938rem, 0.448rem + 2.174vw, 2.188rem); --line-height-l: 1.49; --font-size-xl: clamp(1.188rem, 0.576rem + 2.717vw, 2.75rem); --line-height-xl: 1.41; --font-size-2xl: clamp(1.438rem, 0.655rem + 3.478vw, 3.438rem); --line-height-2xl: 1.36; --font-size-3xl: clamp(1.813rem, 0.859rem + 4.239vw, 4.25rem); --line-height-3xl: 1.29; } /* Utility classes */ .text-xs { font-size: var(--font-size-xs); line-height: var(--line-height-xs); } .text-s { font-size: var(--font-size-s); line-height: var(--line-height-s); } .text-r { font-size: var(--font-size-r); line-height: var(--line-height-r); } .text-m { font-size: var(--font-size-m); line-height: var(--line-height-m); } .text-l { font-size: var(--font-size-l); line-height: var(--line-height-l); } .text-xl { font-size: var(--font-size-xl); line-height: var(--line-height-xl); } .text-2xl { font-size: var(--font-size-2xl); line-height: var(--line-height-2xl); } .text-3xl { font-size: var(--font-size-3xl); line-height: var(--line-height-3xl); } |
sponsors
