flexible-typography

柔軟なタイポグラフィ

ユーザーに合わせて柔軟に変化するタイポグラフィシステムを設計しましょう。滑らかに拡大し、十分な間隔を確保して、文字を大きくしたり、間隔を広げたり、別のフォントに変更したりしても決して崩れないようにします。

基本要件

常に相対単位を使用する

• フォントサイズには rem を使用します（ルート要素を基準とし、ユーザーが調整できます）
• テキストに合わせて拡大すべき間隔には em を使用します
• フォントサイズに px は決して使用しません。ユーザー設定が上書きされてしまいます
• 基本のフォントサイズはブラウザーのデフォルト（通常は 16px）とし、これを開始点にして上書きしないでください

最小サイズ

• 本文：最低 1rem（これより小さくしない）
• 小さな文字／キャプション：最低 0.875rem
• ラベルと UI テキスト：最低 0.875rem
• 重要なテキストは、ズームしなくても読めるようにします

行の高さ

• 本文：最低 1.5（WCAG の要件）
• 見出し：1.2～1.3（大きなテキストでは、より詰めても問題ありません）
• 行の高さはフォントサイズに合わせて拡大する必要があるため、単位のない値を使用します （24px ではなく 1.5）

間隔

• 段落の間隔：フォントサイズの少なくとも 1.5 倍
• 文字間隔：ブラウザーのデフォルトより狭くしないでください
• 単語間隔：ブラウザーのデフォルトより狭くしないでください
• ユーザーがレイアウトを崩さずに間隔を上書きできるようにします （WCAG 2.1 レベル AA、達成基準 1.4.12）

デザインパターン

拡大縮小できる文字サイズの段階

• 相対比（1.25、1.333、1.5）を使って文字サイズの段階を定義します
• 各段階で、見た目に分かる違いを持たせます
• ほとんどのインターフェースでは、4～6 種類のサイズで十分です
• 例：0.875rem、1rem、1.25rem、1.5rem、2rem、2.5rem

ユーザーによる上書きに対応する

• テキストを含むコンテナーに固定の高さを設定しないでください
• テキストを含む要素には、height ではなく min-height を使用します
• テキストが拡大したときに、コンテナーも拡大できるようにします
• 次の設定でテストします：テキストサイズ 200％、ズーム 200％、文字間隔と単語間隔の拡大
• いずれかの設定でレイアウトが崩れる場合は、CSS を修正する必要があります

フォントの選択

• 見た目より読みやすさを優先します
• 一般にサンセリフフォントは画面上で読みやすいですが、これは好みの問題であり、規則ではありません。対象ユーザーでテストしてください
• 選択したフォントに次の特徴があることを確認します：
  • 似た文字を明確に見分けられる（Il1、0Oo、rn/m）
  • x ハイトが一貫している
  • デフォルト設定で十分な文字間隔がある
• フォールバック時にも適切に表示されるフォントファミリーのスタックを指定します
• ユーザーが好みのフォントに変更できないようにしないでください

ダークモードのタイポグラフィ

• ダークモードではフォントのウェイトを少し軽くします（暗い背景上の明るい文字は、明るい背景上の暗い文字より太く見えます）
• どちらのモードでも、コントラスト比が最低 4.5:1 になるようにします
• 純白（#fff）を真っ黒（#000）に重ねるのは避けます。極端なコントラストは、一部のユーザーに光暈を引き起こします。代わりに、濃いグレーの背景にオフホワイトを使用します

評価チェックリスト

• すべてのフォントサイズに rem または em を使用し、px は使用していない
• 本文のサイズが 1rem 以上である
• 本文の行の高さが 1.5 以上である
• テキストを 200％に拡大しても、レイアウトが崩れない
• ユーザーが文字間隔と単語間隔を上書きしても、レイアウトが崩れない
• テキストコンテナーに固定の高さではなく、min-height を使用している
• フォントで文字を明確に見分けられる（Il1、0Oo）
• ライトモードとダークモードの両方でコントラスト要件を満たしている