web-typography

Web タイポグラフィ

Web 向け書体を選び、組み合わせ、実装するための実践ガイドです。優れたタイポグラフィは目立ちません。注目を集めるのではなく、読者をコンテンツに没頭させます。

基本原則

タイポグラフィはコンテンツの声です。 選ぶ書体は、ひとことも読まれる前に雰囲気を決めます。法律関連のサイトは遊び心があるように感じさせず、子ども向けアプリは企業的な印象を与えないようにします。「澄んだゴブレット」の原則に従いましょう。タイポグラフィは透明なワイングラスのように、グラス（書体）ではなくワイン（コンテンツ）に意識を向けさせるものです。

スコアリング

目標：10/10。 スコア＝実装が満たす「クイック診断」10項目の数です。基準：9-10＝本文16px以上、行長75ch未満、行の高さ1.4以上、レベル間のコントラストが明確、フォントのペイロードが200KB未満、フォールバックを設定、200％ズームに対応。5-6＝読みやすいものの、行長の制御、フォールバック、またはズームへの耐性が不足。<=3＝本文が16px未満、行長の上限なし、FOIT、または階層が判読不能。現在のスコアと、基準を満たしていない具体的な診断項目を必ず示してください。

文字の2つの用途

タイポグラフィはすべて、次の2つのカテゴリに分類されます。

用途	目的	優先事項
一瞬のための文字	見出し、ボタン、ナビゲーション、ロゴ	個性、インパクト、際立ち
長く付き合う文字	本文、記事、ドキュメント	読みやすさ、快適さ、持続性

汎用書体は「長く付き合う文字」に適しており、注目を集めずにさまざまなサイズ、ウェイト、用途で活用できます。例：Georgia、Source Sans、Freight Text、FF Meta。

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

1. 読み方

基本概念： 読みの仕組みを理解することが、あらゆるタイポグラフィの判断の土台です。目は滑らかに文字を追うのではなく、短いまとまりごとにジャンプします。

効果がある理由： この仕組みに逆らうと摩擦が生じ、読者が離れてしまいます。仕組みに合わせることで、読者は疲労を抑えながら、より速くコンテンツを吸収できます。

重要なポイント：

• サッカード — 目は7-9文字のまとまりごとにジャンプします。行の長さと字間はサッカードの効率に直接影響します
• 注視 — 目はコンテンツを吸収するため、短時間停止します。文字が詰まっていたり、間隔が適切でなかったりすると、読む速度が落ちます
• 単語の形（ブーマ） — 読み慣れた読者は個々の文字ではなく、単語の輪郭を認識します
• 判読性と読みやすさ — 判読性とは文字を見分けられるかどうか（書体に関する要素）です。読みやすさとは、長時間にわたって無理なく読めるかどうか（サイズ、間隔、行の長さといったタイポグラフィに関する要素）です。判読性の高い書体でも、読みづらく組まれることがあります

プロダクトへの適用：

用途	適用方法	例
長文コンテンツ	読み続けても快適な状態を最適化	本文16-18px、行の高さ1.5-1.7、1行あたり45-75文字
ダッシュボードUI	素早くスキャンできるよう最適化	ウェイトの階層を明確にし、データのグループ間に余白を設ける
モバイルでの読書	距離と照明を考慮	本文を大きめにする（17-18px）、コントラストを高める

コピーのパターン：

.prose {
  font-size: 1.125rem;     /* 18px */
  line-height: 1.6;
  max-width: 65ch;          /* ~45-75 characters */
}

文字の各部位（xハイト、カウンター、アパーチャ）の名称を確認したり、書体の選択を根拠づけるために分類体系で位置づけたりする必要がある場合は、references/typeface-anatomy.mdを参照してください。

2. 書体の評価

基本概念： 書体をプロジェクトに採用する前に、技術面、構造面、実用面の品質チェックを通過する必要があります。見本で美しく見える書体も、画面上ではうまく表示されないことがあります。

効果がある理由： 画面でのレンダリング、帯域幅の変動、多様なデバイスには、印刷物では考慮する必要のなかった制約があります。厳密に評価することで、プロジェクトの途中で書体を変更するコストを防げます。

主なポイント：

• 技術的な品質 — ストロークの太さが一貫していること、テキストブロック全体の視覚的な濃さが均一であること、カーニングの組み合わせ（AV、To、Ty）が適切であること、文字セットが完全であること、複数のウェイトが用意されていること（最低限：レギュラー、ボールド、イタリック）
• 構造の評価 — xハイトが大きいこと（画面で読みやすくなります）、カウンターやアパーチャーが開いていること（a、e、c）、字形を明確に見分けられること（Il1、O0、rnとm）
• 実用上の要件 — 対象画面で実際の使用サイズをテストすること、ファイルサイズを確認すること、ライセンスを確認すること
• 実際のコンテンツでのテスト — Lorem ipsumでは、文字の出現頻度、単語の長さ、段落のリズムに関する問題が隠れてしまいます

製品での活用例：

コンテキスト	用途	例
本文書体の選定	xハイト、開いたカウンター、均一な濃さを優先する	長文読書にはDidotよりSource Serif Pro
UI／システムテキスト	小さいサイズでの読みやすさとウェイトの幅を優先する	インターフェース要素にはInterまたはSF Pro
多言語対応製品	対象言語のグリフを網羅しているか確認する	Unicodeを幅広くサポートするNoto Sans

コピーのパターン：

/* Stress-test at every actual use size */
body { font-size: 16px; }
.caption { font-size: 0.75rem; }
h1 { font-size: 3rem; }

倫理上の境界： フォントを公開する前に、必ずウェブ利用のライセンスを確認してください。デスクトップ／印刷用ライセンスでは、ウェブへの埋め込みが認められないことがほとんどです。無許可での使用には、実際の法的責任が伴います。

参照：references/evaluating-typefaces.md：候補書体を審査する際にご覧ください。品質チェックリスト、注意すべき兆候の一覧、確認すべき構造上の基準が記載されています。

3. 書体の選定

基本概念： 美しさではなく、目的から始めます。選定の基準となるのは、コンテンツのトーン、読む状況、読む時間です。個人の好みや流行ではありません。

効果がある理由： 目的に基づいた選択は恣意的ではなく、自然に感じられます。また、好みではなく理由を示して説明できるため、関係者のレビューにも耐えられます。

主なポイント：

• まず用途を定める — 本文、見出し、UI要素には、それぞれ異なる書体が必要な場合があります
• トーンをコンテンツに合わせる — 財務報告書とベーカリーのメニューでは、異なる雰囲気が必要です
• ファミリーを確認する — 採用を決める前に、必要なウェイト、イタリック、スタイルが揃っていることを確認します
• 安全な出発点 — 本文用セリフ体：Georgia、Source Serif Pro、Charter。本文用サンセリフ体：システムフォント、Source Sans Pro、Inter、IBM Plex Sans

製品での活用例：

コンテキスト	用途	例
コンテンツ中心のサイト	長時間の読書に適した、汎用性の高いセリフ体またはサンセリフ体	記事にはSource Serif ProまたはCharter
SaaSダッシュボード	桁揃え数字が見やすい、すっきりしたサンセリフ体	データ量の多いUIにはInterまたはIBM Plex Sans
アクセシビリティを重視した製品	最大限の読みやすさを目指して設計された書体	視覚障害のあるユーザー向けのAtkinson Hyperlegible

コピーのパターン：

/* Web font with system fallback stack */
body {
  font-family: 'Source Sans Pro', -apple-system,
               BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

参照：references/evaluating-typefaces.md：最終候補を絞り込む際や、無料書体と有料書体を比較検討する際にご覧ください。横並びで比較する方法と、品質に優れた書体の候補一覧が記載されています。

4. 書体の組み合わせ

基本概念： 優れた組み合わせは明確なコントラストを生み出します。書体は混同するほど似ているのではなく、はっきりと異なっている必要があります。書体は最大でも1〜2種類にします。

効果がある理由： 明確な構造上のコントラスト（セリフ体＋サンセリフ体、ライト＋ボールド、ヒューマニスト＋ジオメトリック）が、それぞれの書体に異なる役割を与えます。似すぎた書体は、目的のない緊張感を生み出します。読者は理由がわからなくても、何かが「しっくりこない」と感じます。

主なポイント：

• コントラストの種類 — 構造（セリフ体＋サンセリフ体）、ウェイト（ライト＋レギュラー）、時代（ヒューマニスト＋ジオメトリック）、幅（コンデンス＋標準）
• 同じデザイナーの書体を使う方法 — 1人のデザイナーによる書体は、調和する特徴を共有していることがよくあります（FF Meta＋FF Meta Serif）
• スーパーファミリー — 組み合わせて使えるように設計されたファミリーなら、試行錯誤を減らせます（Roboto＋Roboto Slab）
• 組み合わせの失敗例 — ほぼ同じ書体を2つ使う、両方の書体が注目を奪い合う、一方の書体がもう一方を圧倒する

製品での活用例：

コンテキスト	活用方法	例
エディトリアルサイト	見出しはセリフ体、本文はサンセリフ体	Playfair Display + Source Sans Pro
ドキュメント	同じファミリーの等幅フォントでコード、サンセリフ体で本文	IBM Plex Mono + IBM Plex Sans
ミニマルなブランド	1つのファミリーでウェイトを変える	Interのウェイトとサイズを使い分ける

コピーのパターン：

/* Classic serif + sans-serif pairing */
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Source Sans Pro', -apple-system, sans-serif; }

参照：references/pairing-strategies.md。2つ目の書体を選ぶ際に、実績のある組み合わせ、コントラストの種類をまとめた表、同じデザイナーやスーパーファミリーを活用する方法を確認できます。

5. タイポグラフィの計測値

基本概念： フォントサイズ、行長、行高の3つの計測値が、快適な読書の土台になります。これらを適切に設定することは、書体の選択よりも重要です。

効果がある理由： これらの計測値は、目がテキストを横方向や下方向に追う動きを左右します。最適な行長はサッカードのパターンに合い、十分な行高は改行時に目が別の行へ移ってしまうのを防ぎ、適切なサイズは画面上で文字の形を認識しやすくします。

主なポイント：

• 本文サイズ — 最低でも16pxにします。読書が中心のサイトでは、18pxなど大きめに設定します。モバイルユーザーはデザイナーが想定するよりも遠くにスマートフォンを持ちます。
• 行長（字幅） — 理想は45〜75文字、最適は66文字です。ch単位またはmax-widthで制限します。
• 行高 — 本文では1.4〜1.8にします。行が長いほど大きく設定します。見出しはより詰めて（1.1〜1.25）設定します。
• 見出しのスケール — レベル間の比率を一定（1.2〜1.5）に保つと、極端な差をつけずに階層を作れます。

製品での活用例：

コンテキスト	活用方法	例
ブログ／記事	最大幅65ch、行高1.6	.prose { max-width: 65ch; line-height: 1.6; }
ダッシュボード	データが密集する箇所では行高を詰める	表のセルやラベルにline-height: 1.3;
ランディングページ	読み取りやすいようにゆとりのあるサイズにする	font-size: 1.25rem; line-height: 1.7;

コピーのパターン：

.prose {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  max-width: 65ch;
}
/* Line height by context */
h1, h2 { line-height: 1.1; }      /* headlines: 1.1-1.25 */
.ui-text { line-height: 1.35; }   /* UI: 1.3-1.4 */
.body-text { line-height: 1.6; }  /* body: 1.5-1.7 */

参照：references/responsive-typography.md。clamp()の式を書く際に、最小値・推奨値・最大値を導き出す方法と、ビューポートに基づいて計測する方法を確認できます。

6. タイポグラフィの階層を構築する

基本概念： 階層によって、何が最も重要かを読者に伝えます。サイズ、ウェイト、色を適度に変化させて違いを生み出します。ただし、3つすべてを同時に変えないでください。

効果がある理由： レベル間に意図的で一貫した違いを設けると、読者はページ構造をひと目で把握できます。階層がなければ、すべてが競い合い、何も際立ちません。

主なポイント：

• 3つの要素 — サイズ、ウェイト、色。隣り合うレベル間では1つか2つを変化させ、3つすべてを変えることは避けます
• 目を細めて確認するテスト — ページを見たとき、目を細めても階層がわかる必要があります
• 一貫したスケール — 見出しレベル間にモジュラースケール（1.2〜1.5）の比率を設定するとリズムが生まれます。サイズが不規則だとノイズになります
• レベルを飛ばさない — H1からH3へ飛ぶと、読者のメンタルモデルが崩れます

プロダクトへの適用例：

コンテキスト	適用方法	例
コンテンツページ	4〜5段階のレベルでサイズとウェイトを変える	H1 2.5rem/700、H2 1.75rem/600、本文 1rem/400
ダッシュボード	データとラベルでウェイトと色を変える	値は太字の #111、ラベルは通常の #666
フォーム UI	ラベルのウェイトをわずかに変える	ラベル：ウェイト 600、入力欄：ウェイト 400

コピーのパターン：

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; }
body { font-size: 1rem; font-weight: 400; color: #333; }
.secondary { font-size: 0.875rem; color: #666; }
/* Headings: more space above than below */
h1, h2, h3 { margin: 1.5em 0 0.5em; line-height: 1.2; }

倫理的な境界： 手数料、免責事項、オプトアウトを、小さくしたりコントラストを低くしたりして目立たなくし、ユーザーが確認すべき情報を格下げしないでください。重要情報を隠す階層は、読者に対してタイポグラフィを武器にすることになります。

参照：references/css-implementation.md。CSS を実装する際に、階層パターン全般、@font-face による読み込み、font-variation-settings の軸、pyftsubset によるサブセット化を確認してください。

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

基本概念： タイポグラフィは画面に合わせて変化し、ウェブフォントは効率的に読み込まれる必要があります。clamp() による流動的なタイポグラフィはブレークポイントでの急な変化をなくし、計画的なフォント読み込みはレイアウトシフトや描画の遅れを防ぎます。

効果がある理由： 固定サイズのフォントでは、320px のスマートフォンと 1440px のデスクトップの両方に適切に対応できません。ウェブフォントはデフォルトで描画をブロックするため、読み込みを最適化しないと、不可視テキストのフラッシュ（FOIT）やスタイル未適用テキストのフラッシュ（FOUT）が発生します。

主なポイント：

• 流動的なタイポグラフィ — clamp(min, preferred, max) を使うと、ビューポートに合わせて滑らかに拡大縮小できます。文字サイズの調整にメディアクエリは不要です
• ブレークポイントの調整 — モバイルでは本文をやや大きめ（17〜18px）にし、見出しのスケールを少し詰めます。デスクトップでは行の長さを制限しつつ、ディスプレイ用の文字サイズを大きくできます
• 読み込み戦略 — font-display: swap を使うと、フォールバックテキストがすぐに表示されます。重要なフォントは先読みし、必要な文字だけにサブセット化します
• パフォーマンス予算 — フォントの総データ量を 200KB 未満にします。WOFF2 を優先してください。可変フォントを使えば、静的なウェイトのファイル 4〜6 個を置き換えられます

プロダクトへの適用例：

コンテキスト	適用方法	例
コンテンツサイト	clamp() による流動的なサイズ設定	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem)
E コマース	ヒーロー用フォントを先読みし、追加ウェイトは遅延読み込みする	<link rel="preload" href="font.woff2" as="font">
グローバルプロダクト	言語ごとにサブセット化してデータ量を削減する	英語にはラテン文字のサブセット、アジア向けページには CJK のサブセットを使用

コピーのパターン：

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

@font-face {
  font-family: 'Custom Font';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF; /* Latin subset */
}
/* In <head>: <link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin> */

倫理的な境界： ユーザーを最適化の対象から締め出さないでください。英語以外を読むユーザーに必要な文字を削除するサブセット化や、強調に必要なイタリック体・太字のウェイトを削除することは、速度と引き換えに包括性を損ないます。

よくある間違い

間違い	失敗する理由	修正方法
テキストが詰まって見える	行間が狭いと読者が疲れます	line-height を 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 未満ですか？	読み込みの遅さが UX と SEO に悪影響を与えます	サブセット化して WOFF2 を使い、可変フォントの使用も検討します
フォールバックフォントを指定していますか？	FOIT によりテキストが表示されなくなります	すべての font-family にシステムフォントのフォールバックを指定します
200% ズームでページが機能しますか？	弱視の方向けのアクセシビリティに問題があります	200% ズーム時のオーバーフローやテキストの切り捨てを修正します
見出しに孤立した単語はありませんか？	最後に残った単語が未完成に見えます	text-wrap: balance を使うか、手動で改行します
リンクは視覚的に区別できますか？	ユーザーが操作可能な要素を見つけられません	色や下線などで区別します

さらに読む

• Jason Santa Maria 著『"On Web Typography"』（A Book Apart、2014 年）

著者について

Jason Santa Maria はグラフィックデザイナーであり教育者です。Typekit（現在の Adobe Fonts）でクリエイティブディレクターを務め、A Book Apart を共同設立しました。ニューヨークの School of Visual Arts で教鞭を執っており、著書『On Web Typography』では、伝統的なタイポグラフィの技術と、画面向けデザインの現実との橋渡しをしています。