Web タイポグラフィ
あなたはスクリーン向けにタイプを設定しています。印刷用ではありません。目標は、実際のユーザーがあらゆるビューポート、ズームレベル、フォントの好みにおいて、可読（文字を識別できるか）、読みやすい（長文でも快適に読めるか）、そして階層が明確（視線がどこへ行くべきかがわかる）テキストを実現することです。
このスキルは、最も重要な少数の決定を、行うべき順序でエンコードしています。トップダウンで作業してください：巧みな機能に手を出す前に、システム（スケール、メジャー、リズム）を正しく取得しましょう。Web上の「悪いタイポグラフィ」のほとんどは、OpenTypeフラグの欠如ではなく、ボディサイズが小さすぎる、メジャーが広すぎる、行間が詰まりすぎている、フォントの読み込みでレイアウトがずれる、というものです。
出典 — 原理であり、所有物ではない
このスキルは、広く教えられているタイポグラフィの原理を独自に統合したものであり、誰かの著作、サンプル、デザインを複製したものではありません。アイデアはその系統に帰属しています（例：ブリングハーストのメジャー、ラプトンの文字→テキスト→グリッド、ティム・ブラウンのモジュラースケール）。なぜなら、アイデアにクレジットを与えることは学術的な行為だからです。しかし、ここでの表現とWebへの変換は、このスキル独自のものです。これを適用または拡張する際も同様に行ってください：原理を自分の言葉で表現し、自然な形でアイデアの出典をクレジットし、決して出典の散文、サンプルレイアウト、独自コンテンツをコピーしないでください。共有された知識はあなたが使用できるものですが、個人の表現はそうではありません。
決定順序
これらの決定を順番に行ってください。それぞれが次の決定を制約します。
- フォントの選択 — ブランドがWebフォントを必要としない限り、デフォルトで高速で優れたシステムスタックを使用します。Webフォントを読み込む場合は、同時にその読み込み計画（ステップ6）を立てます。
- ベースサイズとメジャー — 本文テキストは
1rem（16px）以上、行長は45〜75文字（max-width: ~66ch）。この2つは、他の何よりも読みやすさに貢献します。 - タイプスケール — 1つのモジュラー比率を選び、すべてのサイズをその比率から導き出します。
clamp()で流動的にします。ランダムなpx値を手動で選択しないでください。 - 垂直リズム — 本文は line-height 約1.5、大きな見出しはよりタイトに（1.1〜1.3）。段落間はスペースを入れるかインデントするかのどちらかで、両方はしないでください。
- 階層と洗練 — ウェイト/サイズ/スペースのコントラスト、見出しには
text-wrap: balance、本文にはpretty、大文字やディスプレイ用テキストにはトラッキング、OpenType機能。 - 読み込みとパフォーマンス —
font-display、重要なフォント1つをプリロード、WOFF2をセルフホスト、そしてフォールバックをメトリックマッチしてページがずれないようにする（CLS）。 - アクセシビリティパス — コントラスト、200%へのズーム、WCAG 1.4.12 テキストスペーシングのオーバーライド、ズームを無効にしない、本文を両端揃えにしない。
非交渉ルール（一般的な障害を防ぐルール）
これらは繰り返し現れる間違いです。なぜかを内面化して、新しい状況でも単にコピーするだけでなく適用できるようにしてください。
- 本文テキストは
remでサイズ設定し、決してpxではない。remはユーザーのブラウザフォントサイズ設定を尊重します。pxはアクセシビリティの設定を暗黙的に上書きします。pxはヘアラインの境界線や本当に固定された物理的な詳細のために予約してください。 - line-height は単位なしで。
line-height: 1.5は比率として継承されるため、各要素が自身のサイズから再計算されます。固定のline-height: 24pxは計算されたピクセル値を継承し、異なるサイズの子要素で壊れます。 - フォントサイズを純粋な
vwで設定しない。 ビューポート単位はズームやユーザーフォントサイズに反応しません — これは WCAG 1.4.4 に違反します。流動的なサイズ設定は常にclamp()でrem項とともにラップしてください：clamp(2rem, 1rem + 3vw, 4rem)。remがズームの動作を維持します。 - メジャーを制約する。 約75文字より長い行は、目が折り返しで位置を見失います。約45文字より短いと、ぎくしゃくします。テキストコンテナに
max-width: 66chを設定することが、最も効果的な読みやすさの修正です。 - Web上で本文テキストを両端揃えにしない。 洗練されたハイフネーションなしのCSS両端揃えは、白い「川」を生み出します。左揃え、右不揃いにしてください。
- Webフォントは読み込み時にレイアウトをずらしてはならない。
font-displayをメトリックマッチしたフォールバック（size-adjust+ascent/descent/line-gap-override）と組み合わせて、実際のフォントの入れ替えがゼロリフローになるようにします。これがフォント起因のCLSに対する修正です。
クイックスタートCSS
ほとんどのプロジェクトにそのまま適用できる、健全でアクセシブルなベースライン。システムフォントスタック（ダウンロードゼロ）と流動的なスケールを使用します。比率とフォントは要件に応じて調整してください。
:root {
/* フォント — デフォルトはシステムスタック（即時、CLSなし、ネイティブな感覚） */
--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
"Apple Color Emoji", "Segoe UI Emoji", sans-serif;
--font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
/* 流動的タイプスケール（デスクトップで約メジャーサード 1.25）。実際のプロジェクトは Utopia.fyi で生成 */
--step--1: clamp(0.833rem, 0.80rem + 0.17vw, 0.9rem);
--step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 本文 */
--step-1: clamp(1.25rem, 1.15rem + 0.50vw, 1.5rem);
--step-2: clamp(1.563rem,1.40rem + 0.80vw, 1.953rem);
--step-3: clamp(1.953rem,1.70rem + 1.25vw, 2.441rem);
--step-4: clamp(2.441rem,2.00rem + 2.00vw, 3.052rem);
--measure: 66ch;
}
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
font-size: var(--step-0);
line-height: 1.5;
font-synthesis: none; /* 太字/斜体を偽装しない */
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { line-height: 1.15; text-wrap: balance; } /* タイト + 均等な行長 */
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p, li, blockquote { max-width: var(--measure); text-wrap: pretty; } /* メジャー + オーファンなし */
p + p { margin-block-start: 1em; } /* スペース、インデントしない */
:is(h1, h2, h3, h4) + * { margin-block-start: 0.5em; }
/* データ/図表を列で揃える */
table, .tabular-nums { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
より完全でコメント付きのスターター（メトリックマッチしたWebフォントの例を含む）は assets/starter.css にあります。プロジェクトのタイポグラフィをゼロから構築する際に読んでください。
リファレンスファイル — 必要なものを読む
このファイルをコンテキストに保持し、タスクが必要とするときにリファレンスを参照してください。
references/decision-records.md— この分野の理由を凝縮したもの：5つのメタパターン（タイポグラファーの考え方）と、各ルールをその根拠とそれが拒否する代替案に結び付けるADR形式の決定記録。他のファイルが直接カバーしていない新しい判断に直面したときにこれを読んでください — メタパターンにより、専門家と同じように正しい答えを導き出すことができます。また、「原理であり所有物ではない」という境界の拠り所でもあります。references/foundations.md— 古典的な原理（ラプトンのLetter / Text / Grid、ブリングハースト、バタリック）をWebに翻訳：アナトミー、メジャー、階層、ペアリング、配置。フォントを選択/ペアリングするとき、またはレイアウトが「何かおかしい」が単一のルールが明らかに壊れていないときにこれを読んでください。references/fluid-scale.md—clamp()による流動的タイポグラフィ、clamp()の計算、モジュラースケールの比率、Utopia、コンポーネントレベルのタイポグラフィのためのコンテナクエリ単位（cqi）。タイプスケールを構築または調整するとき、またはタイポグラフィをビューポートではなくコンテナに反応させる必要があるときにこれを読んでください。references/font-loading.md— Webフォントのパフォーマンス：font-display、プリロード、セルフホスト vs Google Fonts（GDPR）、WOFF2、サブセット化、unicode-range、バリアブルフォント、そしてメトリックマッチしたフォールバックによるCLSの排除（size-adjust、*-override、Fontaine、next/font）。プロジェクトがカスタムWebフォントを読み込む場合、またはレイアウトシフト/テキスト表示遅延の問題がある場合にこれを読んでください。references/accessibility.md— テキストに関するWCAG 2.2：コントラスト比、200%へのサイズ変更（1.4.4）、テキストスペーシングのオーバーライド（1.4.12）、ズーム、ディスレクシア/可読性、動きの軽減。タイポグラフィの作業が完了したと主張する前、およびタスクがアクセシビリティ、a11y、コントラスト、コンプライアンスに言及するたびにこれを読んでください。references/modern-css.md— ブラウザサポート状況を含む現在のCSSタイポグラフィ機能：text-wrap: balance/pretty、OpenType（font-variant-*、font-feature-settings）、text-box-trim/text-box-edge、hanging-punctuation、initial-letter、フォント相対単位（lh、cap、ch、ic）、line-clamp、色の濃淡のためのcolor-mix。洗練機能を求めるとき、およびプログレッシブエンハンスメントが必要かどうかを確認するためにこれを読んでください。
提供方法
- タイポグラフィを変更するときは、コードだけでなく、決定を説明してください — 「本文を1.125remに上げ、メジャーを66chに制限したので、行が120文字幅になりません。」タイポグラフィは感覚で判断されます。ユーザーに何を見るべきかを伝えてください。
- 並列のスケールを発明するよりも、プロジェクトの既存のトークン/スケールを編集することを優先してください。プロジェクトがTailwindを使用している場合は、任意の値を散在させるのではなく、
theme.fontSize/ CSS変数でスケールを設定してください。 - ブラウザサポートに敏感な機能（
modern-css.mdでフラグ付け）はプログレッシブエンハンスメントとして追加してください — それらがなくてもページが正しく読める必要があります。 - 重要な変更後は、完了を宣言する前にアクセシビリティパス（
references/accessibility.md）を行ってください。コントラストと、レイアウトが200%ズームとテキストスペーシングのオーバーライドに耐えられることを確認してください。