フォントペアリング入門：Webで使える12の組み合わせ

フォントペアリングの4つの基本ルール

組み合わせは明確な階層を作りながら、別々のブランドを混ぜたように見せないことが大切です。表情のあるセリフ体を見出しに、落ち着いたサンセリフ体を本文に使うと役割が伝わります。

最初に見出し、長文、UI、フォールバックという役割を決めると、書体のコレクションではなく実用的なシステムになります。

• カテゴリ、太さ、幅、個性の一部で対比を作り、すべてを同時に変えない。
• xハイト、字幅、ストローク、数字、句読点を比較する。
• 例外を増やす前に見出し用と本文用を固定する。
• 実際の段落、モバイル、太字、斜体、必要な言語で確認する。

最初に試したい12のフォントペア

以下は出発点です。ブランド、ウェイト、表示速度、文字セットを確認して決定してください。

5ステップで選ぶ方法

流行の一覧をコピーするより、再現できる手順を持つ方が確実です。

1. コンテンツとブランドを表す形容詞を3つ決める。
2. 個性の強い見出しか読みやすい本文か、難しい役割から選ぶ。
3. 同じ見かけのサイズでxハイト、曲線、数字、太字を比較する。
4. 見出し、段落、ボタン、ラベル、データ行を含むスケールを作る。
5. PC、モバイル、低速読み込み、フォールバック、多言語でテストする。

Webサイトに最適なフォントの組み合わせ

Webではモバイル改行、必要ウェイトの不足、ダウンロード容量が問題になります。本文は16〜18px程度と十分な行間を基準にします。

使用するスタイルだけを読み込み、適切なフォールバックを設定し、両方のファミリーが同じ文字体系をカバーするか確認します。

よくある失敗

相性の良いフォントを探すツール

一つの書体が分かっていて近い候補を探すなら、 フォントマッチャー. 画像から始めるなら、まず 画像からGoogle Fontsを探すガイド.

よくある質問