CodeKitHubこのツールとは？
フォントペアリングとは、1つのページで一緒に使う2つ（時には3つ）の書体を選ぶことです。通常は見出し用と本文用の2つで、視覚的な階層を作りながら、不釣り合いや単調さを避けます。
以下の各組み合わせでは、ライブレンダリングされたサンプルが表示されます。上に見出しフォント、下に本文フォントがあり、実際のGoogle Fontsのファイルを使用しているため、見たままがサイトでの表示結果になります。
各組み合わせには、すぐに使えるGoogle Fontsの`<link>`埋め込みタグと、見出し・本文用の`font-family`宣言を含む対応するCSSスニペットが付属しています。両方をコピーすれば完了です。
なぜこれを使うのか？
- 自動生成のリストではなく、28種類の厳選された組み合わせ。それぞれ2つの書体が本当に補完し合うことを理由に選ばれています。
- ライブプレビュー：各組み合わせは静的画像やフォント名からの推測ではなく、Google Fontsから読み込んだ実際のフォントでレンダリングされます。
- モダン、エレガント、大胆、ミニマル、クラシックのムードで絞り込んで、プロジェクトに合う雰囲気を素早く見つけられます。
- `<link>`埋め込みタグとCSSの`font-family`ルールをワンクリックでコピー。
- 無料、ブラウザ内で動作、アカウント登録やログイン不要。
使い方
- 必要に応じてムードフィルター（モダン、エレガント、大胆、ミニマル、クラシック）をクリックして絞り込むか、「すべて」を選択したまま全体を閲覧します。
- ライブプレビューカードを確認します。上の行が見出しフォント、下の行が本文フォントです。
- 気に入った組み合わせを開き、クリックして埋め込みコードのセクションを展開します。
- `<link>`タグをHTMLの`<head>`にコピーし、CSSスニペットをスタイルシートにコピーして、見出しと本文にフォントを適用します。
例
入力
エレガントなブログ出力
Playfair Display（見出し）+ Source Sans Pro（本文）「エレガント」で絞り込むと、コントラストの強いセリフ体の見出しと、読みやすくすっきりしたサンセリフ体の本文の組み合わせが表示されます。編集系レイアウトやブログでよく使われる組み合わせです。
良いフォントペアリングの原則
- 類似よりコントラスト：ほぼ同じに見える2つのフォント（似たような幾何学的サンセリフ2つなど）は、意図的な選択というよりミスのように見えがちです。セリフ体とサンセリフ体を組み合わせたり、太い見出し用フォントと軽い本文用フォントを組み合わせたりすることで、違いが意図的なものとして読み取れるようになります。
- x-ハイトと比率を合わせる：小文字の視覚的な高さが近いフォント同士は、スタイルが異なっていても同じページに属しているように感じられます。x-ハイトの不一致は、組み合わせが「なんだかしっくりこない」と感じる最も一般的な原因の1つです。
- 2つの書体ファミリー（時には3つ）に絞る：見出し用に1つ、本文用に1つ、そして多くてもボタンやラベルなどのアクセント用にもう1つ。それ以上になると、ページが計画性のない印象になり始めます。
- 形だけでなく雰囲気も考慮する：丸みを帯びた親しみやすいサンセリフとフォーマルなセリフ体の組み合わせは、字形として技術的には合っていても、矛盾した印象を与えます。構造だけでなくトーンも一致するフォントを選びましょう。
- 実際のサイズでテストする：大きなプレビューでは素晴らしく見える組み合わせも、本文サイズではコントラストが失われることがあります。逆に見出し用フォントが小さいサイズでは読みにくくなることもあります。常に両方の極端なサイズを確認しましょう。
用途別の組み合わせの選び方
ランディングページやマーケティングサイトには、通常「大胆」または「モダン」フィルターが効果的です。強くコントラストの効いた見出しフォントがファーストビューで注目を集め、すっきりとしたニュートラルな本文フォントで長文もスキャンしやすくなります。
ブログや編集コンテンツは「エレガント」または「クラシック」の組み合わせが最も読みやすいことが多いです。洗練されたセリフ体の見出しは考え抜かれた編集者の声を印象づけ、心地よいセリフ体またはサンセリフ体の本文が長い記事を長時間の読書でも読みやすく保ちます。
ECサイトや商品サイトは「ミニマル」な組み合わせを好む傾向があります。控えめでニュートラルなフォントは、タイポグラフィそのものではなく商品写真や価格に焦点を当て続けます。1ページに何十もの商品カードが並ぶ場合に特に重要です。
ポートフォリオやクリエイティブサイトは実験の余地が最も大きい領域です。個性の強い「大胆」または「エレガント」な組み合わせがうまく機能することが多いのは、訪問者が視覚的なセンスを評価しに来ているという側面もあるためです。
パフォーマンスとライセンスに関する補足
埋め込みの`<link>`タグはGoogleのCDNからフォントを読み込みます。これは高速で、訪問者がすでに訪れたことのある多くのサイトでキャッシュされている可能性が高いですが、外部リクエストが追加されることには変わりありません。1ミリ秒単位で速度が重要なサイトでは、フォントファイルをダウンロードして自前でホスティングし（`font-display: swap`を手動で設定）、この外部依存を取り除くことも検討する価値があります。その分、設定の手間は増えます。
Google Fontsのすべてのフォントはオープンソースで、帰属表示なしで商用利用が無料です。とはいえ、簡単にできる場合は書体デザイナーへのクレジット表示も良い心遣いです。
よくある質問
2つのフォントが「よく合う」とはどういうことですか？
良い組み合わせはコントラストと調和のバランスを取っています。コントラスト（セリフ体とサンセリフ体の組み合わせ、太い見出し用フォントと控えめな本文用フォントの組み合わせなど）は視覚的な階層を作り、見出しと本文をはっきり区別します。調和（近いx-ハイト、同程度の線の太さ、フォーマルさや軽快さといった雰囲気の一致）は両者がぶつかり合うのを防ぎます。ここに掲載されている組み合わせは両方を考慮して選ばれています。
見出しと本文は常に異なるフォントを使うべきですか？
いいえ。このツールの「Rubik + Rubik」のように、同じ書体ファミリーを両方に使うのも良い選択です。フォントに見出しと本文を区別できるだけのウェイトのバリエーションがあれば問題ありません。これはミスではなく、ミニマルで有効な選択です。
組み合わせを自分のサイトに実際に適用するにはどうすればいいですか？
`<link>`埋め込みタグをページの`<head>`にコピーしてGoogleのCDNからフォントを読み込み、次にCSSスニペットをスタイルシートにコピーします。見出し（h1、h2、h3）と本文（body、p）の`font-family`が設定されます。マークアップが異なる場合はCSSセレクタを調整してください。
Google Fontsを読み込むとサイトが遅くなりますか？
フォントファイルを追加するたびにネットワークリクエストが増え、レンダリングをブロックするリスクも多少生じます。見出し用は1ウェイト、本文用は1〜2ウェイトに抑え、`display=swap`（埋め込みコードにすでに含まれています）を使ってウェブフォント読み込み中は代替フォントでテキストを表示するようにしましょう。最速の読み込みが必要な本番サイトでは、フォントファイルを自前でホスティングすることも検討してください。
これらのフォントは商用利用が無料ですか？
はい。ここに掲載されているすべての組み合わせを含め、Google FontsのすべてのフォントはSIL Open Font LicenseまたはApache Licenseの下で提供されており、どちらもロイヤリティなしでの商用利用、改変、再配布を許可しています。