CSSのpow()関数が便利！フォントサイズをレスポンシブ対応にするCSSの新しいテクニック

サイト構築 -CSS

Post on:2026年6月2日

sponsorsr

CSSでレスポンシブ対応のフォントサイズを実装する最近のテクニックとしてpow()関数を使用すると、ビューポートやコンテナサイズに応じて動的にフォントサイズが調整される流動的なタイポグラフィを実装できます。

メディアクエリやブレイクポイントの設定は不要で、あらゆるWebサイト、スマホアプリで利用できます。

Fluid Modular Type Scale -GitHub

ではさっそく、そのCSSを紹介します。

CSSのpow()関数を使用すると、最小ビューポート幅と最大ビューポート幅の間でフォントサイズをスムーズに拡大縮小ができます。

/* Fluid Modular Type Scale */
:where(.fluid) {
  --fluid-min: calc(
    var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
  );
  --fluid-max: calc(
    var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
  );

  --fluid-preferred: calc(
    (var(--fluid-max) - var(--fluid-min)) /
      (var(--font-width-max) - var(--font-width-min))
  );

  --fluid-type: clamp(
    (var(--fluid-min) / 16) * 1rem,
    ((var(--fluid-min) / 16) * 1rem) -
      (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
      (var(--fluid-preferred) * var(--variable-unit, 100vi)),
    (var(--fluid-max) / 16) * 1rem
  );

  font-size: var(--fluid-type);
}

/* Fluid Modular Type Scale */

:where(.fluid) {

--fluid-min: calc(

var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))

);

--fluid-max: calc(

var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))

);

--fluid-preferred: calc(

(var(--fluid-max) - var(--fluid-min)) /

(var(--font-width-max) - var(--font-width-min))

);

--fluid-type: clamp(

(var(--fluid-min) / 16) * 1rem,

((var(--fluid-min) / 16) * 1rem) -

(((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +

(var(--fluid-preferred) * var(--variable-unit, 100vi)),

(var(--fluid-max) / 16) * 1rem

);

font-size: var(--fluid-type);

}

親要素またはroot要素に以下のカスタムプロパティを設定します。

--font-size-min: 最小ビューポートでの基本フォントサイズ（単位なしpx、例: 16）
--font-size-max: 最大ビューポートでの基本フォントサイズ（単位なしpx、例: 20）
--font-ratio-min: 最小ビューポートでの文字拡大縮小率（例: 1.2 -Minor Third）
--font-ratio-max: 最大大きなビューポートでの文字拡大縮小率（例: 1.333 -Perfect Fourth）
--font-width-min: 拡大縮小を開始するビューポートの幅（単位なしpx、例: 320）
--font-width-max: 拡大縮小を終了するビューポートの幅（単位なしpx、例: 1440）

要素ごとのカスタムプロパティは、下記の通り。

--font-level: スケールのステップ（0=body、1=1段階上、2=2段階上など）
--variable-unit: 補間に使用するビューポート単位（デフォルトは100vi: コンテナクエリベースの場合は100cqiに設定）

CSSのpow()関数とはCSS Values and Units Module Level 4に定義されており、カンマで区切られた2つの数値を引数として累乗を返す関数です。

width: calc(10px * pow(5, 2)); /* 10px * 25 = 250px */
width: calc(10px * pow(5, 3)); /* 10px * 125 = 1250px */

1 2	width: calc(10px * pow(5, 2)); /* 10px * 25 = 250px / width: calc(10px pow(5, 3)); /* 10px * 125 = 1250px */

2026年現在、pow()関数はすべてのブラウザにサポートされています。

pow()関数のサポートブラウザ

CSSの各行で何をしているのか見てましょう。

Step 1: 各レベルの最小フォントサイズと最大フォントサイズを計算し、スケール比率を現在のレベルの累乗にします。

  --fluid-min: calc(
    var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
  );
  --fluid-max: calc(
    var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
  );

--fluid-min: calc(

var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))

);

--fluid-max: calc(

var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))

);

レベル0は、pow(ratio, 0) = 1となり、基本サイズが得られます。レベル1はスケールを1段階上げ、レベル2は2段階上げるなどします。

最小値と最大値に異なる比率を使用すると、階層構造が圧縮されます。小さなビューポートでは圧縮効果が顕著になり、大きなビューポートではより顕著になります。

Step 2: 傾き（変化率）を計算します。ビューポートの幅が1ピクセル変化するごとに、フォントサイズが何ピクセル変化するかを示します。

  --fluid-preferred: calc(
    (var(--fluid-max) - var(--fluid-min)) /
      (var(--font-width-max) - var(--font-width-min))
  );

--fluid-preferred: calc(

(var(--fluid-max) - var(--fluid-min)) /

(var(--font-width-max) - var(--font-width-min))

);

可変範囲 (font-width-min → font-width-max) 全体にわたって変化します。

Step 3: clamp(min, preferred, max)を設定します。clamp()では、フォントサイズがminを下回ったりmaxを上回ったりしないようにします。preferredは線形補間です（y = mx + b）。

  --fluid-type: clamp(
    (var(--fluid-min) / 16) * 1rem,
    ((var(--fluid-min) / 16) * 1rem) -
      (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
      (var(--fluid-preferred) * var(--variable-unit, 100vi)),
    (var(--fluid-max) / 16) * 1rem
  );

  font-size: var(--fluid-type);

--fluid-type: clamp(

(var(--fluid-min) / 16) * 1rem,

((var(--fluid-min) / 16) * 1rem) -

(((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +

(var(--fluid-preferred) * var(--variable-unit, 100vi)),

(var(--fluid-max) / 16) * 1rem

);

font-size: var(--fluid-type);

-m = --fluid-preferred: ステップ2で設定した傾き
-x = ビューポートの単位: デフォルトは100vi, 100cqiに変更可能
-b = y切片: 線を固定するためのremオフセット。

--font-width-minで--fluid-minに正確に一致するように調整します。

「/ 16 * 1rem」という数式は、単位のないpx値をremに変換するもので、1rem = 16px（ブラウザのデフォルト値）であることを前提としています。

/*
   * Fluid Modular Type Scale
   *
   * A pure-CSS fluid typography system that smoothly scales font sizes
   * between a minimum and maximum viewport width using a modular scale.
   * 
   * Based on the great work of those at Clearleft, modified for modern css (pow())
   * (https://utopia.fyi/blog/css-modular-scales/)
   *
   * Required custom properties (set on a parent or :root):
   *   --font-size-min    : base font size at small viewports (unitless px, e.g. 16)
   *   --font-size-max    : base font size at large viewports (unitless px, e.g. 20)
   *   --font-ratio-min   : type scale ratio at small viewports (e.g. 1.2 — minor third)
   *   --font-ratio-max   : type scale ratio at large viewports (e.g. 1.333 — perfect fourth)
   *   --font-width-min   : viewport width where scaling starts (unitless px, e.g. 320)
   *   --font-width-max   : viewport width where scaling stops (unitless px, e.g. 1440)
   *
   * Per-element custom property:
   *   --font-level        : step in the scale (0 = body, 1 = one step up, 2 = two, etc.)
   *   --variable-unit     : viewport unit for interpolation (defaults to 100vi;
   *                          set to 100cqi for container-query-based fluid type)
   */
:where(.fluid) {
  /* ---- Step 1: Compute the min and max font sizes for this level ----
   *
   * Raise the scale ratio to the power of the current level.
   * Level 0 → pow(ratio, 0) = 1, so you get the base size.
   * Level 1 → one step up the scale, level 2 → two steps, etc.
   *
   * Using different ratios for min/max means the hierarchy is compressed
   * on small viewports and more dramatic on large ones.
   */
  --fluid-min: calc(
    var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
  );
  --fluid-max: calc(
    var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
  );

  /* ---- Step 2: Calculate the slope (rate of change) ----
   *
   * This is the "m" in y = mx + b.
   * It tells us how many px of font-size change per 1px of viewport width
   * across the fluid range (font-width-min → font-width-max).
   */
  --fluid-preferred: calc(
    (var(--fluid-max) - var(--fluid-min)) /
      (var(--font-width-max) - var(--font-width-min))
  );

  /* ---- Step 3: Build the clamp(min, preferred, max) ----
   *
   * clamp() ensures the font size never goes below min or above max.
   * The middle (preferred) value is a linear interpolation: y = mx + b
   *
   *   - m = --fluid-preferred (slope, from step 2)
   *   - x = the viewport unit (100vi by default, swappable to 100cqi)
   *   - b = the y-intercept: the rem offset that anchors the line so it
   *         hits --fluid-min exactly at --font-width-min
   *
   * The / 16 * 1rem conversions turn unitless-px values into rem,
   * assuming 1rem = 16px (browser default).
   */
  --fluid-type: clamp(
    (var(--fluid-min) / 16) * 1rem,
    ((var(--fluid-min) / 16) * 1rem) -
      (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
      (var(--fluid-preferred) * var(--variable-unit, 100vi)),
    (var(--fluid-max) / 16) * 1rem
  );

  font-size: var(--fluid-type);

* Fluid Modular Type Scale

* A pure-CSS fluid typography system that smoothly scales font sizes

* between a minimum and maximum viewport width using a modular scale.

* Based on the great work of those at Clearleft, modified for modern css (pow())

* (https://utopia.fyi/blog/css-modular-scales/)

* Required custom properties (set on a parent or :root):

* --font-size-min : base font size at small viewports (unitless px, e.g. 16)

* --font-size-max : base font size at large viewports (unitless px, e.g. 20)

* --font-ratio-min : type scale ratio at small viewports (e.g. 1.2 — minor third)

* --font-ratio-max : type scale ratio at large viewports (e.g. 1.333 — perfect fourth)

* --font-width-min : viewport width where scaling starts (unitless px, e.g. 320)

* --font-width-max : viewport width where scaling stops (unitless px, e.g. 1440)

* Per-element custom property:

* --font-level : step in the scale (0 = body, 1 = one step up, 2 = two, etc.)

* --variable-unit : viewport unit for interpolation (defaults to 100vi;

* set to 100cqi for container-query-based fluid type)

:where(.fluid) {

/* ---- Step 1: Compute the min and max font sizes for this level ----

* Raise the scale ratio to the power of the current level.

* Level 0 → pow(ratio, 0) = 1, so you get the base size.

* Level 1 → one step up the scale, level 2 → two steps, etc.

* Using different ratios for min/max means the hierarchy is compressed

* on small viewports and more dramatic on large ones.

--fluid-min: calc(

var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))

);

--fluid-max: calc(

var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))

);

/* ---- Step 2: Calculate the slope (rate of change) ----

* This is the "m" in y = mx + b.

* It tells us how many px of font-size change per 1px of viewport width

* across the fluid range (font-width-min → font-width-max).

--fluid-preferred: calc(

(var(--fluid-max) - var(--fluid-min)) /

(var(--font-width-max) - var(--font-width-min))

);

/* ---- Step 3: Build the clamp(min, preferred, max) ----

* clamp() ensures the font size never goes below min or above max.

* The middle (preferred) value is a linear interpolation: y = mx + b

* - m = --fluid-preferred (slope, from step 2)

* - x = the viewport unit (100vi by default, swappable to 100cqi)

* - b = the y-intercept: the rem offset that anchors the line so it

* hits --fluid-min exactly at --font-width-min

* The / 16 * 1rem conversions turn unitless-px values into rem,

* assuming 1rem = 16px (browser default).

--fluid-type: clamp(

(var(--fluid-min) / 16) * 1rem,

((var(--fluid-min) / 16) * 1rem) -

(((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +

(var(--fluid-preferred) * var(--variable-unit, 100vi)),

(var(--fluid-max) / 16) * 1rem

);

font-size: var(--fluid-type);

元ネタは、下記ポストより。

using css pow() you can create runtime-configurable fluid typography that responds to viewport or container size 😉

for example, "minimum of 14px at 375px and scale to maximum 24px at 1500px"

all powered by pow() and custom properties https://t.co/iGajyhYchL pic.twitter.com/YyvgkTToGc

— jhey ʕ•ᴥ•ʔ (@jh3yy) May 14, 2026