web-typography

Web タイポグラフィ

ウェブ向けの、読みやすく、階層構造が明確で、パフォーマンスに優れたテキストデザインです。

対象範囲

次の場合にこのスキルを使用します：フォントの選定、フォントの組み合わせの定義、タイポグラフィのスケールの構築、行の高さや行長の設定、流動的なタイポグラフィの実装、既存のタイポグラフィ品質の監査。

原則

1. タイポグラフィはユーザーインターフェースです

テキストは情報を伝える主要なレイヤーです。タイポグラフィデザインによって、コンテンツが読まれるか、ざっと目を通されるか、無視されるかが決まります。

2. 美しさより読みやすさを優先します

フォントはまず読みやすくなければなりません。ユーザーの意識がコンテンツではなく書式に向いてしまうなら、タイポグラフィは失敗です。

3. タイポグラフィで階層を作ります

サイズ、ウェイト、スタイルを変えることで、明確な情報階層を形成できます。読み進める流れは、タイポグラフィによって導かれます。

4. フォントを減らして、効果を高めます

プロジェクトで使用するフォントファミリーは最大2～3種類にします。フォントを追加するたびに読み込み時間が延び、一貫性が損なわれます。

5. 感情的な効果を意図的に活用します

サンセリフのグロテスク体＝モダン／ニュートラル。セリフ体＝クラシック／信頼感。ディスプレイフォント＝表現豊か／独自性。

ルール

フォントの選定

• 実施：ブランドアイデンティティに合ったフォントを選びます。企業向け：Inter、Geist、DM Sans。クリエイティブ向け：ディスプレイフォント。
• 実施：文字セットの対応状況を確認します。ウムラウトや特殊文字（ドイツ語コンテンツでは必須）も確認してください。
• 実施：利用可能な場合は可変フォントを使用します（6個以上ではなく、1ファイルで済みます）。
• 実施：セルフホストのWOFF2を優先します（GDPR：Google Fonts CDNは使用しません）。
• 禁止：本文と見出しに3種類以上のフォントファミリーを使用しないでください。3種類目はアクセント用途に限ります。
• 禁止：プロフェッショナルな場面では、Comic Sans、Papyrus、Impactを決して使用しないでください。

フォントの組み合わせ

• 実施：コントラストをつけて組み合わせます。見出しにはセリフ体、本文にはサンセリフ体（またはその逆）を使用します。
• 実施：視覚的な調和のため、組み合わせるフォントのxハイトを近づけます。
• 実施：実績のある組み合わせを使用します。Playfair Display + Source Sans Pro、Poppins + Inter。
• 禁止：似たようなサンセリフ体を2種類組み合わせないでください。コントラストがないと、判断に迷っている印象になります。

サイズとスケール

• 実施：タイポグラフィのスケールを使用します。Major Third（1.250）またはPerfect Fourth（1.333）。
• 実施：本文は少なくとも16px（できれば18px）にします。
• 実施：見出しはモバイルで最低24px、デスクトップで最低32pxにします。
• 実施：流動的なレスポンシブサイズにはclamp()を使用します：font-size: clamp(1rem, 2.5vw, 2rem)。
• 禁止：読みやすさが求められるコンテンツに14px未満のフォントサイズを使用しないでください。フッターでも最低12pxにします。

行の高さと行長

• 実施：本文のline-heightは1.5～1.75にします。
• 実施：見出しのline-heightは1.1～1.3にします。
• 実施：行長は45～75文字（最適値：65文字）にします。CSS：max-width: 65ch。
• 禁止：複数行のテキストにline-height 1.0以下を使用しないでください。
• 禁止：テキストの行をビューポート幅いっぱいに広げないでください（80文字を超えると読みやすさが大幅に低下します）。

テキストのスタイル設定

• 実施：両端揃えのテキストは、ハイフネーション（hyphens: auto）と併用する場合にのみ使用します。
• 実施：ウェブコンテンツでは、右端を揃えない左揃えのテキスト（text-align: left）を優先します。
• 実施：見出しにはtext-wrap: balanceを使用します。
• 実施：強調には、下線やすべて大文字ではなくfont-weight: 600-700を使用します。
• 禁止：テキストの強調に下線を使用しないでください。ウェブでは、下線は常に「リンク」を意味します。
• 禁止：長いテキストをすべて大文字で設定しないでください。短いラベルやボタン（最大3～4語）に限ります。

パフォーマンス

• 実施：WOFF2形式を使用します（圧縮率が最良です）。
• 実施：font-display: swapを使用します。
• 実施：主要なフォントをプリロードします：<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>。
• 実施：ラテン文字のみが必要な場合は、フォントをサブセット化します（60～80％の削減）。
• 禁止：4個を超えるフォントファイル（ウェイトを含む）を読み込まないでください。

パターン

パターンの詳しい説明については、references/patterns.mdを参照してください。

タイポグラフィの階層（標準設定）

H1：40～56px Bold、H2：32～40px SemiBold、H3：24～28px SemiBold、本文：16～18px Regular、小：14px、アイブロウ：12～14px SemiBold Uppercase。

流動的なタイポグラフィ

すべてのテキストレベルでclamp()を使用します。フォントサイズにメディアクエリのブレークポイントは必要ありません。

エディトリアルタイポグラフィ

本文にはセリフフォントを使用します（18〜20px）。行の長さを短めにします（最大60ch）。ドロップキャップを使用します。プルクオートにはディスプレイフォントを使用します。

アンチパターン

テキストの壁

構成のない長い文章です。解決策：2〜3段落ごとに小見出しを追加します。リストや引用をリズムを生み出す要素として使います。

フォントの過剰使用

3種類を超えるフォントファミリー、一貫性のないウェイト、根拠のないサイズ指定です。解決策：2種類のフォントファミリー、定義されたスケール、文書化されたルールを使用します。

フォントが小さすぎる

本文が16px未満、特にモバイルでの使用です。解決策：本文は最低16pxとし、モバイルでは18pxを推奨します。実機でテストします。

コントラスト不足

白い背景に薄いグレーのテキストを使用します。解決策：本文テキストは最低4.5:1（WCAG AA）にします。大見出し（>= 24px）は最低3:1にします。

チェックリスト

• フォントファミリーは最大2〜3種類ですか？
• タイポグラフィのスケールを定義し、一貫して適用していますか？
• 本文は16px以上ですか？
• 行の高さは本文で1.5〜1.75、見出しで1.1〜1.3ですか？
• 行の長さは45〜75文字（理想は65ch）ですか？
• フォントはfont-display: swapを指定したWOFF2ですか？
• 読み込むフォントファイルは最大4つですか？
• 本文テキストのコントラスト比は4.5:1以上ですか？
• テキストの強調に下線を使用していませんか？
• ハイフネーションなしで均等割り付けテキストを使用していませんか？
• レスポンシブサイズにclamp()を使用していますか？
• 見出し前の余白は、見出し後の余白より大きいですか？
• フォントでウムラウトや特殊文字を使用できますか？
• フォントはセルフホストされていますか（GDPR）？

関連項目

• ui-design -- ビジュアル階層の中核要素としてのタイポグラフィ
• color-theory -- テキストの色とコントラスト比
• accessibility -- テキストのWCAGコントラスト要件
• responsive-design -- ブレークポイントに応じた流動的なタイポグラフィ
• branding-identity -- ブランド要素としてのフォント
• visual-direction -- 現在のタイポグラフィのトレンド