セリフ + サンセリフのコントラスト — タイポグラフィペアリングの原則

セリフ + サンセリフコントラストの原則

最も信頼性の高いフォントペアリングテクニックは、セリフフォントとサンセリフフォントを組み合わせることです。これにより、読者が一目で見出しと本文テキストを区別できる自然な視覚的コントラストが生まれます。

コントラストが重要な理由

タイポグラフィには2つの目的があります：注目を引く（見出し）と読みやすさを維持する（本文テキスト）。同じフォントスタイルを両方に使用すると、サイズとウェイトの違いだけに頼ることになり、単調に感じることがあります。

セリフ見出し + サンセリフ本文

伝統的なアプローチでは、華やかなセリフ見出しで視覚的アンカーを作り、クリーンなサンセリフ本文テキストで画面での読みやすさを確保します：

h1 { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Lato', system-ui, sans-serif; }

サンセリフ見出し + セリフ本文

逆パターンも同様にうまく機能します。特にセリフの本文テキストが長文の読みやすさを向上させるブログやエディトリアルコンテンツに適しています：

h1 { font-family: 'Inter', system-ui, sans-serif; }
body { font-family: 'Merriweather', Georgia, serif; }

xハイトの一致

セリフ/サンセリフペアをうまく機能させる鍵は、xハイト（小文字の高さ）の一致です。xハイトが類似しているフォントは、スタイルが大きく異なっていても視覚的な調和を生み出します。

よくある落とし穴

類似しすぎるフォント（例：2つの幾何学的サンセリフ）や異なりすぎるフォント（例：重いスラブセリフと繊細なスクリプト）のペアリングは避けてください。目標は衝突のないコントラストです。