コンテナクエリによるレスポンシブタイポグラフィ

コンテナクエリによるレスポンシブタイポグラフィ

ビューポートではなくコンテナに適応するタイポグラフィは、コンテナクエリの最も実用的な使い方の1つです。狭いサイドバー内の見出しは、広いヒーローセクション内の同じ見出しよりも小さいテキストが必要です。

CSS

.text-container {
  container-type: inline-size;
  container-name: text-area;
}

.adaptive-heading {
  font-size: 1.25rem;
  line-height: 1.4;
}

@container text-area (min-width: 400px) {
  .adaptive-heading {
    font-size: 1.75rem;
    line-height: 1.3;
  }
}

@container text-area (min-width: 700px) {
  .adaptive-heading {
    font-size: 2.5rem;
    line-height: 1.2;
  }
}

プログレッシブスケーリング

見出しは狭いスペースに適した読みやすいサイズから始まり、2つの追加ブレークポイントでスケールアップします。各サイズにはそのスケールでの最適な読みやすさのために調整されたline-heightが付属しています。

コンテナクエリユニットの使用

CSSにはコンテナクエリ長さユニットも用意されています：cqw（コンテナ幅の1%）、cqh（コンテナ高さの1%）、cqi（インラインサイズの1%）、cqb（ブロックサイズの1%）：

.fluid-heading {
  font-size: clamp(1rem, 4cqi, 3rem);
}

これにより、最小値と最大値の間でコンテナ幅に合わせて滑らかにスケーリングする真にフルイドなタイポグラフィが作成されます。