フォント組み合わせツールとは？

見出しと本文の相性がいいフォントの組み合わせを見つけましょう。ペアリングを選び、自分のテキストでプレビューして、CSSやGoogle Fontsリンクをプロジェクトにコピーできます。

それぞれの組み合わせは、視覚的コントラストと読みやすさを前提に見出し用と本文用のフォントを組ませています。セリフの見出しとヒューマニストサンスの本文、ジオメトリックサンスとモノスペースのアクセント、コンデンスドなディスプレイ書体と読みやすい本文書体など。スタイルで絞り込み、自分の見出し文をプレビューに入れ、Google Fontsの読み込みコードと対応するCSSを丸ごとコピーできます。

使い方

1. ステップ 1 — フォントペアを眺めるか、スタイル(セリフ、サンセリフ、ディスプレイ、等幅、手書き)で絞り込みましょう。
2. ステップ2 — ペアリングをクリックして、サンプルテキストまたは自分のテキストでプレビューします。
3. ステップ3 — 選んだペアリングのGoogle FontsインポートリンクまたはCSSコードをコピーします。

使用するタイミング

• ブログやランディングページの見出し・本文フォントをCSSを書く前に決めるとき。
• プレゼン資料やポートフォリオのレイアウトはそのままに、書体だけ刷新したい場面。
• すでに使っている2つの書体が本当に相性よく見えているかを点検する用途。

結果

ブログを構築する場合：「Playfair Display + Source Sans 3」のペアリングを選び、見出しをプレビューしてからCSSをコピーしてスタイルシートに貼り付けます。

よくある質問

ここのフォントはすべて商用フリーですか?

はい。組み合わせに登場するフォントはすべて SIL Open Font License などのオープンライセンスで提供される Google Fonts です。商用サイトへの埋め込み、アプリへの同梱、クライアントワークでの利用も追加ライセンス不要です。

2つのフォントが「合う」とはどういうことですか?

コントラストと調和の両立です。見出しはセリフやディスプレイ、太いジオメトリックなど個性が活きますが、本文はあくまで読みやすさに溶け込む必要があります。ここでは個性ある見出しに中立的なサンスを合わせるように、わざと別カテゴリを掛けています。

見出しと本文に同じフォントを使ってもいいですか?

問題ありません。Inter、Source Sans、Roboto のようなウェイトの豊富なスーパーファミリーなら、Regular と Bold だけでもドキュメントサイトや管理画面では十分整って見えます。ただし2書体の組み合わせの方が視覚的な抑揚は出やすいです。

Google Fontsを2つ読み込むとページが重くなりますか?

1ウェイトずつの2ファミリーで合計30〜50KB程度、HTTPリクエストが1つ増えるだけです。生成されたCSSをセルフホストし、`font-display: swap` を指定し、実際に使うウェイトだけに絞れば負荷はほぼ無視できます。

ペアを決めたあと、タイポグラフィを一貫させるコツは?

CSS変数で `font-family` の既定値を固定し、サイズも一定の比率(例:1.25倍)で階段を作り、コンポーネント単位で勝手にフォントを足さないことです。よく選んだ2書体だけで大半の文書を最後まで支えられます。

関連ツール