remとフルードスケーリングによるレスポンシブタイポグラフィ

remによるレスポンシブタイポグラフィ

レスポンシブタイポグラフィは、すべての画面サイズでテキストが読みやすいことを保証します。remが基盤であり、モダンCSSはその上に構築する強力なツールを提供しています。

アプローチ1：メディアクエリステップ

最もシンプルなアプローチは、ブレークポイントでルートフォントサイズを変更します：

html { font-size: 100%; }           /* 16px */

@media (min-width: 768px) {
  html { font-size: 112.5%; }       /* 18px */
}

@media (min-width: 1200px) {
  html { font-size: 125%; }         /* 20px */
}

すべてがremで指定されているため、各ブレークポイントでページ全体がスケールアップします。最も予測可能なアプローチです。

アプローチ2：clamp()によるフルードタイポグラフィ

CSS clamp()は最小値と最大値の間で滑らかにスケーリングするテキストを作成します：

html {
  font-size: clamp(1rem, 0.5rem + 1vw, 1.25rem);
}

ベースを以下に設定します：

• 最小値： 1rem（16px）
• フルード： ビューポート幅に応じてスケーリング
• 最大値： 1.25rem（20px）

下流のすべてのremベースの値が結果として滑らかにスケーリングされます。

アプローチ3：要素ごとのフルードサイジング

より細かい制御のために、個別の要素にclamp()を適用します：

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  /* 最小28px、スケールアップ、最大48px */
}

h2 {
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
  /* 最小20px、スケールアップ、最大32px */
}

p {
  font-size: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);
  /* 最小16px、スケールアップ、最大18px */
}

vwのアクセシビリティ問題

font-size: 3vwを単独で使用するのは問題があります：

1. ユーザーがブラウザフォントサイズを変更してもテキストがスケーリングされない
2. 非常に狭い画面ではテキストが読めないほど小さくなる
3. 超ワイド画面ではテキストが巨大になる

remの最小値を持つclamp()は、remコンポーネントがユーザー設定を尊重するため、3つの問題すべてを解決します。

clamp()値の計算

clamp()式を生成するための公式：

clamp(min-rem, preferred, max-rem)

preferred = min-rem + (max-rem - min-rem) * ((100vw - min-viewport) / (max-viewport - min-viewport))

当px-remコンバーターは、この公式に代入するための最小・最大rem値の決定に役立ちます。

レスポンシブタイポグラフィのテスト

常に以下の条件でテストしてください：

• デフォルトフォントサイズ（16px）
• ブラウザ200%ズーム
• ブラウザフォントサイズ増加（20px、24px）
• 最小・最大ビューポート幅