フォントペアリングとは?書体の組み合わせ方のコツを初心者向けに解説

フォントペアリングの基本

まずはフォントペアリングの意味と、書体を組み合わせるときに押さえたい3つの考え方を見ていきましょう。

フォントペアリングとは何か

フォントペアリングとは、1つのデザインの中で2つ以上の書体を組み合わせて使うこと、またはその組み合わせ方を考えることです。

ここでいう「書体」とは、明朝体やゴシック体のような文字の形のデザインの系統のことで、それをパソコンやスマートフォンで使えるデータにしたものが「フォント」です(違いはフォントと書体の種類で解説しています)。

ペアリング(pairing)は英語で「2つを組にすること」という意味で、料理とワインの相性を考えるのと同じように、書体どうしの相性を考える作業だとイメージすると分かりやすいです。

1つの書体を選ぶ手順は見やすいフォントの選び方で紹介しているので、この記事では「選んだ書体をどう組み合わせるか」に絞って解説します。

組み合わせの基本は「役割で分ける」

書体を組み合わせるときは、それぞれの書体に違う役割を持たせるのが基本です。

役割がはっきりしていれば、読む人は書体の違いを「ここからは見出し」「ここは本文」という合図として受け取れるからです。

反対に、役割を決めずに気分で書体を変えると、読む人にはその違いが何を意味するのか分からず、まとまりのない印象になります。

よく使われる役割の分け方には、次のようなものがあります。

• 見出し用と本文用:見出しには目に留まる書体、本文には長く読んでも疲れにくい書体を使う
• ディスプレイ書体と本文書体:ディスプレイ書体とは、見出しやポスターのタイトルのように、大きく表示して目を引くことを想定して作られた書体のことです(画面の「ディスプレイ」とは関係ありません)。
  タイトルやキャッチコピーだけを個性の強い書体にし、それ以外は癖の少ない書体にする(ディスプレイ書体はディスプレイ書体とはで解説しています)
• 和文用と欧文用:日本語は和文書体、英単語や数字は欧文書体にする(和文と欧文の組み合わせの基本は見やすいフォントの選び方、Webでの設定は日本語Webフォントとはで解説しています)

どの分け方でも、「この書体はここで使う」と役割を1つに決めておくことが、ペアリングの出発点になります。

「似すぎず、違いすぎず」を目指す

組み合わせる書体どうしは、違いがはっきり分かる一方で、どこかに共通点がある状態が理想です。

違いが小さすぎると、わざと変えたのではなく間違えたように見え、違いが大きすぎると、別々のデザインを貼り合わせたように見えてしまうからです。

この「はっきりした違い」をデザインでは「コントラスト(対比)」と呼び、共通点があることで生まれるまとまりを「調和」と呼びます。

同じ文章を、3通りの組み合わせで比べてみましょう。

※書体や太さの表示は、お使いの端末に入っているフォントによって変わります。丸ゴシック体が入っていない環境では、見本Aの見出しは本文と同じゴシック体で表示されます。

見本Aは、丸ゴシック体と角ゴシック体という近い書体どうしなので、よく見ないと違いが分からず、「なぜここだけ書体が違うのか」と引っかかる組み合わせです。

丸ゴシック体と角ゴシック体は、角が丸いかどうかは違っても、どちらも線の太さがほぼ均一なゴシック体の仲間で、文字の骨格が近いからです。

そのため読む人には、わざと変えたというより、書体をそろえ忘れたように見えてしまいます。

書体を変えるなら、見本Cの明朝体とゴシック体のように、線に強弱があるか・ないかといった、ひと目で分かる違いのある組み合わせを選びましょう。

見本Bは、違いははっきりしていますが、太さも雰囲気も正反対で、見出しと本文が同じお店のものに見えません。

見本Cは、明朝体とゴシック体で形の違いをつけながら、どちらも標準的な形の書体を選んでいるので、メリハリとまとまりが両立しています。

共通点を探すときは、次のような点を見比べると判断しやすくなります。

見比べる点	どういうことか
雰囲気	上品・元気・やさしいなど、受ける印象の方向が同じか
形の素直さ	どちらも標準的な形か、片方だけ極端に崩した形になっていないか
文字の大きさの見え方	同じサイズに設定したとき、片方だけ極端に小さく、または大きく見えないか
線の太さ	本文どうし、見出しどうしで並べたときに、太さの差が不自然でないか

「文字の大きさの見え方」が書体によって変わるのは、同じサイズに設定しても、文字が実際に描かれている部分の大きさ(和文では「字面(じづら)」と呼びます)が書体ごとに違うためです。

書体の文字はどれも、同じ大きさの四角い枠の中にデザインされていますが、枠いっぱいに大きく描かれた書体もあれば、枠の中に小さめに描かれた書体もあります。

そのため、同じサイズに設定して並べても、片方だけが小さく見えたり大きく見えたりするのです。

書体ごとの印象の違いは書体による印象の違いで、見本と一緒に紹介しています。

書体の数は2〜3種類までが目安

1つのデザインで組み合わせる書体は、2〜3種類までにとどめるのが目安です。

書体が1つ増えるたびに、ほかのすべての書体との相性を考える必要があり、組み合わせの難しさが一気に上がるからです。

たとえば2種類なら相性を見る組は1組だけですが、3種類なら3組、4種類なら6組に増えます。

多くのデザインは、「見出し用」と「本文用」の2種類に、必要なら英数字用の欧文書体を加えた3種類で十分に表情を作れます。

同じファミリーのウェイト違いで済ませる手もある

別の書体を組み合わせなくても、同じファミリーの中で太さを変えるだけで、見出しと本文の役割を分けることができます。

ファミリーとは、同じデザインの書体を、細い・普通・太いといった太さ(ウェイト)や、幅、傾きを変えてそろえたグループのことです(詳しくは書体のバリエーションとはで解説しています)。

同じファミリーなら、もともと同じ考え方で作られているので、相性が悪くなる心配がほとんどありません。

見本Dは書体を1種類しか使っていませんが、太さと大きさの差だけで、見出しと本文の区別がはっきりついています。

組み合わせに自信がないうちは、まずこの方法で作り、物足りないと感じたときにだけ別の書体を足すと失敗しにくくなります(太さの使い分けはウェイトによるメリハリで解説しています)。

さらに、セリフ体・サンセリフ体・等幅(すべての文字が同じ幅の書体)などを、同じ骨格でそろえて作った「スーパーファミリー」と呼ばれる書体群もあります。

セリフ体は英字の線の端に小さな飾り(ヒゲのような突起)がある書体、サンセリフ体はその飾りがない書体で、和文でいえばそれぞれ明朝体とゴシック体に近い仲間です(「サン(sans)」はフランス語で「〜がない」という意味です)。

スーパーファミリーは、いわば骨格をそろえて作られた「親戚の書体セット」で、種類の違う書体どうしでも形の基本が共通しているので、組み合わせてもちぐはぐになりにくいのが特長です。

Google Fontsの解説でも、同じファミリーやスーパーファミリーの中で組み合わせると、どの書体にも共通した一貫性が生まれる点が利点として紹介されています(Google Fonts Knowledge「Pairing typefaces within a family & superfamily」(英語))。

たとえばIBMが公開している「IBM Plex」には、Sans(サンセリフ体)・Serif(セリフ体)・Mono(等幅)がそろっていて、組み合わせても自然になじみます(IBM Plex(英語))。

フォントペアリングの型と実践

ここからは、よく使われる組み合わせの型と、バナーでの使い方、実際のデザインを分析するときの見方を紹介します。

定番の組み合わせの型

初心者のうちは、ゼロから組み合わせを考えるより、よく使われている定番の型から選ぶのが近道です。

定番の型は、多くのデザインで使われてきた中で「似すぎず、違いすぎず」のバランスが取れていることが確かめられているからです。

組み合わせの型	違い(コントラスト)	共通点(調和)	向いている場面
見出し明朝体×本文ゴシック体	線の強弱の有無	どちらも標準的な形	上品さを出しつつ、本文は画面で読みやすくしたいWebサイト
見出しゴシック体×本文明朝体	線の強弱の有無	どちらも標準的な形	本や雑誌のように、見出しをはっきり見せて本文をじっくり読ませたいもの
セリフ体×サンセリフ体	線の端の飾り(セリフ)の有無	文字の大きさの見え方や雰囲気が近いものを選ぶ	英語の見出しやロゴを含むデザイン
同じファミリーのウェイト違い	太さ	形のデザインそのもの	迷ったとき、シンプルにまとめたいとき
ディスプレイ書体×本文書体	個性の強さ	伝えたい雰囲気	タイトルやキャッチコピーで強い印象を出したいとき
和文書体×欧文書体	収録している文字(日本語と英数字)	明朝体ならセリフ体、ゴシック体ならサンセリフ体のように系統をそろえる	英単語や数字が多い文章

和文の明朝体と欧文のセリフ体、和文のゴシック体と欧文のサンセリフ体は、それぞれ線の端に飾りがあるか・ないかという点で近い仲間です(明朝体とゴシック体の違い・セリフ体とサンセリフ体の違い)。

表のうち3つの型を、見本で比べてみましょう。

※書体の表示は、お使いの端末に入っているフォントによって変わります。

見本Eは、見出しの明朝体が上品さを出し、本文のゴシック体が画面でもくっきり読めるので、Webサイトでよく見かける組み合わせです。

見本Fは、見出しを太いゴシック体ではっきり目立たせ、本文の明朝体で落ち着いて読ませる、本や雑誌に近い雰囲気になります。

見本Gは、見本Eと同じ考え方を欧文で行ったもので、見出しのセリフ体が品のある印象を、本文のサンセリフ体がすっきりした読みやすさを担当しています。

なお、明朝体は横線が細いため、画面で小さな文字にすると線がかすれて見えることがあるので、本文に使うときはスマートフォンでも読みやすいか確認しましょう。

バナーで書体を組み合わせる

バナーのように小さな面積に情報を詰め込むデザインでは、「一番伝えたい言葉」だけに特別な書体を使い、それ以外は1種類にそろえるのがコツです。

バナーは一瞬で見られて判断されるものなので、書体が多いと、どこから読めばよいかが分からないまま通り過ぎられてしまうからです。

同じ内容のバナーを、書体の数を変えて比べてみましょう。

※書体の表示は、お使いの端末に入っているフォントによって変わります。

NGのバナーは、行ごとに書体が変わっているため、タイトル・割引率・日付のどれもが同じくらい主張し、視線が落ち着く場所がありません。

OKのバナーは、主役のタイトルだけを明朝体にし、割引率の数字は欧文書体で引き締め、それ以外をゴシック体にそろえているので、タイトルから割引率、ボタンへと自然に目が流れます。

数字だけ書体を変えるには、デザインツールで数字の部分だけを選んで、欧文書体に切り替えます。

日本語の書体にも数字は入っていますが、欧文書体の数字に変えると形や太さを選べるので、価格や割引率を引き締めて見せやすくなります(数字の書体の選び方は数字・記号の扱いで解説しています)。

すべての数字を変える必要はないので、慣れないうちは「20%OFF」のような一番目立たせたい数字だけで試してみましょう。

バナーで書体を組み合わせるときは、次の順番で考えると迷いにくくなります。

1. バナーの中で一番伝えたい言葉(キャッチコピーやタイトル)を1つ決める。
2. 説明・日付・ボタンなど、それ以外の文字に使う読みやすい書体を1種類決める。
3. 一番伝えたい言葉にだけ、雰囲気に合う別の書体を使う。
4. 価格や割引率など英数字が目立つ場所があれば、必要に応じて欧文書体を加える(ここまでで3種類)。

キャッチコピーの見せ方はキャッチコピーの見せ方、ボタンの文字の見せ方はCTAの見せ方で詳しく解説しています。

デザインを分析するときは「何と何を組み合わせているか」を見る

フォントペアリングの感覚を身につけるには、実際のデザインで「どの書体とどの書体を、どの役割で組み合わせているか」を読み解く練習が効果的です。

上手なデザインの組み合わせを分解すると、自分で組み合わせるときにそのまま使える「型」が手に入るからです。

気になったWebサイトやバナーを見つけたら、次の4つの点をメモしてみましょう。

• 書体の数:何種類の書体が使われているか。
  太さだけ違う同じ書体は1種類として数えます。
• 役割:それぞれの書体が、見出し・本文・数字・ボタンなど、どこに使われているか。
• 違い:書体どうしで何が違うか。
  明朝体とゴシック体、セリフの有無、太さ、個性の強さなどです。
• 共通点:違う書体なのにまとまって見えるのは、どこが共通しているからか。
  雰囲気、形の素直さ、文字の大きさの見え方などに注目します。

書体の正確な名前が分からなくても、「見出しは明朝体、本文はゴシック体、数字だけサンセリフ体」のように系統が分かれば、分析としては十分です(書体の名前を調べたいときはフォントを調べる方法で紹介しています)。

書体以外の観点も含めた分析と模写の進め方は文字の分析・模写とはで、ふだんから文字を観察するコツはタイポグラフィの観察方法で紹介しています。

実践のポイント

書体を組み合わせるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 形の近い書体どうしを組み合わせて、違いが伝わらないことがあります。
  書体を変えるなら、ひと目で違いが分かる組み合わせにするか、同じ書体の太さ違いで済ませましょう。
• 個性の強い書体どうしを組み合わせて、主役がぶつかってしまうことがあります。
  個性の強い書体は1つだけにし、組み合わせる相手は癖の少ない書体にしましょう。
• 強調したい場所ごとに新しい書体を足して、気づけば4種類以上になっていることがあります。
  強調は太さ・大きさ・色でもできるので、書体を足す前にほかの方法で差をつけられないか考えましょう。
• 同じ役割の文字に、ページや場所によって違う書体を使ってしまうことがあります。
  「見出しはこの書体」と決めたら、すべての見出しで同じ書体を使い続けましょう。
• 新しく組み合わせた書体の利用条件を確認し忘れることがあります。
  書体を足すときは、商用利用やWebでの使用が許可されているかを、必ず配布元の規約で確認しましょう(フォントライセンスとは)。

よくある質問

• Q. 書体は必ず2種類以上組み合わせないといけない?
  A. いいえ、1種類だけでも問題ありません。
  同じ書体の太さと大きさを変えるだけでも、見出しと本文の区別は十分につけられます(サイズや太さで見え方がどう変わるかは文字のサイズ・太さ・間隔とはで紹介しています)。
  書体を組み合わせるのは、1種類では出せない雰囲気や強弱が欲しいときの選択肢と考えましょう。
• Q. 明朝体とゴシック体はどちらを見出しにすればいい?
  A. どちらが正解ということはなく、伝えたい雰囲気で決めます。
  上品さや落ち着きを出したいなら見出しを明朝体に、力強さやはっきりした印象を出したいなら見出しをゴシック体にするのが一つの目安です。
• Q. 相性のよい組み合わせが分からないときはどうすればいい?
  A. まずは同じファミリーの太さ違いや、見出し明朝体×本文ゴシック体のような定番の型から始めるのがおすすめです。
  そのうえで、好きなデザインが何と何を組み合わせているかを分析し、使える型を少しずつ増やしていきましょう。

まとめ

フォントペアリングとは、1つのデザインの中で2つ以上の書体を組み合わせることで、見出し用と本文用のように役割で分け、「似すぎず、違いすぎず」のバランスを取るのが基本です。

書体の数は2〜3種類までにとどめ、迷ったら同じファミリーの太さ違いや、明朝体×ゴシック体のような定番の型から始めると失敗しにくくなります。

まずは今日見かけたバナーを1枚選び、「何種類の書体を、どの役割で組み合わせているか」をメモしてみてください。