タイポグラフィ

ウェブ機能: font-size rem em 単位 line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min()、max()、clamp() ビューポート単位

全般的なベスト プラクティス

  • フォントサイズの継承時に相対的なスケーリングが行われるように、line-height には単位のない数値（1.5 など）を使用します。
  • 長い URL を含めるには、overflow-wrap: break-word（または anywhere）を使用します。
  • フォントサイズに px を使用しないでください。ユーザーのブラウザのフォントサイズ設定（ルート フォントサイズ）を優先する場合は rem を、コンテキストに応じたサイズ設定を行う場合は em またはパーセンテージを使用することをおすすめします。

読みやすさ

  • 長いテキスト行を避ける: 段落ブロックの幅は最大 80 文字に制限します。
  • 空白の連続を避ける: text-align: justify はテキストが読みにくくなるため、使用しないでください。使用する必要がある場合は、hyphens: auto と組み合わせて、単語間に過剰な空白が生じないようにします。
  • 装飾フォントを使用しない: 主要な読み物コンテンツでは、筆記体の書体は使用しないでください。
  • 強調する目的でオール キャップスを使用しない: 視覚的に強調する場合は太字を使用し、意味的に強調する場合は <em>/<strong> を使用します。
  • 強調を全体的に制限する: 強調は、どこにでも適用すると意味がなくなります。コンテンツの読み方を変える必要がある場所にのみ適用してください。
  • ユーザーのズーム設定をサポートする: ユーザーがテキストのサイズを最大 200% まで変更できるようにします。その際、コンテンツや機能が失われないようにします。
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

テキストの折り返し

  • バランスの取れた見出しや見出しのようなコンテンツ（<th> など）には text-wrap: balance を使用します。
  • text-wrap: pretty は、長い本文テキスト（段落、ブロック引用など）に使用します。
  • text-wrap: balance または text-wrap: pretty は慎重に使用してください。パフォーマンスに影響するため、* には適用しないでください。
  • 表示可能なボックス（背景、枠線、影など）を持つ要素では、text-wrap: balance を使用しないでください。コンテナの幅は変更されず、その幅内でのテキストの折り返し方法にのみ影響します。これにより、コンテナの末尾に空きスペースが残ることがありますが、通常は望ましくありません。

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

  • 推奨: clamp() でビューポート相対単位とフォント相対単位を組み合わせて、ビューポート サイズに合わせて拡大縮小するフォントサイズを、目的の範囲内に収まるようにします。例: clamp(2rem, 1rem + 5vw, 4rem)。ビューポート相対単位とフォント相対単位の比率を調整して、フォントサイズの変更速度を制御します。
  • clamp() を指定せずに vw のみを font-size に使用しないでください。極端な画面サイズでテキストが小さすぎたり大きすぎたりする可能性があります。