typography

タイポグラフィ

優れた先人たちの原則に基づく、ユーザーインターフェースのためのプロフェッショナルなタイポグラフィです。

「タイポグラフィはコンテンツに敬意を払うためにあります。」 — Robert Bringhurst

参考ファイル

特定のトピックについて詳しく知りたい場合は、次の参考資料をご覧ください。

トピック	読むタイミング
masters.md	権威ある根拠を確認したいとき、細かな判断を行うとき、「なぜか」を理解したいとき
variable-fonts.md	バリアブルフォント、可変ウェイト、パフォーマンス最適化を利用するとき
font-loading.md	FOIT/FOUT の問題、プリロード、Core Web Vitals、セルフホスティングについて
opentype-features.md	合字、等幅数字、スタイルセット、スラッシュ付きゼロについて
fluid-typography.md	clamp()、text-wrap、テキストの省略、垂直リズム、フォントのスムージングについて
tailwind-integration.md	Tailwind のタイポグラフィユーティリティ、prose プラグイン、カスタマイズについて
internationalization.md	RTL 言語、アラビア語／ヘブライ語、CJK、双方向テキストについて

出力形式

タイプシステムの推奨事項

## Type System

### Scale
- Base: [size, e.g., 16px]
- Ratio: [e.g., Minor Third 1.200]
- Rationale: [why this ratio]

### Hierarchy
| Level | Size | Weight | Line Height | Letter Spacing | Use |
|-------|------|--------|-------------|----------------|-----|
| Display | ... | ... | ... | ... | Hero, marketing |
| H1 | ... | ... | ... | ... | Page titles |
| H2 | ... | ... | ... | ... | Section heads |
| Body | ... | ... | ... | ... | Paragraphs |
| Small | ... | ... | ... | ... | Captions, labels |

### Fonts
- Primary: [font] — [rationale]
- Secondary: [font, if applicable]
- Mono: [font, if applicable]

### Implementation
[Ready-to-use CSS/Tailwind]

タイポグラフィの監査

## Typography Audit

### Issues
| Element | Problem | Recommendation |
|---------|---------|----------------|
| ... | ... | ... |

### Quick Wins
- [Immediate improvement 1]
- [Immediate improvement 2]

---

基本原則

4つの基本要素（Bringhurst）

本文で最も重要なタイポグラフィ上の考慮事項：

1. ポイントサイズ — 本文は最低 16px、補足テキストも絶対に 14px 未満にしない
2. 行間 — 本文は 1.5～1.7、見出しは 1.1～1.3
3. 行の長さ — 45～75 文字（理想は 66 文字）。max-w-prose（約 65ch）を使用
4. フォントの選択 — 書体をコンテンツと文脈に合わせる

コントラストによる階層

複数の要素を使って階層を確立します。

要素	低コントラスト	高コントラスト
サイズ	14px → 16px	16px → 48px
ウェイト	400 → 500	400 → 700
色	Gray-600 → Gray-900	Gray-400 → Black
大文字・小文字	通常	すべて大文字

「1つのデザインにつき書体は1種類にしてください。イタリック体や太字は避け、代わりにサイズの段階的な変化に頼りましょう。」 — Massimo Vignelli

節度

• フォントファミリーは最大1～2種類 — 組み合わせる場合は、セリフ体を1種類、サンセリフ体を1種類
• 見出しレベルは実際には3～4段階 — それ以上の入れ子は、たいてい構造上の問題を示しています
• タイプスケールを守る — 場当たり的なサイズは避けましょう
• 余白を活用する — すべての隙間を埋めないようにしましょう

「コンピューター時代の到来により、書体の氾濫は新たなレベルの視覚的汚染をもたらしています。」 — Massimo Vignelli

---

タイプスケール

モジュラースケールの比率

名前	比率	特徴
マイナーセカンド	1.067	控えめで保守的
メジャーセカンド	1.125	穏やかでプロフェッショナル
マイナースリー	1.200	バランスがよく汎用的
メジャースリー	1.250	大胆でインパクトがある
完全四度	1.333	明確な階層
黄金比	1.618	劇的でエディトリアル

実用的なスケール（16px のマイナースリー）

--text-xs:   12px;  /* 0.75rem */
--text-sm:   14px;  /* 0.875rem */
--text-base: 16px;  /* 1rem */
--text-lg:   18px;  /* 1.125rem — not in pure scale */
--text-xl:   20px;  /* 1.25rem */
--text-2xl:  24px;  /* 1.5rem */
--text-3xl:  30px;  /* 1.875rem */
--text-4xl:  36px;  /* 2.25rem */
--text-5xl:  48px;  /* 3rem */

変更してもよい場合

• マーケティング／ヒーロー領域： サイズ差を大きくしてもかまいません
• データが密集したインターフェース： スケールを小さくします
• モバイル： 基準サイズを少し大きくします（17～18px）

---

スペーシングのガイドライン

文脈に応じた行の高さ

文脈	行の高さ	理由
本文	1.5～1.7	読みやすさを高めるゆとり
見出し	1.1～1.3	特に大きなサイズでは狭めに
UI ラベル	1.2～1.4	コンパクトながら読みやすい
ボタン	1.0～1.25	1行表示で、詰まった印象

「目は文字を読むのではなく、文字の間の空間を読みます。」 — Adrian Frutiger

字間

文脈	トラッキング	CSS
本文	デフォルト、または +0.01em	tracking-normal
すべて大文字	+0.05em～+0.1em	tracking-wide / tracking-wider
大きな見出し	-0.01em～-0.02em	tracking-tight
小さなテキスト（14px 未満）	+0.01em～+0.02em	tracking-wide

すべて大文字にする場合のルール： 必ず字間を広げます。短く（1～3語）保ちます。

段落の間隔

• 段落間： 1em～1.5em（行の高さと同じか、少し広め）
• 見出しの後： 最初の段落の上部マージンを小さくする
• セクション間： 段落間隔の2～3倍

---

フォントの選択

システムフォントスタック

/* Sans-serif (modern) */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

/* Serif */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;

/* Monospace */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

安全に使えるウェブフォントの推奨

カテゴリ	フォント	用途
サンセリフ	Inter, Source Sans 3, Work Sans, DM Sans	UI、本文
セリフ	Source Serif 4, Lora, Merriweather, Literata	エディトリアル、長文
等幅	JetBrains Mono, Fira Code, Source Code Pro	コード、データ
ディスプレイ	Fraunces, Epilogue, Outfit	見出し

フォントの組み合わせの原則

• コントラストで組み合わせる — セリフ＋サンセリフ
• xハイトを合わせる — 混在させる場合は視覚的な調和のため
• 必要なウェイトが揃っていることを確認する — どちらも必要なウェイト／スタイルを備えていること

「父親は娘たちの中にお気に入りを作ってはいけない。」— Hermann Zapf（書体について）

---

モダンなCSSタイポグラフィ

テキストの折り返し

/* Balanced line lengths for headings (≤6 lines) */
h1, h2, h3, blockquote, figcaption {
  text-wrap: balance;
}

/* Prevent orphans in body text */
p, li {
  text-wrap: pretty;
}

注意： 枠線付きコンテナー内では balance を使わないでください。視覚的なバランスが崩れます。

可変タイポグラフィ

/* Font scales smoothly between breakpoints */
h1 {
  font-size: clamp(2rem, 1rem + 4vw, 4rem);
  line-height: clamp(1.1, 1.3 - 0.1vw, 1.3);
}

body {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

スケールの全容については、fluid-typography.md を参照してください。

テキストの省略表示

/* Single line */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line (2 lines) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

---

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

ウェイトの調整

暗い背景では文字が太く見えます。ウェイトを少し下げてください。

@media (prefers-color-scheme: dark) {
  body {
    font-weight: 350; /* Instead of 400 */
  }
  h1, h2, h3 {
    font-weight: 600; /* Instead of 700 */
  }
}

フォントのスムージング

暗い背景では、太く見える印象を抑えるためにアンチエイリアスを適用してください。

.dark-bg {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

色のコントラスト

• 真っ黒（#000）に純白（#fff）を使うのは避けてください。コントラストが強すぎます
• オフホワイト（#f5f5f5）と黒に近い色（#1a1a1a）を使用してください
• ダークモードでは、コントラスト比を10:1～15:1にすることを目指してください

---

タイポグラフィの詳細

引用符

まっすぐな引用符ではなく、曲線型の引用符を使用してください。

• 正： “Hello” と ‘world’
• 誤： "Hello" と 'world'

ダッシュ

種類	文字	用途
ハイフン	-	単語の分割、複合語
エンダッシュ	–	範囲（2020–2024）、関係性
エムダッシュ	—	挿入句

数字

種類	用途	CSS
等幅数字	表、価格、位置合わせ	font-variant-numeric: tabular-nums
プロポーショナル数字	本文	font-variant-numeric: proportional-nums
オールドスタイル数字	エディトリアルコンテンツ	font-variant-numeric: oldstyle-nums
スラッシュ付きゼロ	コード、データ	font-feature-settings: "zero" 1

詳細については、opentype-features.md を参照してください。

---

アクセシビリティ

最小値

要素	最小	推奨
本文	16px	16-18px
補助テキスト	14px	14-16px
法的表記／キャプション	12px	12px＋トラッキングを広げる
コントラスト比	4.5:1	7:1

ユーザー設定

/* Use relative units so users can scale */
body {
  font-size: 1rem; /* Not 16px */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

ディスレクシアへの配慮

• 両端揃えのテキストは避ける
• 字形が明確に異なるサンセリフ体（aとα、lと1とI）を優先する
• 行の高さと段落間隔にゆとりを持たせる
• オプションとしてOpenDyslexicを提供することを検討する

---

よくある間違い

避けること

• 本文や長い見出しをすべて大文字にする
• 本文の段落を中央揃えにする
• 1行を80文字より長くする
• 「見た目」を理由にコントラストを不十分にする
• フォントファミリーを使いすぎる（2種類超）
• UIテキストに装飾フォントを使う
• ウェブ上で両端揃えにする
• 白い背景に小さな灰色のテキストを使う
• アラビア語のテキストに文字間隔を設定する

注意点

• 目立つテキストでの孤立行や孤立語
• 見出し階層の不統一
• フォントのフォールバック指定の欠落
• ウェブフォントの読み込みによるレイアウトシフト
• リンクではないテキストへの下線

---

すぐに使える実装

最小限のプロフェッショナルな設定

:root {
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

body {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

h1, h2, h3 {
  line-height: 1.2;
  text-wrap: balance;
  letter-spacing: -0.02em;
}

p {
  text-wrap: pretty;
  max-width: 65ch;
}

code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
}

@media (prefers-color-scheme: dark) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

Tailwindクイックスタート

<article class="
  prose prose-gray lg:prose-lg
  prose-headings:text-balance
  prose-p:text-pretty
  dark:prose-invert
  max-w-prose mx-auto
">
  
</article>

パターンの全容については、tailwind-integration.md を参照してください。