typography

タイポグラフィを極める

あらゆるウェブプロジェクトで、美しく読みやすく、体系的なタイポグラフィを作成します。

前提条件

タイポグラフィを設定する前に、既存のデザインコンテキストを確認します。

• .agents/design-context.md（design-context を参照）を読みます。見出し／本文／等幅フォント、基本サイズ、スケール比、見出し／本文のウェイトを確認してください。ユーザーが明示的に変更を希望している場合を除き、これらを使用します。
• コードベースにデザインシステムが存在する場合は、その文字サイズスケールとフォントスタックに合わせます。
• 注意：デザインコンテキストにある「Type Scale Reference」（12/14/16/18/20/24/30/36/48/60/72）は、Tailwind の手動調整済みスケールであり、厳密な 1.25 の進行ではありません。プロジェクトですでに使用されている場合はそのまま維持し、新しい作業では保存済みのスケール比から真のモジュラースケールを生成し、どちらを使用したかを伝えます。

---

ステップ 1：文字サイズスケールの比率を選ぶ

文字サイズスケールの比率によって、サイズ間の数学的な関係が決まります。コンテンツの密度とプロジェクトのビジュアルスタイルに応じて選択します。

比率	呼び名	値	最適な用途
マイナーセカンド	タイト	1.067	高密度データ UI、ダッシュボード
メジャーセカンド	コンパクト	1.125	アプリ、ツール、コンパクトなレイアウト
マイナースリード	デフォルト	1.200	一般的なウェブ、ブログ、マーケティング
メジャースリード	ゆったり	1.250	エディトリアル、雑誌
パーフェクトフォース	大胆	1.333	マーケティングサイト、ランディングページ
オーグメンテッドフォース	インパクト	1.414	大胆な見出し、クリエイティブなサイト
パーフェクトフィフス	ドラマチック	1.500	インパクトの強いヒーローセクション
黄金比	グランド	1.618	アート、高級感、エディトリアル

スケールを生成する

:root {
  --type-ratio: 1.25;   /* major third */
  --type-base: 1rem;    /* 16px */

  /* Each step = previous * ratio, so changing --type-ratio updates the whole scale */
  --text-xs:   max(0.75rem, calc(var(--text-sm) / var(--type-ratio))); /* 0.64rem = 10.24px -> floored to 12px */
  --text-sm:   calc(var(--type-base) / var(--type-ratio));  /* 0.8rem   = 12.8px */
  --text-base: var(--type-base);                             /* 1rem     = 16px   */
  --text-lg:   calc(var(--text-base) * var(--type-ratio));   /* 1.25rem  = 20px   */
  --text-xl:   calc(var(--text-lg) * var(--type-ratio));     /* 1.563rem = 25px   */
  --text-2xl:  calc(var(--text-xl) * var(--type-ratio));     /* 1.953rem = 31.25px */
  --text-3xl:  calc(var(--text-2xl) * var(--type-ratio));    /* 2.441rem = 39px   */
  --text-4xl:  calc(var(--text-3xl) * var(--type-ratio));    /* 3.052rem = 48.8px */
  --text-5xl:  calc(var(--text-4xl) * var(--type-ratio));    /* 3.815rem = 61px   */
}

数式：size(n) = base × ratio^n。上のコメントは比率 1.25 の場合のものです。比率を変更した場合は、コメントを再計算してください。キャプションやラベルなどの機能的なテキストは、12px 以上に保ちます。

---

ステップ 2：フォントの組み合わせルール

基本的な組み合わせ方

1. セリフ体の見出し + サンセリフ体の本文：クラシックでエディトリアルな印象になります。構造のコントラストが際立ちます。
2. 幾何学的なサンセリフ体の見出し + ヒューマニスト系サンセリフ体の本文：モダンでありながら温かみがあります。
3. スラブセリフ体の見出し + サンセリフ体の本文：大胆で自信に満ちた印象になります。
4. 等幅フォントの見出し + サンセリフ体の本文：技術的で、開発者向けの印象になります。
5. 同じファミリーでウェイトを変える：最も安全な選択肢です。見出しには 700 以上、本文には 400 を使います。

避けること

• 同じカテゴリーで、プロポーションが似たフォントを 2 つ使うこと（例：幾何学的なサンセリフ体を 2 つ）。
• 1 ページで 2 書体を超えて使うこと（コード用の等幅フォントを含める場合でも最大 3 書体）。
• 装飾用／ディスプレイ用フォントを本文に使うこと。

---

ステップ 3：厳選した Google Fonts の組み合わせ

これらはテスト済みの、本番環境で使用できる組み合わせです。

エディトリアル／コンテンツ中心

1. Playfair Display + Source Sans 3 エレガントなセリフ体の見出しと、すっきりしたサンセリフ体の本文。雑誌やブログに最適です。

2. Lora + Inter 温かみのあるトランジショナルセリフ体と、ニュートラルでモダンなサンセリフ体。非常に読みやすい組み合わせです。

3. Fraunces + Commissioner 個性のある可変「ソフト」セリフ体と、コントラストを抑えたヒューマニスト系サンセリフ体。個性的なエディトリアルスタイルになります。

モダン／SaaS

4. Inter + Inter 単一ファミリーのシステムです。見出しには 700、本文には 400 を使います。非常に汎用性があります。

5. DM Sans + DM Sans 幾何学的でモダンです。Inter よりもやや個性があります。

6. Manrope + Source Sans 3 やや幅の狭い幾何学的なグロテスク体と、ヒューマニスト系サンセリフ体。親しみやすいテック系の印象になります。

大胆／マーケティング

7. Space Grotesk + General Sans（Fontshare、セルフホスト。ライセンスについては「Licensing」を参照）または Space Grotesk + DM Sans 等幅フォントの影響を受けたサンセリフ体と、すっきりした幾何学的なフォント。テック感があり、大胆です。

8. Bricolage Grotesque + Inter 見出しには遊び心のある可変サンセリフ体、本文には信頼性の高いフォント。遊び心がありながらもプロフェッショナルです。

9. Cabinet Grotesk + Satoshi（どちらも Fontshare、セルフホスト。ライセンスについては「Licensing」を参照） モダンで幾何学的な組み合わせです。高級感のあるスタートアップの美学を演出します。

専門的な組み合わせ

10. JetBrains Mono + Inter 等幅の見出し／コード＋サンセリフ体の本文。開発者向けツールやドキュメントに適しています。

11. Instrument Serif + Instrument Sans 一緒にデザインされたセリフ体／サンセリフ体の組み合わせです。リスクの低い組み合わせです（Instrument Serif はディスプレイ用のウェイトのみのため、見出し専用で、本文には適しません）。

12. Sora + Newsreader ジオメトリックなサンセリフ体の見出し＋読みやすいセリフ体の本文。伝統的なパターンを逆転させた組み合わせです。

CSS インポートパターン

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@700;800&display=swap" rel="stylesheet">

:root {
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

---

ステップ 4：見出しの階層

推奨デフォルト（比率 1.25、基本サイズ 16px）

h1 {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);   /* ~3.8rem / 61px */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 0.5em;
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);   /* ~3.05rem / 49px */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);   /* ~2.44rem / 39px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 0.5em;
}

h4 {
  font-size: var(--text-2xl);   /* ~1.95rem / 31px */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h5 {
  font-size: var(--text-xl);    /* ~1.56rem / 25px */
  font-weight: 600;
  line-height: 1.3;
}

h6 {
  font-size: var(--text-lg);    /* ~1.25rem / 20px */
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

主なルール

• 大きな見出しには、負の字間を設定します（-0.01em～-0.03em）。
• 見出しの行の高さは、本文より小さくします（本文は 1.5～1.75、見出しは 1.1～1.3）。
• サイズを小さくするために見出しレベルを飛ばしてはいけません（h1 -> h3）。見出しレベルはスクリーンリーダー向けのドキュメント構造です。クラスで見た目を切り離します（<h2 class="h4">）。

---

ステップ 5：本文の最適化

基本ルール

• フォントサイズ：最低 16px、長文コンテンツでは 18px を推奨します。
• 行の高さ：UI では 1.5、長文の読書では 1.6～1.75。
• 行の長さ：1 行あたり 45～75 文字（65ch が理想的です）。
• 段落間隔：段落間は 1em～1.5em。

body {
  font-family: var(--font-body);
  font-size: 1.125rem;        /* 18px */
  line-height: 1.65;
  color: var(--text-primary, var(--gray-900)); /* design-context: Neutral 800 body / 900 headings */
  -webkit-font-smoothing: antialiased;  /* macOS only; harmless elsewhere */
  text-rendering: optimizeLegibility;
}

.prose {
  max-width: 65ch;
  margin-inline: auto;
}

.prose p + p {
  margin-top: 1.25em;
}

.prose > * + * {
  margin-top: 1em;
}

---

ステップ 6：clamp() によるレスポンシブタイポグラフィ

メディアクエリーを使わずに、ブレークポイント間で滑らかに拡大縮小するには clamp() を使います。

計算式

clamp(min, preferred, max)
slope     = (maxSize - minSize) / (maxViewport - minViewport)      e.g. (24 - 20) / (1280 - 360) = 0.004348
preferred = (slope * 100)vw + (minSize - slope * minViewport)/16 rem
          = 0.4348vw + 1.152rem   ->  clamp(1.25rem, 0.4348vw + 1.152rem, 1.5rem)

優先値には必ず rem の項を含めてください。純粋な vw サイズはブラウザーのズームに応じて拡大せず、WCAG 1.4.4（テキストのサイズ変更）に適合しません。

実用的な流動スケール

これはステップ 1 の静的スケールを置き換えます（どちらか一方を使い、両方は使わないでください）。最大値はデスクトップ幅でおよそ 1.25～1.33 の比率になるように設定されています。最小値はモバイル向けの静的スケールに近い値です。

:root {
  --text-base: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --text-lg:   clamp(1.125rem, 0.75vw + 0.9rem, 1.35rem);
  --text-xl:   clamp(1.25rem, 1vw + 0.95rem, 1.75rem);
  --text-2xl:  clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  --text-3xl:  clamp(1.875rem, 2vw + 1.1rem, 3rem);
  --text-4xl:  clamp(2.25rem, 3vw + 1rem, 4rem);
  --text-5xl:  clamp(2.75rem, 4vw + 1rem, 5.5rem);
}

ヒーロー見出しのパターン

.hero-title {
  font-size: clamp(2.5rem, 5vw + 1rem, 6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance; /* evens out line lengths in short headings */
}

---

ステップ 7：テキストのスタイルと効果

グラデーションテキスト

.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

アウトライン／ストロークテキスト

.outlined-text {
  -webkit-text-stroke: 2px currentColor;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  font-size: 5rem;
}

テキストシャドウと画像上のテキスト

.text-shadow-soft { text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.text-shadow-hard { text-shadow: 3px 3px 0 rgba(0,0,0,0.15); }
.text-over-image  { text-shadow: 0 2px 16px rgba(0,0,0,0.5); } /* or a backdrop: */
.text-backdrop    { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); padding: 0.5em 1em; border-radius: 0.25em; }

グラデーション、アウトライン、画像を背景にしたテキストでも、コントラスト要件を満たす必要があります。テキストの背後にあるグラデーションや写真の最も明るい部分を測定し、アウトラインテキストはディスプレイサイズに限定してください。

---

ステップ 8：可変フォント

一般的な軸

Axis	CSS property	Range (typical)
wght	font-weight	100-900
wdth	font-stretch	75%-125%
slnt	font-style: oblique Xdeg	-12 to 0 (varies)
ital	font-style: italic	0 or 1
opsz	font-optical-sizing: auto	varies (Inter 14-32)

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

.heading {
  font-family: 'Inter Variable', sans-serif;
  font-weight: 750;           /* precise weight */
  font-optical-sizing: auto;  /* uses Inter's opsz axis automatically */
}

/* Width only works if the font HAS a wdth axis (e.g. Roboto Flex, Mona Sans; Inter has none) */
.heading-wide { font-stretch: 110%; }

すべての軸を一度に上書きし、軸ごとの継承が行われない font-variation-settings よりも、高水準のプロパティ（font-weight、font-stretch、font-style、font-optical-sizing）を優先してください。フォントを使う前に、Google Fonts のページでそのフォントの軸を確認してください。

---

ステップ 9：字間と単語間隔のガイドライン

Context	letter-spacing	Rationale
大きな見出し（3rem 以上）	-0.02 to -0.03em	視覚的な密度を高めるために詰めます
小さな見出し	-0.01em	わずかに詰めます
本文	normal (0)	デフォルトで最適化されています
全大文字のテキスト	+0.05 to +0.1em	大文字にはゆとりが必要です
小さなテキスト／キャプション	+0.01 to +0.02em	小さいサイズでの読みやすさを高めます
等幅フォント	normal	すでに均等な間隔です

.caps-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-sm);
  font-weight: 600;
}

---

ステップ 10：フォントの読み込み戦略

推奨される方法

Google Fonts CDN（オプション A）またはセルフホスト（オプション B。パフォーマンスとプライバシー／GDPR の観点からより適しています）のいずれかを選んでください。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>


<link rel="preload" as="font" type="font/woff2"
      href="/fonts/inter-var.woff2" crossorigin>

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;  /* Show fallback immediately, swap when loaded */
}

font-display の値

値	動作	使用する場面
swap	フォールバックを即座に表示し、切り替えます	本文、ほとんどの場合
optional	短時間ブロックし、カスタムフォントを使わない場合があります	重要度の低い装飾フォント
fallback	短時間ブロックし、短い切り替え期間を設けます	swap と optional のバランスを取る場合
block	最大 3 秒間テキストを非表示にします	アイコンフォントのみ

システムフォントスタックのフォールバック

:root {
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

レイアウトシフトの防止

size-adjust、ascent-override、descent-override を使用して、フォールバックのメトリクスを一致させます。

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body { font-family: 'Inter', 'Inter Fallback', sans-serif; }

これらのオーバーライド値は、Arial に対する Inter 用です。他のフォントでは、値を生成してください（例：Fontaine、Capsize、または自動で生成する next/font）。

ライセンス

• Google Fonts のファミリーはオープンソースです（ほとんどが SIL OFL 1.1、一部は Apache 2.0）。商用利用、埋め込み、セルフホストは無料です。
• Fontshare のフォント（Satoshi、General Sans、Cabinet Grotesk）は、ITF Free Font License の下で商用利用が無料ですが、Google Fonts にはありません。ダウンロードしてセルフホストしてください。
• 商用ファウンダリーのフォントにはウェブライセンスが必要です（多くの場合、ページビューに応じた料金です）。ライセンスを確認せずに、デザインツールや OS から取得したフォントファイルをセルフホストしないでください。

---

クイックリファレンスチェックリスト

1. プロジェクトに適したタイプスケールの比率を選びます。
2. 書体は最大 2 種類を選びます（等幅フォントを含める場合は 3 種類）。
3. 本文のテキストを 16～18px、行の高さを 1.5～1.75 に設定します。
4. 行の長さを 45～75 文字に制限します。
5. 流動的なレスポンシブサイズ指定には clamp() を使用します。
6. 大きな見出しには負の文字間隔を適用します。
7. 大文字のテキストには正の文字間隔を使用します。
8. 重要なフォントをプリロードし、font-display: swap を使用します。
9. システムフォントのフォールバックスタックを設定します。
10. 見出しには text-wrap: balance、段落には text-wrap: pretty を使用し、行末に孤立する語が生じないようにします。

確認して保存する

1. タイプ見本をレンダリングします：実際のフォントを使い、h1～h6、本文の段落（実際の幅で約 3 行）、キャプション、ラベル、コード、そして長い見出しを表示する HTML ページ（スクラッチパッド）を作成します。幅 375px と 1280px でスクリーンショットを撮り（npx playwright screenshot --viewport-size=375,800 --full-page "file://$PWD/specimen.html" mobile.png）、Read で両方を確認します。確認事項：フォントが実際に読み込まれている（フォールバックではない）、各レベルの違いが明確である、本文の行の長さが 45～75 文字である、ビューポートより幅の広い見出しがない。
2. .agents/design-context.md への書き戻しを提案します。変更された Typography のフィールド（Heading Font、Body Font、Mono Font、Base Size、Scale Ratio、Heading Weight、Body Weight）のみを、完全なフォントスタックとして更新します。差分を表示し、保存する前に確認を求めます。