フォントペアリング探索ツール

フォントペアリング探索ツールとは？

フォントペアリング探索ツールは、フォントライブラリを探し回らずに洗練された見出しと本文の組み合わせを見つけたいウェブデザイナー・開発者・コンテンツ制作者向けの無料のブラウザ内ツールです。独立した 2 つの検索式ピッカーで、48 種の厳選 Google フォントをセリフ・サンセリフ・ディスプレイ・等幅で絞り込み、役割ごとに書体を選べます。役割ごとのコントロールで太さ・サイズ・行間・字間を設定でき、リアルタイムプレビューが自分の見出しと段落を実際の書体で描画します。インスピレーションが欲しいときはシャッフルボタンがランダムな組み合わせを提案します。気に入ったら、好みの形式で生成された CSS をコピーします — @import 規則、HTML の link タグ、または Fontsource 形式の npm インポート — ランディングページ、ブログテーマ、スライド、デザインシステムに使えます。

フォントペアリング探索ツールの使い方

1. 見出しピッカーでセリフ・サンセリフ・ディスプレイ・等幅で絞り込み、入力して検索し、フォントをクリックして選びます。
2. 本文ピッカーでも同様に、段落テキストに合う書体を選びます。
3. 設定を開いて、各役割の太さ・サイズ・行間・字間を設定します。
4. サンプル欄に自分の見出しと一文を入力するか、空欄のまま既定の文章を使います。シャッフルを押すとランダムな組み合わせの案が出ます。
5. 出力形式（@import・<link>・Fontsource）を選び、生成された CSS をスタイルシートやプロジェクトにコピーします。

使用例

見出し: Playfair Display 700 ・ 本文: Source Sans 3 400

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400&display=swap');

形式: <link>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

よくある質問

2 つのフォントはどう選びますか？

役割ごとに専用のピッカーがあります。カタログをセリフ・サンセリフ・ディスプレイ・等幅で絞り込み、パッケージ名の一部を入力して検索し、結果をクリックして選びます。見出しと本文は別々に選べ、シャッフルボタンがランダムなペアを選んでくれます。

太さ・サイズ・行間・字間は調整できますか？

はい。設定を開けば、見出しと本文それぞれに太さ、ピクセル単位のサイズ、行間、字間（em）を設定できます。変更はリアルタイムプレビューとコピーされる CSS の両方に反映されます。

どんな出力形式をコピーできますか？

3 種類です。CSS の @import 規則、preconnect ヒント付きの HTML <link> タグ、そして Fontsource 形式の npm インポート（npm i @fontsource/… と太さ別のインポート行）。いずれも h1–h3 と body 用に同じ font-family・太さ・サイズ・行間・字間の規則を含みます。

フォントはどこから来て、入力文は非公開ですか？

組み合わせを選ぶと、ブラウザはその 2 書体だけを fonts.googleapis.com の Google 公開 Fonts CSS API から直接読み込みます — ブラウザから直接行う第三者リクエストで、当社サーバーを経由しません。サンプル文と設定は完全にデバイス内に留まります。

どんなフォントが含まれますか？

セリフ・サンセリフ・ディスプレイ・等幅にわたる人気の Google フォント 48 種を厳選 — Playfair Display、Merriweather、Inter、Roboto、Poppins、Montserrat、Oswald、Space Grotesk、JetBrains Mono などを含みます。