いろはにほへと散りぬるを
タイポグラフィとは、書かれた言語を読みやすく、美しく表示するために活字を配列する技術と芸術です。書体の選択、ポイントサイズ、行長、行間、文字間隔の調整が含まれます。
タイポグラフィの芸術を探る
タイポグラフィとは、書かれた言語を読みやすく、美しく表示するために活字を配列する技術と芸術です。書体の選択、ポイントサイズ、行長、行間、文字間隔の調整が含まれます。
フォントペアファインダー - Google Fontsペアリングツール オンライン
複数のレイアウトでリアルタイムプレビューしながら完璧なGoogle Fontsの組み合わせを見つけましょう。すぐに使えるCSSコードを生成 — 100%クライアントサイド。
よくある質問
フォントペアファインダーとは？
フォントペアファインダーは、2つのフォント（通常は見出し用と本文用）の調和のとれた組み合わせを見つけるオンラインツールです。Google Fontsライブラリからフォントを閲覧し、リアルなレイアウトでプレビューし、ウェブサイトで使用するCSSコードをエクスポートできます。
このツールの使い方は？
1. ドロップダウンから見出しフォントを選択。2. 本文フォントを選択。3. タイポグラフィ設定（サイズ、ウェイト、行の高さ、文字間隔）を調整。4. プレビューレイアウト（記事、カード、プロフィール）を切り替えて確認。5. おすすめペアリングを試す。6. 生成されたCSSコードをコピーしてプロジェクトに使用。
データは安全ですか？
タイポグラフィの選択は100%プライベートで、サーバーに送信されることはありません。ツールは完全にブラウザで動作します。唯一の外部リクエストは、フォントファイルを読み込むためのGoogle Fonts CDNへのものです。
良いフォントペアリングとは？
良いフォントペアリングは次の原則に従います：コントラスト — 異なる分類のフォントを組み合わせる。共通の特徴 — 類似したx-height、プロポーション。階層 — 見出しフォントが視覚的に区別される。可読性 — 本文フォントは小さなサイズでも読みやすい。
セリフ、サンセリフ、ディスプレイ、手書き、等幅フォントの違いは？
セリフは文字の端に装飾的なストロークがあります（例：Merriweather）。サンセリフは装飾のないクリーンなフォントです（例：Roboto）。ディスプレイは大きなサイズ向けの装飾フォントです（例：Lobster）。手書きは手書きを模倣します（例：Caveat）。等幅は全文字が同じ幅です（例：Fira Code）。
生成されたCSSをプロジェクトで直接使用できますか？
はい。エクスポートパネルはプロダクション対応のコードを生成します。HTML <link>タグ、CSS @importステートメント、システムフォントフォールバック付きのfont-family宣言が含まれます。
コード例
// Font Pair Finder - Dynamic Google Font Loading
function loadGoogleFont(family, weights = [400, 700]) {
const weightsStr = weights.join(";");
const url = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:wght@${weightsStr}&display=swap`;
if (document.querySelector(`link[href="${url}"]`)) return;
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = url;
document.head.appendChild(link);
}
function generatePairingCSS(headingFont, bodyFont, options = {}) {
const { headingSize = 36, bodySize = 16, headingWeight = 700, bodyWeight = 400, lineHeight = 1.5 } = options;
return `h1, h2, h3 {
font-family: '${headingFont}', system-ui, sans-serif;
font-weight: ${headingWeight};
font-size: ${headingSize}px;
}
body, p {
font-family: '${bodyFont}', system-ui, sans-serif;
font-weight: ${bodyWeight};
font-size: ${bodySize}px;
line-height: ${lineHeight};
}`;
}
loadGoogleFont("Montserrat", [400, 700]);
loadGoogleFont("Open Sans", [400, 600]);
console.log(generatePairingCSS("Montserrat", "Open Sans"));