Interactive Fluid Typography

フルイド・タイポグラフィの概要

フルイド・タイポグラフィは、CSS のテクニックを使って文字サイズとリーディング（行間）を画面サイズに応じて滑らかに変化させる手法です。フォントサイズが固定ブレークポイントで急激にジャンプするのではなく、異なる画面幅の間でスムーズな遷移を実現し、ブレークポイント付近の「盲点」や不均衡を解消します。

---

1. 基本的な実装

/* ベース値 – vw を使った計算では単位なし数値が便利 */
:root {
  --base-screen-size: 1200;   /* 参考となる基準画面幅（px） */
  --base-font-size:    16;    /* 基準フォントサイズ（px） */
  --typographic-ratio: 1.618; /* フォントサイズを増減させる比率（黄金比など） */
}

.font-size-base { /* ベースサイズ。ビューポート幅に線形でスケール */
  font-size: calc(
    var(--base-font-size) * (100vw / var(--base-screen-size))
  );
}

.font-size-md {
  font-size: calc(var(--font-size-base) * var(--typographic-ratio));
}

.font-size-lg {
  font-size: calc(var(--font-size-md) * var(--typographic-ratio));
}

結果: テキストはベースサイズである 16 px から始まり、ビューポート幅に応じて線形に拡大・縮小します。
欠点: サイズが無限に変わり続けるため、メディアクエリや clamp() で上限下限を設ける必要があります。

---

2.

clamp()

を使って境界を設定

:root {
  --base-screen-size: 1200;

  --base-font-size-min: 14;
  --base-font-size:    15;
  --base-font-size-max:16;

  --typographic-ratio: 1.618;
}

.font-size-base {
  font-size: clamp(
    calc(1px * var(--base-font-size-min)),
    calc(var(--base-font-size) * 100vw / var(--base-screen-size)),
    calc(1px * var(--base-font-size-max))
  );
}

.font-size-md { font-size: calc(var(--font-size-base) * var(--typographic-ratio)); }
.font-size-lg { font-size: calc(var(--font-size-md) * var(--typographic-ratio)); }

メリット: 最小・最大サイズを固定しつつ、間はフルイドに保てます。
制限点: フォント比率がすべてのビューポートで同じになるため、小さい画面ではよりタイトな比率が必要となる場合があります。

---

3. フルイドスケールジェネレーター（Utopia）

/* Utopia が生成したステップ – clamp() で min・mid・max を設定 */
:root {
  --step-0: clamp(0.875rem, 0.8125rem + 0.25vw, 1rem);   /* ベース   */
  --step-1: clamp(1.2373rem, 1.0469rem + 0.7615vw, 1.618rem); /* ミディアム */
  --step-2: clamp(1.7495rem, 1.3152rem + 1.7369vw, 2.6179rem); /* ラージ   */
}

.font-size-base { font-size: var(--step-0); }
.font-size-md   { font-size: var(--step-1); }
.font-size-lg   { font-size: var(--step-2); }

長所:

• 各ステップごとに min/max が別々に設定される。

• rem

  を使用しており、アクセシビリティのベストプラクティスに沿っている。

短所:

• 値がハードコーディングされているため、変更したい場合は Utopia で再生成する必要があります。

---

4. Typed Arithmetic – 動的比率

Chrome 140 の Typed Arithmetic を利用すると、ビューポート幅に応じて比率を計算できます。

:root {
  /* 基準フォントサイズ */
  --base-font-size-small: 14px;
  --base-font-size-large: 16px;

  /* 比率の下限・上限 */
  --lower-ratio: 1.414;   /* 例：小さい画面で √2 を使用 */
  --upper-ratio: 1.618;   /* 大きい画面で黄金比を使用 */

  /* 画面幅の境界値 */
  --lower-bound: 400px;
  --upper-bound: 1200px;

  /* 正規化：画面幅が下限から上限まで 0 → 1 にマップされる */
  --screen-normalizer: clamp(
    0,
    (100vw - var(--lower-bound)) / (var(--upper-bound) - var(--lower-bound)),
    1
  );

  /* ベースフォントサイズを小さい値と大きい値の間で線形補間 */
  --fluid-base-size: calc(
    var(--base-font-size-small) +
    (var(--base-font-size-large) - var(--base-font-size-small))
      * var(--screen-normalizer)
  );

  /* フォント比率を下限と上限の間で線形補間 */
  --fluid-step: calc(
    var(--lower-ratio) +
    (var(--upper-ratio) - var(--lower-ratio)) * var(--screen-normalizer)
  );
}

.font-size-base { font-size: var(--fluid-base-size); }
.font-size-md   { font-size: calc(var(--font-size-base) * var(--fluid-step)); }
.font-size-lg   { font-size: calc(var(--font-size-md) * var(--fluid-step)); }

利点:

• フォント比率とベースサイズがリアルタイムで変化し、完全に動的です。
• clamp() のようなハードコードされた値は不要です。

---

5. 半ステップサイズ（オプション）

/* フルイドステップの平方根を計算して半ステップを作成 */
:root {
  --fluid-step-half: pow(var(--fluid-step), 0.5);
}

.font-size-sm   { font-size: calc(var(--fluid-base-size) / var(--fluid-step-half)); }
.font-size-demi { font-size: calc(var(--fluid-base-size) * var(--fluid-step-half)); }

使い方: 手動で計算することなく、すばやく「半ステップ」サイズを生成できます。

---

6. 非対応ブラウザ向けフォールバック

/* Utopia の clamp 値をフォールバックとして使用 */
@supports not (transform: scale(calc(1px / 1px))) {
  :root {
    --step-0: clamp(0.875rem, 0.8333rem + 0.2222vw, 1rem);
  }

  .font-size-base { font-size: var(--step-0); }
}

/* Typed Arithmetic がサポートされている場合 */
@supports (transform: scale(calc(1px / 1px))) {
  :root {
    /* 上記と同じ --fluid-base-size などの定義を追加 */
  }

  .font-size-base { font-size: var(--fluid-base-size); }
}

---

7. 将来 – カスタム CSS 関数

完全なサポートが到達すれば、カスタム関数でさらに簡素化できます。

@function --fluid-scaler(--small-measure, --large-measure) {
  result: calc(
    --small-measure +
    ( --large-measure - --small-measure ) * var(--screen-normalizer)
  );
}

--fluid-base-size: --fluid-scaler(var(--base-font-size-small), var(--base-font-size-large));
--fluid-step      : --fluid-scaler(var(--lower-ratio),     var(--upper-ratio));

@function --fluid-size(--step) {
  result: calc(
    var(--fluid-base-size) *
    pow(var(--fluid-step), var(--step))
  );
}

.font-size-base { font-size: --fluid-size(1); }
.font-size-md   { font-size: --fluid-size(2); }

結果:

--fluid-size(n)

を一度呼び出すだけで、フォントサイズやスペーシングの n 番目のステップを取得できます。

---

まとめ

• clamp() は境界を設定しつつ静的に動作します。
• Typed Arithmetic により、比率がビューポート幅に応じて変化し、真にフルイドなタイポグラフィが実現できます。
• まだ Typed Arithmetic がサポートされていないブラウザには、clamp() のフォールバックを用意しておくと安全です。

コンソールで変数を試すことで、デザインシステムを即座にプロトタイピングし、微調整できます。