フォントペアラー

Web サイトに美しいフォントの組み合わせを。Google Font の組み合わせをライブプレビューし、CSS コードを即取得。無料のオンラインフォントペアリングツール。

主な機能

人気の Google Fonts の組み合わせを閲覧
見出しと本文のライブプレビュー
ワンクリックで CSS コードをコピー
プロ向けのおすすめペアリング

Guide

フォントペアリングとは、デザインの中で一緒に機能する2つ以上の書体を選ぶ実践です。目標は視覚的な調和です：見出し、本文、キャプション、UI 要素が、ランダムな選択ではなく同じシステムの一部のように感じられるべきです。まずいフォントペアリングは摩擦を作ります。良いフォントペアリングは目立ちません。読者はタイポグラフィに気づくことなくコンテンツを吸収し、それこそが狙いです。本ガイドでは、効果的なフォントペアリングの背後にある原則、組合せを見つける実用的な方法、Web 実装の技術的考慮事項を取り上げます。すべての書体は視覚的な個性を持ちます。Futura のような幾何学的サンセリフはモダニズムと精密さを伝えます。Garamond のようなヒューマニストセリフは伝統と優雅さを示唆します。Rockwell のようなスラブセリフは頑健で工業的に感じられます。Pacifico のような手書きスクリプトはカジュアルで遊び心があります。フォントをペアにするとき、これらの個性を組み合わせています。その組合せはプロジェクトにとって意味をなす必要があります。Pacifico を見出しに、Comic Sans を本文に使う法律事務所のウェブサイトは、技術的な実行に関わらず間違った信号を送ります。すべてのペアリングの決定を、伝えたいトーンの定義から始めましょう：プロフェッショナル、フレンドリー、権威、クリエイティブ、ミニマル、ラグジュアリー、テクニカル、またはプレイフル。最も信頼できるペアリング戦略は、互換性を伴うコントラストです。視覚的階層を作るのに十分異なり、まとまりを感じるのに十分な構造的 DNA を共有するフォントが欲しいです。同じ分類の2つのフォント（例えば2つの幾何学的サンセリフ）をペアにすると、コントラストが不十分なためフラットな結果を生むことがよくあります。異なる分類のフォント（サンセリフの本文にセリフの見出しなど）をペアにすると自然なコントラストが生まれます。鍵は正しい度合いの違いを見つけることです。似すぎると冗長に感じます。違いすぎると混沌に感じます。構造的な互換性は、共有するプロポーションと x-height から来ます。x-height は、大文字に対する x、a、e、o のような小文字の高さです。似た x-height を持つフォントは、スタイルが異なっても近くに配置するとバランスが取れて見えます。見出しフォントの x-height が高いのに本文フォントが低いと、見出しと段落のサイズ関係は、ポイントサイズが正しくてもずれて感じられます。ペアリングを評価するとき、両方のフォントを同じサイズで設定し、小文字を横並びで比較しましょう。Inter と Merriweather は異なる分類にもかかわらず似た x-height を持ち、これが一緒にうまく機能する理由の一つです。セリフ＋サンセリフは古典的なペアリングの公式で、コントラストが組み込まれているため機能します。セリフ（字形の端の小さなストローク）とその不在は明確な視覚的区別を作ります。この広いカテゴリー内で、多くの選択肢があります。ハイコントラストのトランジショナルセリフ（Playfair Display など）とニュートラルなサンセリフ（Source Sans Pro など）のペアは、優雅でエディトリアルな外観を作ります。頑健なスラブセリフ（Roboto Slab など）とそのサンセリフの兄弟（Roboto）のペアは、モダンでまとまりのあるシステムを作ります。カリグラフィックセリフ（Cormorant Garamond など）と幾何学的サンセリフ（Montserrat など）のペアは、有機的と機械的な形の間の緊張を作り、ファッション、アート、ライフスタイルの文脈で非常に効果的になり得ます。スーパーファミリーペアリングは初心者にとって最も安全なアプローチです。スーパーファミリーは、同じ骨格構造を共有するセリフとサンセリフの両方のバージョンで設計された書体ファミリーです。例には Roboto と Roboto Slab、Noto Sans と Noto Serif、Source Sans Pro と Source Serif Pro、PT Sans と PT Serif、IBM Plex Sans と IBM Plex Serif があります。これらのペアは、1人のデザイナーが仲間として作ったため、一緒に機能することが保証されています。トレードオフは、スーパーファミリーのペアが予測可能に感じられ得ることです。無関係の書体を組み合わせることから来るエネルギーに欠けます。ウェイトのコントラストはスタイルのコントラストと同じくらい重要です。見出しフォントをボールドやブラックウェイトで設定するなら、本文フォントは典型的にレギュラーやブックウェイトで設定すべきです。見出しと本文の両方にボールドを使うと、読者がコンテンツを走査するのを助けるウェイトの階層がなくなります。ほとんどのプロフェッショナルな書体は、シンからブラックまでのウェイト範囲で提供されます。各フォントで複数のウェイトにアクセスできれば、ウェイトだけでも階層を作る柔軟性が得られ、単一の書体ですべてを使いたいミニマルなデザインで有用です。単一ファミリーペアリングは、すべてに1つの書体を使い、階層を作るためにウェイト、サイズ、スタイルのバリエーションに頼ります。このアプローチは、多くのウェイトと幅を持つ大きな書体ファミリーでうまく機能します。Raleway Extra Bold の36pxの見出し、Raleway Semi Bold の24pxの小見出し、Raleway Regular の16pxの本文は、単一ファミリーから明確な階層を作ります。結果は極めてまとまっていますが、視覚的関心を維持するために慎重なサイズとウェイトの選択が必要です。少なくとも6つのウェイトバリエーションを持つ書体がこのアプローチに最適です。Thin（100）から Black（900）まで9つのウェイトを持つ Inter は、単一ファミリーシステムの優れた候補です。ディスプレイフォントは大きいサイズ向けに設計されています：見出し、ヒーローバナー、ロゴ、引用です。これらはしばしば装飾的なディテール、極端なウェイトのコントラスト、または48pxでは素晴らしく見えるが14pxでは読めなくなる異常なプロポーションを持ちます。本文フォントは、小さなサイズでの持続的な読書のために最適化されています：均一なストローク幅、開いたカウンター（o、e、d のような文字内の囲まれた空間）、十分なスペーシング、14〜18pxでの高い可読性です。よくあるペアリングの間違いは、本文にディスプレイフォントを使うことです。3語を読むモックアップでは問題なく見えますが、実際の段落では崩れます。本文フォントを、サンプルの数語ではなく実際のテキストブロックで、使う予定の最小サイズで常にテストしましょう。書体の分類を通じたムードのマッチングは、選択肢をすばやく絞り込む助けになります。テクノロジーやスタートアップのウェブサイトには、幾何学的サンセリフ（Montserrat、Poppins、DM Sans）とアクセント用のきれいなセリフや等幅をペアにすると、イノベーションと明確さを伝えます。ラグジュアリーやファッションブランドには、ハイコントラストセリフ（Playfair Display、Cormorant）と細いサンセリフ（Lato Light、Raleway Thin）のペアが洗練を伝えます。教育やニュースサイトには、読みやすいヒューマニストセリフ（Merriweather、Lora）とニュートラルなサンセリフ（Open Sans、Roboto）のペアが信頼と権威を伝えます。クリエイティブなポートフォリオには、表現力豊かなディスプレイフォントとシンプルな本文フォントのペアが、テキストをアクセス可能に保ちながら作品に語らせます。行の長さとフォントペアリングは、デザイナーが見落としがちな方法で相互作用します。Inter や Open Sans のような広く伸びたサンセリフは、より長い行の長さ（1行あたり最大75文字）で快適に読めます。Times New Roman のような狭くコンパクトなセリフは、同じ行の長さでは疲れます。本文フォントを選ぶとき、実際のコンテンツ幅でテストしましょう。レイアウトが広い単一カラムのテキストを使うなら、長時間の読書のために設計されたフォントを選びましょう。レイアウトが狭いカラム（マルチカラムの雑誌レイアウトなど）を使うなら、よりコンパクトなフォントを使えます。本文の最適な行の長さは45〜75文字です。フォントの選択は、実際の行の長さで快適であるべきです。 Google Fonts は最大の無料 Web フォントライブラリを提供しますが、膨大な選択肢が意思決定麻痺を作ります。実用的なアプローチは、実績のあるワークホースフォントから始め、そこから構築することです。サンセリフの本文には、Inter、Open Sans、Roboto、Lato、Source Sans Pro はすべて、高い可読性、複数のウェイト、幅広い言語サポートを持つ優れた出発点です。セリフの本文には、Merriweather、Source Serif Pro、Lora、Noto Serif がうまく機能します。ディスプレイの見出しには、Playfair Display、Montserrat、Raleway、Poppins、Oswald が良い理由で人気があります。これらの実績のある選択肢から始めてから代替を探索する方が、完璧な一致を探して1500以上のフォントすべてを閲覧するより生産的です。バリアブルフォントは、Web でのフォントペアリングの仕組みを変えつつあります。バリアブルフォントは、単一のファイルにウェイト、幅、その他の軸の全範囲を含みます。Regular、Semi Bold、Bold、Extra Bold 用の別々のファイルを読み込む代わりに、1つのバリアブルフォントファイルを読み込み、CSS font-variation-settings または標準の font-weight プロパティを使って100〜900の間の任意のウェイトにアクセスします。これによりファイルサイズが減り、精密な制御が得られます。Inter、Roboto Flex、Source Sans Variable が例です。バリアブルフォントを使うとき、単一の HTTP リクエストで単一のファイルからタイポグラフィックシステム全体を作れます。一部のバリアブルフォントは幅とオプティカルサイズの軸も含み、異なるサイズとコンテナに合わせてフォントを微調整できます。パフォーマンスは Web のフォント選択における重要な要素です。各フォントファイルはページの読み込み時間を増やします。典型的なフォントウェイトは WOFF2 フォーマットで20〜50KBです。4つのウェイトを持つ2つのフォントを読み込むことは、160〜400KBの合計8ファイルを意味します。これは Core Web Vitals、特に Largest Contentful Paint と Cumulative Layout Shift に直接影響します。最大2つのフォントファミリーに制限しましょう。実際に使うウェイトのみを読み込みましょう。WOFF2 フォーマット（最も圧縮されたもの）を使いましょう。テキストが即座にフォールバックフォントでレンダリングされ Web フォントの読み込み時に置き換えられるよう、@font-face ルールに font-display: swap を追加しましょう。<link rel="preload" as="font" type="font/woff2" crossorigin> を使って最も重要なフォントファイルをプリロードしましょう。フォントサブセッティングは、必要な文字だけを含めることでファイルサイズを削減します。サイトが英語なら、キリル文字、ギリシャ文字、ベトナム語の文字セットは必要ありません。Google Fonts は unicode-range 分割を通じてこれを自動的に処理しますが、フォントをセルフホストする場合、glyphhanger や pyftsubset のようなツールでカスタムサブセットを作れます。すべてのスクリプトを含むフォントのラテン文字のみのサブセットは、80KBではなく25KBかもしれません。多言語サイトでは、文字サブセットを段階的に読み込みましょう：ラテンサブセットが最初に読み込まれ（英語とほとんどのヨーロッパ言語をカバー）、追加のサブセットは検出された言語に基づいて必要なときにのみ読み込まれます。フォントペアの CSS 実装は予測可能なパターンに従います。CSS カスタムプロパティまたは直接スタイルシートでフォントを定義します。h1 から h6 要素に見出しフォントを、body 要素に本文フォントを設定します。適切なフォールバックフォントを持つフォントスタックを使いましょう。例えば、サンセリフの本文には font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif を、セリフの本文には font-family: 'Merriweather', Georgia, 'Times New Roman', serif を使います。フォールバックフォントは、Web フォント読み込み時のレイアウトシフトを最小化するため、Web フォントと似たメトリクスを持つべきです。fontpie や Capsize のようなツールはフォールバックフォントのメトリクスを Web フォントに合わせる助けになります。スペーシングの調整は、異なるデザイナーのフォントを組み合わせるときにしばしば必要です。各フォントは、ペアしたフォントと調和しない可能性のある組み込みのレタースペーシング（トラッキング）と行の高さ（レディング）を持ちます。本文は快適な読書のために典型的に1.5〜1.75の行の高さを必要とします。見出しは短いためよりタイトな行の高さ（1.1〜1.3）を使えます。レタースペーシングの調整はより微妙です：大文字テキストは0.05em〜0.1emの追加トラッキングの恩恵をよく受け、大きなディスプレイテキストは時にわずかに負のトラッキング（-0.01em〜-0.02em）で良く見えます。これらのスペーシング値はフォントごとです：Montserrat で機能するものが Poppins では機能しないかもしれません。イタリックとボールドのバリアントはペアリング評価の一部です。すべてのフォントがよく設計されたイタリック形式を持つわけではありません。一部の Google Fonts は真のイタリックなしでレギュラーとボールドウェイトのみを提供します。ブラウザがイタリックバリアントのないフォントでイタリックスタイルに遭遇すると、見苦しい偽のイタリック（オブリークスラント）を適用します。フォントを確定する前に、デザインが要求するウェイトとスタイルを持っていることを検証しましょう。真のイタリックのない本文フォントは、強調とタイトルが頻繁にイタリック化されるコンテンツの重いサイトでは決定的な要素です。フォントペアを異なる文脈でテストすることは、確定する前に不可欠です。すべての見出しレベル（h1 から h6）、段落テキスト、ボールドとイタリック、リスト、ブロック引用、ナビゲーションメニュー、ボタン、フォームラベル、キャプションやフッターテキストのような小さな印刷物でチェックしましょう。明るい背景と暗い背景の両方でチェックしましょう。デスクトップとは異なりレンダリングされるモバイル画面でチェックしましょう。タイプスペシメンのプレビューだけでなく、実際に使うサイズでチェックしましょう。72pxでの横並び比較で素晴らしく見えるペアリングが、14pxの本文では失敗するかもしれません。フォントのレンダリングはオペレーティングシステムによって異なります。macOS はサブピクセルアンチエイリアスを使い、フォントをより滑らかでやや重く見せます。Windows は ClearType を使い、シャープさを優先し細いフォントを軽すぎる見せることがあります。Linux のレンダリングはディストリビューションと設定によって異なります。Mac で設計されたフォントペアリングは Windows では異なって見えるかもしれません。両方のプラットフォームでテストしましょう。中程度のストローク幅と一貫した字形を持つフォントは、極端な細い/太いのコントラストを持つフォントよりオペレーティングシステム全体でより一貫してレンダリングされる傾向があります。文化的および言語的な考慮事項は多言語サイトのフォントペアリングに影響します。すべてのラテン文字フォントがすべての言語をサポートするわけではありません。トルコ語には点付きと点なしの i の特定のグリフが必要です。ベトナム語には広範なダイアクリティカルマークのサポートが必要です。ポーランド語、チェコ語、ルーマニア語には特定のアクセント文字が必要です。サイトが複数の言語にサービスを提供する場合、ペアの両方のフォントが必要なすべての文字セットをサポートすることを検証しましょう。CJK（中国語、日本語、韓国語）やアラビア語のコンテンツを含むサイトでは、ラテンフォントと視覚的に調和するようペアにされた、それらのスクリプト用の別のフォントスタックが必要になるでしょう。Noto Sans と Noto Serif は事実上すべての書記系をカバーし、グローバルサイトの安全な選択になります。アクセシビリティ要件はフォントの選択に影響します。WCAG は特定のフォントを義務付けませんが、読みやすさはアクセシビリティの中心です。類似した文字（大文字の I、小文字の l、数字の1、大文字の O と数字の0）の明確な区別を持つフォントはよりアクセシブルです。サンセリフフォントは一般的にディスレクシアのユーザーにとって画面上で読みやすいですが、これは個人によって異なります。十分なフォントサイズ（Web の本文は最小16px）、十分な行の高さ、テキストと背景の強いコントラストは、選ばれた特定の書体より重要です。フォントの選択に関わらず、本文を14px未満に設定しないでください。等幅フォントはフォントペアリングで特定の役割を持ちます。本文や見出しには典型的に使われませんが、コードブロック、技術文書、データテーブル、固定幅の整列が重要な UI 要素に現れます。プロポーショナルフォントと等幅フォントをペアにするには、サイズとウェイトのマッチングに注意が必要です。等幅文字は同じフォントサイズで本質的にプロポーショナル文字より広いため、視覚的なバランスを達成するために等幅フォントのサイズを10〜15% 下げる必要がしばしばあります。コード用の人気のある等幅フォントには JetBrains Mono、Fira Code、Source Code Pro、IBM Plex Mono があります。それぞれにファミリー内のプロポーショナルな兄弟があり、自然にペアになります。タイプスケールを確立すると、見出しと本文のサイズの間に数学的な一貫性が生まれます。タイプスケールは、比率から導出されたフォントサイズのシーケンスです。メジャーサードの比率（1.25）は16、20、25、31.25、39、48.8のようなサイズを生みます。パーフェクトフォースの比率（1.333）は16、21.3、28.4、37.9、50.5を生みます。より小さい比率は密なインターフェースに適したタイトな階層を生みます。より大きい比率はエディトリアルやマーケティングページに適したドラマチックな階層を生みます。フォントペアリングはタイプスケール全体で機能するべきです。見出しフォントが48pxでは素晴らしく見えるが25px（メジャーサードスケールの h3）では不格好なら、別のフォントか別のスケールが必要です。レスポンシブタイポグラフィはビューポート幅全体でフォントサイズを調整します。CSS clamp() は流動的なスケールを提供します：font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem) は16pxと40pxの間で滑らかにスケールするフォントサイズを作ります。フォントペアは両極端で機能する必要があります。デスクトップで40pxで優雅に見えるディスプレイフォントが、モバイルで20pxでは窮屈に見えるかもしれません。ペアリングをレスポンシブスケールの最小と最大サイズでテストし、全範囲で維持されることを検証しましょう。タイポグラフィのデザイントークンは、フォントペアリングの決定を再利用可能なシステムに体系化します。フォントファミリー（--font-heading、--font-body、--font-mono）、フォントサイズ（--text-xs から --text-4xl）、フォントウェイト（--weight-normal、--weight-medium、--weight-bold）、行の高さ（--leading-tight、--leading-normal、--leading-relaxed）、レタースペーシング（--tracking-tight、--tracking-normal、--tracking-wide）のトークンを定義します。これらのトークンはアプリケーションのすべてのテキスト要素の構成要素になります。フォントペアリングの変更は、何百もの CSS 宣言を検索するのではなく、いくつかのトークン値を更新することを意味します。メールとクロスプラットフォームの考慮事項は、ウェブサイトを超えたプロジェクトのフォントペアリングに影響します。メールクライアントはフォントのサポートが限定的です：ほとんどは Arial、Times New Roman、またはプラットフォームの既定のようなシステムフォントに既定されます。Web フォントはメールに埋め込めますが、クライアント間でサポートは大きく異なります。ブランドがウェブサイトでカスタム Web フォントを使う場合、メールやその他の制約のある文脈のために広く利用可能なシステムフォントを使うフォールバックペアリングを定義しましょう。システムフォントスタック（system-ui、-apple-system、BlinkMacSystemFont、'Segoe UI'、Roboto、'Helvetica Neue'、Arial、sans-serif）は各プラットフォームのネイティブフォントをレンダリングし、常に高い可読性を持ちます。避けるべき一般的なペアリングの間違い：単一ページで3つ以上のフォントを使う（視覚的ノイズを作る）、似すぎたフォントを選ぶ（例えば Helvetica と Arial は意味のあるコントラストを提供しない）、小さなサイズで可読性の低い本文フォントを選ぶ、フォント読み込みのパフォーマンスを無視する、本文に装飾的やスクリプトフォントを使う、2つのディスプレイフォントを一緒にペアにする、デバイスやブラウザ全体でテストしないこと。これらの間違いはそれぞれ設計中には起こしやすいですが、最終製品ではユーザーにとって明白です。フォントペアリングツールを使えば、組合せをリアルタイムでプレビューでき、CSS を書く前にペアがどう一緒に機能するかを見るためにサイズ、ウェイト、サンプルテキストを調整できます。出発点として使いましょう：選択肢を2、3の候補に絞り、次にそれらの候補を実際のレイアウトで実際のコンテンツでテストします。実際のレイアウトで実際のコンテンツで行われたタイポグラフィの決定は、プレビューツールの lorem ipsum で行われた決定に常に勝ります。

よくある質問

相性の良いフォントの選び方は？

装飾的またはセリフの見出しフォントに、すっきりしたサンセリフの本文フォントを組み合わせましょう。提案ペアリングはこの原則に沿っています。

これらのフォントは無料で使えますか？

はい。表示されているフォントはすべて Google Fonts からで、商用・個人利用ともに無料です。