Webタイポグラフィ

Webプロジェクトのための書体選択、組み合わせ、実装の実践ガイドです。タイポグラフィはコミュニケーションを支えるものです。優れたタイポグラフィとは、読者をコンテンツに没入させ、書体そのものには目が行かないような「見えない」ものです。

コアな原則

タイポグラフィはあなたのコンテンツの声です。 選んだ書体は、単語が読まれるずっと前からトーンを設定します。法律関連のサイトは遊び心のある感じであってはなりませんし、子ども向けアプリは企業的な感じであってはいけません。

「透明なワイングラス」の原則： タイポグラフィはクリスタルのようなワイングラスのようなものです。焦点はワイン（コンテンツ）にあり、グラス（書体）にはありません。読者は意味を吸収すべきで、文字形態に気づくべきではありません。

読者は読まず、スキャンします。 眼球は7〜9文字ずつジャンプし（サッカード）、一瞬停止します（固視）。優れたタイポグラフィはこの自然なパターンをサポートします。

スコアリング

目標：10/10。 タイポグラフィの実装をレビューまたは作成する際、以下の原則への準拠に基づいて0〜10の範囲で評価してください。10/10はすべてのガイドラインに完全に沿っていることを意味します。より低いスコアは対処すべきギャップを示しています。常に現在のスコアと、10/10に達するための具体的な改善点を提供してください。

タイプの2つのコンテキスト

すべてのタイポグラフィは2つのカテゴリに分かれます：

コンテキスト	目的	優先事項
一瞬のためのタイプ	ヘッドライン、ボタン、ナビゲーション、ロゴ	パーソナリティ、インパクト、独特性
生活を共にするタイプ	本文、記事、ドキュメント	可読性、快適性、耐久性

主力となる書体は「生活を共にするタイプ」に優れています。サイズ、ウェイト、コンテキスト全体で多用途で、自分自身に注目を集めません。例：Georgia、Source Sans、Freight Text、FF Meta。

タイポグラフィフレームワーク

1. 私たちはどのように読むのか

コアコンセプト： 読む仕組みを理解することは、すべてのタイポグラフィ決定の基礎です。眼球は滑らかにスキャンせず、バースト状にジャンプし、優れたタイポグラフィはこの自然なパターンをサポートします。

なぜ機能するのか： タイポグラフィが脳がテキストを処理する方法に合致する場合、つまり単語形状認識、一貫したリズム、明確な文字形態を通じて、読者はより速くコンテンツを吸収し、疲れが少なくなります。これらの仕組みに逆らうと、読者を遠ざけるような摩擦が生まれます。

主要な知見：

• サッカード — 眼球は滑らかなスキャンではなく、7〜9文字ずつジャンプします。行の長さとレタースペーシングはサッカード効率に直接影響します
• 固視点 — 眼球は一瞬停止してコンテンツを吸収します。密集していたり、間隔が悪いテキストは固視時間を増やし、読む速度を遅くします
• 単語形状（ボウマ） — 熟練した読者は個々の文字ではなく、単語のシルエットを認識します。明確なボウマを保つことは認識速度を助けます
• 可読性と読みやすさ — 可読性は個々の文字が区別できるかどうかです（書体の懸念）。読みやすさは、テキストを長期間快適に読めるかどうかです（タイポグラフィの懸念—サイズ、間隔、行の長さ）。書体は可読性が高くても、設定が悪いと読みにくくなります。

製品への応用：

コンテキスト	応用	例
長編コンテンツ	長時間読むことの快適さを最適化	16-18pxの本文、1.5-1.7の行間、45-75文字の行
ダッシュボードUI	素早くスキャンするための最適化	明確なウェイト階層、データグループ間の十分な空白
モバイル読書	変動する距離と照明に対応	わずかに大きい本文サイズ（17-18px）、より高いコントラスト
ドキュメント	スキャンと深い読み読みの両方をサポート	清潔なヘッドライン階層と寛大な段落間隔
eコマース	素早い製品比較を可能にする	一貫した数値フォーマット、表形式の数値
アクセシビリティ	様々な能力を持つ読者をサポート	高いコントラスト、寛大な間隔、明確な文字形態

コピーパターン：

/* 本文の最適な読むリズム */
.prose {
  font-size: 1.125rem;     /* 18px */
  line-height: 1.6;
  max-width: 65ch;          /* 約45〜75文字 */
  letter-spacing: normal;   /* 本文にトラッキングを強制しない */
}

倫理的な境界線： タイポグラフィの決定は常に、視覚的な新奇さよりも読者の理解と快適さを優先すべきです。美的効果のため読みやすさを犠牲にすることは、読者を排除し、コンテンツの目的を損なわせます。

詳しくはreferences/typeface-anatomy.mdを参照してください。用語、文字形態の部分、分類システムについて。

2. 書体の評価

コアコンセプト： 書体は、プロジェクトで使用される価値を得るために、技術的、構造的、実用的な品質チェックを通過する必要があります。美しい見本でも画面上では失敗します。厳密な評価は、プロジェクト途中の費用のかかる書体交換を防ぎます。

なぜ機能するのか： スクリーン出力、可変帯域幅、デバイスの多様性は、印刷が直面したことのない制約を課します。構造的評価（一貫したストローク、開いたカウンター、明確な文字形態）と実用的評価（ファイルサイズ、ライセンス、出力）を通過した書体は、実世界の条件の全範囲で確実に機能します。

主要な知見：

• 技術的品質 — 一貫したストローク幅、テキストブロック全体での均一な色（視覚的密度）、優れたカーニングペア（AV、To、Ty）、完全な文字セット（アクセント、句読点、数値）、複数のウェイト（最小限：通常、太字、イタリック）
• 構造的評価 — 十分なx-height（大きいほど画面の可読性は向上）、開いたカウンターとアパーチャ（a、e、cの形）、明確な文字形態（Il1、O0、rnと m）、適切なコントラスト（太い/細いストローク変動）
• 実用的なニーズ — 意図したサイズで機能（実際の使用サイズでテスト）、ターゲットスクリーンとブラウザで良く出力される、Webロード用に受け入れ可能なファイルサイズ、プロジェクト用に適切なライセンス
• 実際のコンテンツテスト — 常にダミーテキストではなく、実際のコンテンツでテストしてください。ダミーテキストは文字頻度、単語長、段落リズムの問題を隠しています

製品への応用：

コンテキスト	応用	例
本文選択	x-height、開いたカウンター、均一な色を優先	長編読書用Didotの代わりにSource Serif Pro
ヘッドライン選択	大きいサイズでのパーソナリティと独特性を優先	編集的インパクト用Playfair Display
UI/システムテキスト	小さいサイズでの可読性とウェイト範囲を優先	インターフェース要素用InterまたはSF Pro
多言語製品	ターゲット言語の完全なグリフカバレッジを確認	幅広いUnicodeサポート用Noto Sans
パフォーマンス重視サイト	ファイルサイズとサブセット化オプションを評価	複数の静的ウェイトに対する可変フォント単一ファイル
ブランド刷新	書体が意図されたパーソナリティを伝えるかを評価	実際の使用サイズでのスペシメンをブランド属性と比較

コピーパターン：

/* 実際の使用サイズでテスト書体 */
body { font-size: 16px; }           /* 最小本文サイズ */
.caption { font-size: 0.75rem; }    /* 小さいサイズをストレステスト */
h1 { font-size: 3rem; }            /* 大きいサイズの文字を確認 */

/* フォントスムージングでのレンダリングを確認 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

倫理的な境界線： 実装前に常に書体ライセンスを確認してください。ライセンスされていないフォントを使用すると、プロジェクトは法的リスクにさらされ、これらのツールを作成するタイプデザインコミュニティを損なわせます。

詳しくはreferences/evaluating-typefaces.mdを参照してください。詳細な品質評価基準と構造的分析について。

3. 書体の選択

コアコンセプト： 美的ではなく、目的から始めます。コンテンツのトーン、読むコンテキスト、期間、パーソナリティが書体選択を駆動すべきです。個人的な好みやトレンド追従ではなく。

なぜ機能するのか： 書体選択がコンテンツ要件に基づいている場合、結果は恣意的ではなく必然的に感じられます。目的駆動の選択は、主観的な好みではなく明確な推論で正当化できるため、ステークホルダーレビューもより良く生き残ります。

主要な知見：

• 最初に仕事を定義する — 本文、ヘッドライン、UI要素にはそれぞれ異なる書体が必要な場合があります。サンプルを閲覧する前に役割を明確にします
• トーンをコンテンツに合わせる — 財務レポートはベーカリーメニューとは異なるタイプが必要です。書体は主題の自然な声のように感じるべきです
• 実際のサイズでテスト — 72pxで美しい書体も14pxでは読めないかもしれません。実際に使用するサイズで常に評価してください
• ファミリーを確認 — 必要なウェイト、イタリック、スタイルがあることを確認してからコミットします。プロジェクト途中に欠落するウェイトを発見することは妥協を強います
• 安全な開始点 — 本文には、Georgia、Source Serif Pro、Charter（セリフ）、システムフォント、Source Sans Pro、Inter、IBM Plex Sans（サンセリフ）がコンテキスト全体で確実に機能します

製品への応用：

コンテキスト	応用	例
コンテンツが多いサイト	長時間の読書のための主力セリフまたはサンセリフを選択	記事用Source Serif ProまたはCharter
SaaS ダッシュボード	強力な表形式数値を持つクリーンなサンセリフを選択	データが豊富なインターフェース用InterまたはIBM Plex Sans
マーケティングランディングページ	独特のディスプレイ書体と読みやすい本文書体をペアリング	Playfair Displayヘッドライン + Source Sans Pro本文
ドキュメント化サイト	コード+散文の明確さとウェイト範囲を優先	コード用IBM Plex Mono、散文用IBM Plex Sans
ブランド駆動の製品	ブランド値を具体化する書体をカスタム制作またはライセンス	カスタム書体またはブランドパーソナリティへの慎重に選択されたマッチ
アクセシビリティ重視	最大の可読性のために設計された書体を選択	視覚障害者ユーザー用Atkinson Hyperlegible

コピーパターン：

/* 安全なシステムフォントスタック */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Oxygen, Ubuntu, sans-serif;
}

/* 信頼性の高いWebフォント本文スタック */
body {
  font-family: 'Source Sans Pro', -apple-system,
               BlinkMacSystemFont, sans-serif;
}

倫理的な境界線： トレンディーまたは洗練されたように見えるために、読みやすさを犠牲にして書体を選択することを避けてください。低視力を持つ読者や読困難症の読者を除き、視覚的なスタイルを優先するタイポグラフィは、その基本的な目的に失敗します。

詳しくはreferences/evaluating-typefaces.mdを参照してください。選択中に適用する品質評価について。

4. 書体のペアリング

コアコンセプト： 成功した書体ペアリングは明確なコントラストを作成します。書体は明らかに異なるべきで、紛らわしく類似しているべきではありません。最大で1〜2つの書体。3つ以上には例外的なスキルが必要です。

なぜ機能するのか： 書体間のコントラストは視覚的階層とリズムを作成します。2つの書体が類似しすぎている場合、目的なしにテンションを作成します。読者は理由を知らずに何かが「おかしい」と感じます。明確な構造的コントラスト（セリフ+サンセリフ、軽い+太い、ヒューマニスト+幾何学的）により、各書体が異なる役割を果たしながら調和して共存できます。

主要な知見：

• コントラストタイプ — 構造（セリフ+サンセリフ）、ウェイト（軽い+通常）、時代（ヒューマニスト+幾何学的）、幅（コンデンスド+通常）はすべて効果的なコントラストを作成します
• 同じデザイナー戦略 — 1人のデザイナーによって設計された書体は、多くの場合、DNAを共有して調和します（例：FF Meta + FF Meta Serif）
• スーパーファミリー — 一緒に機能するために設計されたタイプフェースファミリーは推測を排除します（例：Roboto + Roboto Slab）
• ペアリングの間違い — 2つのセリフまたは2つの似たようなサンセリフ書体、どちらの書体も独特にしようとする、ルネッサンスとポストモダンの意図なしの混合、1つの書体が別の書体を圧倒するウェイト

製品への応用：

コンテキスト	応用	例
編集サイト	セリフヘッドライン+サンセリフ本文の古典的な読みやすさ	Playfair Display + Source Sans Pro
テック製品	保証された調和のためのスーパーファミリー	Roboto + Roboto Slab
コーポレートサイト	微妙な一体感のための同じデザイナーペアリング	FF Meta + FF Meta Serif
eコマース	独特のディスプレイ+ニュートラルな本文	コンデンスドヘッドライン書体+システムサンセリフ本文
ドキュメント	同じファミリーのモノスペースコード+サンセリフ散文	IBM Plex Mono + IBM Plex Sans
最小限のブランド	ウェイト変動での単一ファミリー	さまざまなウェイトとサイズのInter

コピーパターン：

/* クラシックなセリフ+サンセリフペアリング */
h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
}
body {
  font-family: 'Source Sans Pro', -apple-system, sans-serif;
}

/* スーパーファミリーペアリング */
h1, h2, h3 {
  font-family: 'Roboto Slab', serif;
}
body {
  font-family: 'Roboto', sans-serif;
}

倫理的な境界線： わからない場合は、ペアリングを強制するのではなく、ウェイト変動で1つのファミリーを使用してください。不適切にペアリングされた組み合わせは、コンテンツを損なわせる認知的な摩擦を作成し、複雑さを目的なしに追加することはデザイナーの自我よりも読者のニーズに機能します。

詳しくはreferences/pairing-strategies.mdを参照してください。具体的な組み合わせ、コントラスト方法、証明されたペアリングについて。

5. タイポグラフィの測定

コアコンセプト： フォントサイズ、行の長さ、行の高さの3つの測定が、快適な読書の基礎を形成します。書体の選択より、これらを正しく取得することが重要です。

なぜ機能するのか： これらの測定は、眼球がテキスト全体と下向きにどのように追跡するかを直接管理します。最適な行長（45〜75文字）はサッカードパターンと一致します。十分な行高（1.4-1.8）は、眼球が戻りの掃引で間違った行にジャンプするのを防ぎます。十分なフォントサイズ（最小16px）は、文字形態がスクリーン上の快適な認識に十分な大きさであることを保証します。

主要な知見：

• 本文フォントサイズ — 最小16px。より大きいサイズ（18px）に傾く読書が多いサイト用。モバイルユーザーは、デザイナーが想定するより離れた場所で電話を持ちます
• 行の長さ（メジャー） — 45〜75文字が理想的、66文字が最適。chユニットまたはmax-widthを使用して強制します。より長い行は補うためにより多くの行高を必要とします
• 行の高さ — 本文1.4-1.8。より長い行はより多く必要。より短い行はより少なく必要とします。ヘッドラインはより厳しい間隔が必要です（1.1-1.25）
• ヘッドラインスケール — ヘッドラインレベル間で一貫した比率（1.2-1.5）を使用して、極端さなしに明確な階層を確立します

製品への応用：

コンテキスト	応用	例
ブログ/記事	1.6行高で65ch max-widthを強制	.prose { max-width: 65ch; line-height: 1.6; }
ドキュメント	わずかに広いメジャーと増加した行高	max-width: 75ch; line-height: 1.7;
モバイルUI	より大きい本文サイズ、自動制約メジャー	ビューポート幅制約を持つfont-size: 17px;
ダッシュボード	密集データ表示のためのより厳しい行高	テーブルセルとラベル用line-height: 1.3;
ランディングページ	スキャン可能性のための寛大なサイジングと間隔	font-size: 1.25rem; line-height: 1.7;
メールテンプレート	メールクライアント互換性のための制約された幅	インラインサイジングを持つmax-width: 600px;

コピーパターン：

/* 最適な本文のテキスト測定 */
.prose {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  max-width: 65ch;
}

/* より広い列はより多くの行高を必要とします */
.wide-text {
  max-width: 80ch;
  line-height: 1.8;
}

/* コンテキストによる行高調整 */
h1, h2 { line-height: 1.1-1.25; }
.ui-text { line-height: 1.3-1.4; }
.body-text { line-height: 1.5-1.7; }

倫理的な境界線： 読みやすい測定値を、レイアウト美的感覚のために決して犠牲にしないでください。テキストを狭い列に詰め込み、「デザインに合わせる」ために小さなサイズは、人間の理解よりも視覚的な配置を優先します。

詳しくはreferences/responsive-typography.mdを参照してください。流動的なサイジングとビューポートベースの測定戦略について。

6. タイプ階層の構築

コアコンセプト： 階層は読者に何が最も重要かを伝えます。サイズ、ウェイト、色における制御された変動を通じて区別を作成します。しかし、すべてのレバーを同時に組み合わせてはいけません。

なぜ機能するのか： 視覚的な階層は、読者が情報をどのように自然に優先順位をつけるかを模倣します。サイズ、ウェイト、色の違いレベル間が意図的で一貫している場合、読者はページをスキャンして、その構造を一瞬で理解できます。階層がなければ、すべてが注目を争い、誰も勝ちません。

主要な知見：

• 3つのレバー — サイズ、ウェイト、色。隣接するレベル間で1つまたは2つを変動させます。3つすべてを変動させることは、深い階層のためのヘッドルームを浪費する過度なコントラストを作成します
• スクイントテスト — ページを目を細めて見ると、階層がまだ明らかにならなければなりません。すべてがぼやけて同じに見える場合、区別は微妙すぎます
• 一貫したスケール — ヘッドラインレベル間で比率（1.2-1.5）を使用します。恣意的なサイズは視覚的なノイズを作成します。モジュラースケールはリズムを作成します
• レベルをスキップしない — H1からH3にジャンプすることは、読者の文書構造の心的モデルを破ります

製品への応用：

コンテキスト	応用	例
コンテンツページ	4〜5レベル全体のサイズ+ウェイト変動	H1 2.5rem/700、H2 1.75rem/600、本文1rem/400
ダッシュボード	データとラベルの区別のためのウェイト+色	値用太字#111、ラベル用通常#666
ナビゲーション	現在対利用可能のシグナルサイズ+ウェイト	アクティブ：太字、非アクティブ：通常、同じサイズ
マーケティングページ	ドラマティックなスキャン可能性のための大きなサイズジャンプ	ヒーロー3.5rem、セクションヘッド2rem、本文1.125rem
フォームUI	ラベル対入力の区別のための微妙なウェイトシフト	ラベル：600ウェイト、入力：400ウェイト
モバイルアプリ	限られたビューポートのためのより厳しいスケール	H1 1.75rem、H2 1.25rem、本文1rem

コピーパターン：

/* モジュラースケール付きタイプ階層 */
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 700; color: #111; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 600; color: #111; }
h3 { font-size: 1.25rem; font-weight: 600; color: #333; }
body { font-size: 1rem; font-weight: 400; color: #333; }
.secondary { font-size: 0.875rem; color: #666; }
.caption { font-size: 0.75rem; color: #888; }

/* ヘッドラインリズム */
h1, h2, h3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

倫理的な境界線： 階層は正直に読者をガイドすべきです。視覚的な顕著性を使用して、誤解を招く要素（小さなテキストに隠された隠れた手数料、太字の操作的なCTA）に注意を向けることは、タイポグラフィを読者に対して武器化します。

詳しくはreferences/css-implementation.mdを参照してください。完全な階層実装パターンと可変フォント技術について。

7. レスポンシブタイポグラフィとWebフォントパフォーマンス

コアコンセプト： タイプはスクリーンと読むコンテキストに適応する必要があり、Webフォントは効率的にロードされる必要があります。clamp()を使用した流動的なタイポグラフィはブレークポイントジャンプを排除し、戦略的なフォントロードはレイアウトシフトと遅いレンダーを防ぎます。

なぜ機能するのか： 単一の固定フォントサイズは320pxの電話と1440pxのデスクトップの両方に機能することはできません。流動的なスケーリングはテキストが常にビューポートに比例することを保証します。一方、Webフォントはデフォルトでレンダーをブロックします。最適化されていないロードは、目に見えないテキストのフラッシュ（FOIT）または様式化されていないテキストのフラッシュ（FOUT）を引き起こします。どちらも読む体験を低下させます。

主要な知見：

• 流動的なタイポグラフィ — clamp(min, preferred, max)はビューポートサイズ間でフォントサイズをスムーズにスケーリングし、タイプサイジングのメディアクエリブレークポイントの必要性を排除します
• ブレークポイント調整 — モバイル（<640px）はわずかに大きい本文サイズ（17-18px）とより厳しいヘッドラインスケールが必要。タブレット（640-1024px）は標準サイジングと強化された行長制限を使用。デスクトップ（>1024px）は行長を維持しながら、より大きいディスプレイタイプを使用できます
• フォントロード戦略 — font-display: swapを使用してフォールバックテキストを即座に表示し、<link rel="preload">で重要なフォントを事前ロードし、必要な文字のみを含めるようにフォントをサブセット化
• パフォーマンスバジェット — 合計Webフォントペイロードで200KB未満を目指します。積極的にサブセット化し、WOFF2形式を優先し、複数の静的ウェイトファイルを置き換えるために可変フォントを検討します

製品への応用：

コンテキスト	応用	例
コンテンツサイト	clamp()での流動的な本文とヘッドラインサイズ	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem)
eコマース	ヒーローフォントを事前ロード、二次ウェイトを遅延ロード	<link rel="preload" href="font.woff2" as="font">
SaaS アプリ	UIはシステムフォント、マーケティングのみWebフォント	アプリの-apple-system、ランディングページのカスタムフォント
グローバル製品	ペイロードを削減するためにペイロッドごとにサブセット化フォント	英語ページはラテンサブセット、アジアページはCJKサブセット
パフォーマンス重視	4〜6静的ファイルを置き換える可変フォント	ウェイト軸300-700を持つ単一可変フォントファイル
プログレッシブWebアプリ	サービスワーカーでキャッシュフォントをオフライン使用	caches.open('fonts').then(cache => cache.addAll(...))

コピーパターン：

/* clamp()で流動的なタイポグラフィ */
body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}
h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* パフォーマンスWebフォントロード */
@font-face {
  font-family: 'Custom Font';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  unicode-range: U+0000-00FF; /* ラテンサブセット */
}

/* HTMLヘッドで事前ロード */
/* <link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin> */

倫理的な境界線： パフォーマンス最適化は、排除のコストでは来るべきではありません。非英語の読者が必要とする文字を削除するための積極的なサブセット化、または読む強調が必要なイタリック/太字ウェイトを削除することは、実際の人に危害を加わる方法で速度用の包括性を取引します。

詳しくはreferences/responsive-typography.mdを参照してください。流動的なタイプ実装について、そしてreferences/css-implementation.mdを参照してください。@font-face、ロード戦略、可変フォントについて。

一般的な間違い

間違い	失敗する理由	修正
テキストが圧縮されているように感じます	不十分な行高は読者を疲させる視覚的な密度を作成します	行高を1.6以上に増やす。段落間隔を追加します
行が長すぎて、トラックするのが難しい	75文字を超えて、眼球は戻りの掃引で位置を失います	テキストコンテナにmax-width: 65chを追加
ヘッドラインが切断されているように見えます	ヘッドラインの上に過度なスペースは、後続のコンテンツとの関連付けを破ります	ヘッドラインの上のスペースを減らす。下のスペースを保つ
テキストはスクリーンでぼやけているように見えます	不十切なフォントスムージング設定またはサブピクセルレンダリング問題	フォントスムージングを確認。別のウェイトを試します。サイズを増やします
フォントはゆっくりロードしている	最適化されていないフォントファイルはレンダーをブロックし、最初のコンテンツフルペイントを遅延	フォントをサブセット化。font-display: swapを使用。重要なフォントを事前ロード
本文テキストが小さすぎる	ユーザーはデザイナーが想定するより電話をより遠く保つ。小さいテキストは老齢目の歪み	18pxに増やし。実際の距離で実際のユーザーでテスト
階層は不明です	レベル間に不十分なコントラストはすべてが競うようにしています	レベル間のサイズ/ウェイトの違いを増やす
書体が衝突する	明確なコントラストのためのペアリング書体は解決不可能な視覚的なテンションを作成します	1つのファミリーに簡素化。または構造的なコントラスト（セリフ+サンセリフ）を保証
Lorem ipsumを使用したテスト	ダミーテキストは文字頻度、単語長、リズムの問題を隠しています	実際の使用を表す実際のコンテンツでテスト

クイック診断

質問	ノーの場合	アクション
本文テキストは16px以上ですか？	テキストはスクリーン読むために快適すぎます	最小16px、好ましくは18px読書が多いページに増やします
行の長さは75文字未満ですか？	眼球は戻りの掃引で位置を失います	散文コンテナにmax-width: 65chを追加
本文の行高は1.4以上ですか？	行は圧縮され、読む速度は低下します	本文テキスト1.5-1.7に増やします
タイプレベル間のコントラストは十分ですか？	階層は見えない。読者はスキャンできません	隣接するレベル間のサイズまたはウェイトの違いを増やす
書体は実際のサイズの実際のスクリーンでテストされていますか？	レンダリング驚きは本番で表示されます	すべての使用サイズでターゲットデバイスとブラウザでテスト
合計フォントペイロードは200KB未満ですか？	遅いロード体験を低下させ、SEOに影響	サブセットフォント、WOFF2を使用、可変フォントを検討
フォールバックフォントは指定されていますか？	FOITはフォントのロード中にテキストを空白のままにします	あらゆるfont-family宣言にシステムフォント代替案を追加
ページは200%ブラウザズームで機能しますか？	低視力ユーザーのアクセス失敗	200%ズームでテスト。オーバーフローと切り詰めの問題を修正
ヘッドラインは孤立した単語がありませんか？	単一の結尾単語は不完全に見え、スペースを浪費	text-wrap: balanceまたはマニュアルブレーク使用
リンクは周囲のテキストから視覚的に区別されますか？	ユーザーはインタラクティブ要素を識別できません	リンクに色および/またはアンダーラインの区別があることを保証

参照ファイル

• typeface-anatomy.md：用語、文字形態の部分、分類システム
• evaluating-typefaces.md：品質評価、構造的分析、技術要件
• pairing-strategies.md：書体を組み合わせる、コントラスト方法、証明されたの組み合わせ
• responsive-typography.md：流動的なタイプ、ビューポートユニット、ブレークポイント戦略
• css-implementation.md：@font-face、ロード戦略、可変フォント、パフォーマンス

さらに読む

Webタイポグラフィについて by Jason Santa Maria 出版社：A Book Apart（2014） ISBN：978-1937557065 Amazon

著者について

Jason Santa Maria はWebでタイポグラフィについて業界がどのように考えるか形成した、グラフィックデザイナー、クリエイティブディレクター、教育者です。彼はTypekit（現在Adobe Fonts）でクリエイティブディレクターを務め、高品質のタイプをWebデザイナーに規模で持ち込むのを支援しました。彼はA Book Apartを共同設立しました。これは、ウェブサイトを作成する人々のための簡潔な本の出版社です。また、Webスタンダーズとデザイン教育の主導的な声でした。Santa Mariaはニューヨーク市の視覚芸術学校（SVA）で教え、A List Apartを含む出版物をアートディレクションしています。彼の仕事は、従来のタイポグラフィの工芸とスクリーンのためのデザインの実用的な現実との間のギャップを橋渡しし、「Webタイポグラフィについて」は、彼の深い専門知識をWebデザイナーが働く人々のためにアクセス可能で、独断的なガイドに蒸留します。