フォントの組み合わせ：推測が嫌いなデザイナーのための実践ガイド

フォントの組み合わせに関するアドバイスのほとんどは、トレンチコートを着たムードボードのアドバイスのようなものです。「コントラストと補完性を組み合わせる」「セリフ体とサンセリフ体を組み合わせる」。なるほど。では、Figmaを開いて、今後3年間、ブランド、ウェブサイト、アプリ、プレゼンテーション資料など、あらゆる場面で通用する2つのフォントを実際に選んでみてください。ムードは消え去り、選択は依然として残っています。

このガイドでは、雰囲気ではなくフレームワークを提供します。組み合わせが成功するかどうかを左右する5つのルール、既に本番環境でテスト済みの12の組み合わせ、そしてローンチ前にほとんどの組み合わせを失敗に終わらせる要因について解説します。最後に掲載されている表を保存して、次のプロジェクトで活用してください。

フォントの組み合わせとは

フォントの組み合わせとは、どの書体がどの役割を担うのか、そしてその理由を決定するルールです。 ムードボード上の2つのフォントの美しさを競うものではありません。

真のフォントの組み合わせとは、サンプルを見る前に4つの質問に答えることです。見出しのフォントは何のためにあるのか。本文フォントの用途は何ですか？UIフォントの用途は何ですか？それらはどこで重なり、どこで重なってはいけないのでしょうか？これらの質問にそれぞれ一文で答えられないなら、まだペアリングはできていません。単にあなたが気に入った2つのフォントがあるだけです。

ペアリングはシステムの中に存在します。タイポグラフィシステムデザインの解説ではシステム全体を網羅しています。この記事は、フォントの選択そのものを扱う部分です。

すべてのペアリングを決定する5つのルール

これらのルールは複合的です。5つのうち4つを満たせば、ペアリングは大抵うまくいきます。3つ満たさないと違和感が生じ始めます。2つ満たさないと、他の要素がどうであれ、デザイン全体がアマチュアっぽく見えてしまいます。

ルール1：構造のコントラスト、プロポーションの調和

ペアリングは、異なる印象を与えつつ、同時に関連性も感じさせる必要があります。構造が異なるとは、一方が幾何学的で他方がヒューマニスティック、一方がセリフ体で他方がサンセリフ体、一方がディスプレイフォントで他方がテキストフォントであることを意味します。比例関係にあるとは、xハイト、キャップハイト、ストロークウェイトが十分に近く、どちらかが他方を圧倒することなく同じベースライン上に配置されることを意味します。

調和のないコントラストはミスのように見えます。コントラストのない調和は平坦に見えます。フォントの組み合わせは、この両方を満たす必要があります。

最も簡単なテストは、「Hamburgefonstiv」という単語を両方のフォントで同じポイントサイズで入力することです。同じサイズでどちらかのフォントが明らかに背が高かったり、幅が狭かったり、太かったりする場合は、プロポーションが一致していません。そのような組み合わせは、いつまでも調和しないでしょう。

ルール2：役割ごとに1つのフォント

すべてのフォントには1つの役割があります。見出し、本文、UI、またはディスプレイです。見出し用のフォントを本文に紛れ込ませてはいけません。本文用のフォントを見出しとして使うことも避けてください。

ほとんどの場合、フォントは2種類で十分です。健全なシステムで扱えるフォントの最大数は3種類です。4種類のフォントが必要な場合は、2種類のフォントをより効果的に活用する必要があります。フォントを追加するたびに、組み合わせ、ウェイト、ライセンス、パフォーマンス、ブランドガイドラインに関する決定事項が増えていきます。そのコストは膨大です。

例外は、コードブロックやデータテーブル専用の等幅フォントです。これはUIユーティリティであり、3つ目のフォントではありません。

ルール3：サンプルではなく、実際の環境でテストする

Behanceのフォントサンプルで美しく見える組み合わせでも、カード、ナビゲーションバー、12行のFAQブロックなどでは崩れてしまうことがあります。サンプルはフォントを美しく見せますが、実際のレイアウトではフォントの欠点が露呈します。

決定する前に、3つの実際の環境で組み合わせをテストしてください。見出しと小見出しを含むランディングページのヒーローセクション。H1、H2、本文、引用文を含む長文記事。ボタン、入力フィールド、ラベルを含む製品UI。これらのいずれかで組み合わせが崩れる場合は、それはシステム的な組み合わせではなく、ポスターのような特定の用途向けの組み合わせです。

画面は印刷サンプルではありません。ブラウザのレンダリング、ヒンティング、OSレベルのフォントスムージング、ダークモードなど、すべてがフォントの表示を歪めます。スタジオモニターのようにどんな環境でも見栄えの良い画面ではなく、ユーザーが実際に使用するデバイスでテストしてください。

ルール4：ライセンスとパフォーマンスはフォントペアリングの一部

世界で最も美しいフォントペアリングであっても、セルフホストができない、ファーストビューで600KBを超える、あるいは別途ライセンスなしではクライアントのプレゼンテーション資料に埋め込めないといった状況になれば、問題となります。フォントペアリングは実際に出荷される製品の中で使用され、製品には現実的な制約があります。

惚れ込む前にライセンスを確認してください。Webフォント、アプリフォント、埋め込みフォントのライセンスは同じではありません。多くのプレミアムフォントメーカーはそれぞれに料金を請求しています。Adobe FontsのようなサブスクリプションサービスはWebフォントをカバーしていますが、ネイティブアプリへの埋め込みは必ずしもカバーしていません。クライアントが使用できないフォントペアリングは、再作成が必要になります。

パフォーマンスも同様に重要です。可変フォントは複数のウェイトを1つのファイルにまとめるため、2026年においては概ね最適な選択肢となります。80KBの可変フォント2つは、40KBの静的フォント8つよりも、あらゆるデバイスで常に優れたパフォーマンスを発揮します。ウェブデザインの原則の解説では、なぜパフォーマンスが美的判断基準となるのかを詳しく説明しています。

ルール5：トレンドではなくブランドに合致した組み合わせを選ぶ

2026年のトレンドは、幾何学的なサンセリフとウェッジセリフの組み合わせです。しかし、それが200年の歴史を持つ法律事務所や小児病院にとって最適な組み合わせとは限りません。組み合わせを決めるのはブランドです。トレンドは投票権を持つだけで、拒否権や戴冠式を与えるものではありません。

ブランドブリーフに照らし合わせて組み合わせを検討しましょう。ブランドは何を象徴しているのか。ターゲット層は誰か。ブランドはどのようなトーンを表現すべきか。幾何学的なサンセリフは、合理性、現代性、そしてエンジニアリングを連想させます。ヒューマニスティックセリフは、権威、歴史、そして信頼感を醸し出します。スタートアップブランドで組み合わせると、信頼できる成熟した挑戦者という印象を与えます。一方、小児病院のブランドで組み合わせると、冷たく無機質な印象になります。

ブランド戦略がタイポグラフィのあらゆる決定にどのように影響を与えるかについて、より詳しく知りたい場合は、ブランドアイデンティティガイドラインの記事をご覧ください。

---

既に成功している12の組み合わせ

テストに何週間も費やす必要はありません。ここに挙げた組み合わせはすべて、実際の制作現場で使用されているか、あるいは皆さんがご存知のブランドのアイデンティティシステムで有効です。それぞれ上記の5つのルールに従っています。これらは最終的な答えではなく、出発点としてご活用ください。

| # | 見出し | 本文 | 最適な用途 | 雰囲気 |

|---|---------|------|----------|------|

| 1 | Inter | Source Serif | SaaS、開発ツール、技術系ブランド | 洗練された、落ち着いた印象 |

| 2 | Satoshi | Source Serif | モダンなスタートアップ、代理店 |シャープで編集的な印象 |

| 3 | DM Sans | Lora | 編集、ライフスタイル、コンテンツブランド | 温かみがあり読みやすい |

| 4 | General Sans | ニュースリーダー | 雑誌、長編記事出版社 | 自信に満ちた、文学的な印象 |

| 5 | Manrope | Fraunces | 大胆な消費者ブランド、D2C | 表現力豊かで遊び心のある印象 |

| 6 | Space Grotesk | IBM Plex Serif | エンジニアリング、開発インフラ、AI | 機械的でシャープな印象 |

| 7 | Cabinet Grotesk | Crimson Pro | プレミアムブランド、クリエイティブスタジオ | 洗練された、クラシックな印象 |

| 8 | Switzer | Tiempos Text | 金融、フィンテック、プロフェッショナルサービス | 権威がありモダンな印象 |

| 9 | Söhne | Söhne Mono | 単一ファミリーを使用するテクノロジーネイティブブランド | タイトなシステム、低コスト |

| 10 | Inter | Inter | 純粋なUIシステム、ダッシュボード、開発ツール | 単一ファミリーによる管理 |

| 11 | Migra | Inter | モダンなエディトリアルデザイン、優れたUI | ディスプレイ重視、アプリ対応 |

| 12 | Tobias | General Sans | ラグジュアリーブランド、ファッション、ホスピタリティ | エレガント、抑制されたデザイン |

これらのうちいくつか（9と10）は厳密にはペアリングではなく、複数のウェイトを持つ単一ファミリーシステムです。これは意図的なものです。5つのウェイトとモノカットを備えた、よく構築された単一ファミリーは、無理やり2つのフォントを組み合わせるよりも、より規律のある選択です。「フォントは1つだけ」という考えにパニックになるデザイナーは、たいてい弱い階層構造を隠すためにコントラストに頼っています。

ほとんどのペアリングが失敗する理由

6つの失敗パターンが、他の何よりも多くのペアリングを失敗に導きます。ペアリングがうまくいかない場合、ほぼ間違いなくこれらのいずれかが原因です。

2つのディスプレイフォント。 同じシステム内で、注目を集める2つの書体が、同じ役割を奪い合っている。どちらか一方が必ず負け、負けた方はまるでタイプミスのように見えてしまいます。ディスプレイフォントには実用的なフォントを組み合わせ、ディスプレイフォント同士を組み合わせてはいけません。

ほぼ同じサンセリフ体の組み合わせ。 InterとManrope、あるいはDM SansとSatoshiの組み合わせ。構造が似すぎているためコントラストが失われ、まるでどちらかを選べなかったかのような印象を与えます。どちらのフォントも同じ役割を果たせるのであれば、それは組み合わせではなく、競合です。

流行と流行に左右されないフォントの衝突。 2026年のウェッジセリフと1990年代のヒューマニストサンセリフの組み合わせ。時代が合わず、不協和音を奏でます。異なる時代のフォントを組み合わせる場合は、意図的に行うか、全く組み合わせないようにしましょう。

本文フォントを見出しフォントとして使う。 本文フォントは、72pxの小さなサイズで長時間読み続けることを想定して設計されており、72pxでインパクトを与えることを想定していません。96pxのInterはダッシュボードでは問題ありませんが、ランディングページでは見づらいです。サイズに合った適切なツールを使用しましょう。

中間の太さがない。 見出しと本文が太字で、中間の太さがない組み合わせだと、UI要素全体が二元的に見えてしまいます。実際のシステムでは、サブヘッド、ボタン、強調表示などを太字にせずに表現するために、中間の太さが必要です。

ブランド戦略よりも先に組み合わせを選ぶ。 これは致命的な間違いです。ムードボードで気に入った組み合わせに惚れ込んで、それに合わせてブランドを後付けしようとするのは間違いです。タイポグラフィはブランドが決定します。常に。順番が重要です。

30分で組み合わせを選ぶ方法

決定に1週間もかける必要はありません。実際のワークフローは以下のとおりです。

1. ブランドブリーフを1文で記述する。 このブランドは何を、誰に、そしてどこで最も多く使用されるのか。

2. まず見出しのフォントを選ぶ。 見出しには個性があります。自分の好みではなく、ブリーフに反して選びましょう。

3. 構造的に対照的でありながら、プロポーションが調和する本文のフォントを選ぶ。 ルール1を参考にしてください。

4. ルール2～5に照らして検証する。 役割ごとに1つのボイスを使用する。3つのコンテキストでテストする。ライセンスと重みを確認する。トレンドではなく、ブランドイメージに照らし合わせてペアリングする。

5. 1ページの仕様書を作成する。 見出し、3つの小見出し、本文1段落、ボタン、ラベルを記載する。仕様書がデスクトップとモバイルの両方で正しく表示されるようであれば、ペアリングは完了です。

6. 一晩寝かせる。 24時間後も違和感のないペアリングは、たいてい正しい。翌朝違和感を感じるペアリングは、たいてい真実を語っている。

ムードボード作成ではなく、実際のブランドのために実際のチームによる運用をご希望の場合は、Brainy を雇用するをご覧ください。当社は、完全なタイポグラフィシステムを備えたブランドおよび製品UIを提供しています。

AI支援デザインにおけるフォントペアリング

2026年には、より多くのデザイナーがAI画像生成、AI UI生成（v0、Lovable、Subframeなど）、そしてFigma MCP主導のワークフローを用いてレイアウトを作成するようになるでしょう。こうした状況下では、フォントペアリングの重要性は以前よりも高まります。

AIツールは、プロンプトに指定されたフォント、あるいはデザインシステムから入力されたフォントをデフォルトとして使用します。システムに既に明確な2種類のフォントペアリングが定義されていれば、AIの出力はブランドイメージに沿ったものになります。しかし、システムが不適切であれば、AIの出力も同様に不適切になり、しかも高速かつ大規模に生成されます。設計者向け迅速エンジニアリングの解説では、これらのツールでブランドイメージに沿った出力を生成する方法について説明していますが、タイポグラフィのペアリングはそのプロンプトにおける重要な要素の一つです。

教訓：強力なシステムにおける強力なペアリングは、AIツールによるブランドイメージの向上を強力に促進します。一方、弱いペアリングは、AIツールによるブランドイメージの不整合を増幅させてしまいます。

---

よくある質問

初心者にとって最も簡単なフォントの組み合わせは？

InterとSource Serifの組み合わせです。どちらも無料で、優れた設計で、可変フォーマットに対応しており、SaaSのUIから長文の編集記事まで、ほぼあらゆる場面で活躍します。ルール1をきちんと満たし、ファイルサイズも小さく、どんなデザインシステムにも違和感なく溶け込みます。

プロフェッショナルに見えるGoogle Fontsの組み合わせ方は？

ウェイトレンジが豊富で、実運用で実績のあるフォントを選びましょう。DM SansとLora、InterとSource Serif、ManropeとFraunces、Space GroteskとIBM Plex Serifは、最初から意図的な組み合わせに見える4つの例です。Robotoを流行のフォントと組み合わせるのは避けましょう。流行のフォントが安っぽく見えてしまう可能性があります。

サンセリフフォントを2つ一緒に使うことはできますか？

はい、構造が対照的であれば可能です。幾何学的なサンセリフ体（Inter、Satoshiなど）とヒューマニストサンセリフ体（DM Sans、Söhneなど）の組み合わせは、特に編集やコンテンツ系のブランドにおいて効果的です。注意すべき点は、似すぎているサンセリフ体を選んでしまうことです。どちらのフォントも同じ役割を果たせる場合、組み合わせは失敗に終わります。

ブランドはいくつのフォントを使うべきでしょうか？

ほとんどのブランドにとって、2つが適切な答えです。最大でも3つです。1つでも十分であり、特に強力な可変フォントを使用する場合は、その価値は過小評価されていると言えるでしょう。4つ目のフォントを追加したくなるのは、既存のフォントがうまく活用されていない兆候であることが多く、ブランドにフォントがもっと必要だという意味ではありません。

フォントの組み合わせとタイプシステムの違いは何ですか？

フォントの組み合わせとは、どのフォントがどのような役割を果たすかを選択することです。タイプシステムとは、フォントサイズ、ウェイト、行間、間隔、レスポンシブデザインなど、フォントに関する一連のルールをまとめたものです。組み合わせは、システム内の決定事項の一つです。 タイポグラフィシステムデザインの記事で残りの部分を解説しています。

ペアリングがうまく機能しているかどうかはどうすればわかりますか？

3つのテストを実施してください。目を細めて見るテスト：画面をぼかしても、階層構造がきちんと読み取れるか。役割テスト：各フォントに明確な役割があるか。ブランドテスト：文字を読む前に、フォントを見ただけでブランドイメージが伝わるか。これら3つのテストすべてに合格すれば、ペアリングは成功です。

ペアリングを決定し、システムをリリースする

フォントのペアリングは、デザインにおいて最も難しい決定ではありません。最も先延ばしにされがちな決定です。デザイナーは、Figmaボードにサンプルを何週間も並べますが、それは決定が最終的なもののように感じられるからです。しかし、そうではありません。ペアリングはリリースまでは変更可能で、リリース後も部分的に変更可能です。そして、今日、十分なペアリングを選択するコストは、1か月間何も選択しないコストよりも常に低くなります。

5つのルールを活用し、12種類のペアリングから選択してください。 30分ワークフローを実行します。同じ週内に、フォントペアリングに合わせてシステムを出荷します。

生き残るペアリングとは、存在を意識させないペアリングです。読者はフォントについて考えることはありません。ブランド、製品、メッセージ、オファーについて考えます。それが目標です。自己主張するフォントは、間違った役割を果たしています。明瞭さの中に溶け込むフォントは、正しい役割を果たしています。

ブランド、タイポグラフィシステム、製品UIを3つのプロジェクトではなく、1つのプロジェクトとして扱うチームをお探しなら、Brainy を雇用するをご覧ください。私たちは、他のブランド要素と同様に、フォントも組み合わせます。ムードボードではなく、ブリーフに基づいて組み合わせます。