フォントペアリングツール
Googleフォントのペアリングをブラウズしてコピーする
tools.fontPairing.title
tools.fontPairing.description
tools.fontPairing.headingFont
Playfair Display
tools.fontPairing.bodyFont
Source Sans Pro
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Lato
tools.fontPairing.bodyFont
Merriweather
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Oswald
tools.fontPairing.bodyFont
Open Sans
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Montserrat
tools.fontPairing.bodyFont
Roboto
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Abril Fatface
tools.fontPairing.bodyFont
Lato
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Raleway
tools.fontPairing.bodyFont
Open Sans
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Libre Baskerville
tools.fontPairing.bodyFont
Montserrat
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Poppins
tools.fontPairing.bodyFont
Inter
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Rubik
tools.fontPairing.bodyFont
Lato
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Barlow
tools.fontPairing.bodyFont
Roboto
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Work Sans
tools.fontPairing.bodyFont
Source Sans Pro
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Outfit
tools.fontPairing.bodyFont
Inter
tools.fontPairing.sampleText
tools.fontPairing.headingFont
DM Sans Display
tools.fontPairing.bodyFont
DM Mono
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Cinzel
tools.fontPairing.bodyFont
Lora
tools.fontPairing.sampleText
tools.fontPairing.headingFont
EB Garamond
tools.fontPairing.bodyFont
Open Sans
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Cormorant Garamond
tools.fontPairing.bodyFont
Lato
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Playfair Display
tools.fontPairing.bodyFont
Source Sans Pro
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Bodoni Moda
tools.fontPairing.bodyFont
Open Sans
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Noto Serif
tools.fontPairing.bodyFont
Roboto
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Archivo Black
tools.fontPairing.bodyFont
Inter
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Impact
tools.fontPairing.bodyFont
Open Sans
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Bebas Neue
tools.fontPairing.bodyFont
Montserrat
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Kanit
tools.fontPairing.bodyFont
Poppins
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Chakra Petch
tools.fontPairing.bodyFont
Inter
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Righteous
tools.fontPairing.bodyFont
Lato
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Merriweather
tools.fontPairing.bodyFont
Open Sans
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Georgia
tools.fontPairing.bodyFont
Helvetica Neue
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Libre Baskerville
tools.fontPairing.bodyFont
Montserrat
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Playfair Display
tools.fontPairing.bodyFont
Source Sans Pro
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Crimson Text
tools.fontPairing.bodyFont
Lato
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Spectral
tools.fontPairing.bodyFont
Inter
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Montserrat
tools.fontPairing.bodyFont
Merriweather
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Open Sans
tools.fontPairing.bodyFont
Lora
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Roboto
tools.fontPairing.bodyFont
Noto Serif
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Lato
tools.fontPairing.bodyFont
Abril Fatface
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Poppins
tools.fontPairing.bodyFont
Merriweather
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Inter
tools.fontPairing.bodyFont
Crimson Text
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Bangers
tools.fontPairing.bodyFont
Roboto
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Permanent Marker
tools.fontPairing.bodyFont
Open Sans
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Pacifico
tools.fontPairing.bodyFont
Lato
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Shadows Into Light
tools.fontPairing.bodyFont
Montserrat
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Satisfy
tools.fontPairing.bodyFont
Inter
tools.fontPairing.sampleText
tools.fontPairing.headingFont
Dancing Script
tools.fontPairing.bodyFont
Open Sans
tools.fontPairing.sampleText
フォント ペアリングは、Web デザインと印刷デザインで調和のとれたタイポグラフィの組み合わせを作成するための重要なガイドです。デザイン スタイルや雰囲気別に整理され、美しく連携する厳選されたフォントの組み合わせを見つけてください。終わりのない試行錯誤をせずにプロのようなタイポグラフィを求めるデザイナー、Web 開発者、コンテンツ作成者に最適です。当社の包括的なライブラリには、モダン、エレガント、遊び心のある、クラシックなフォントの組み合わせと、詳細な組み合わせの推奨事項が含まれています。
主な機能
カテゴリごとに厳選されたフォントの組み合わせの提案
モダンとクラシックなタイポグラフィーの組み合わせ
を選択する前にフォントをプレビューします。デザイン スタイルと雰囲気でフィルター
フォント名とリンクを即座にコピー
レスポンシブ デザイン互換性ガイド
アクセシビリティに関する考慮事項が含まれています
フォントペアリングの理論的説明
複数のスタイル カテゴリが利用可能
リアルタイム プレビュー サンプル
フォントのペアリング
カテゴリを参照
「モダン＆クリーン」、「エレガント＆洗練」、「遊び心＆楽しい」などのデザイン スタイル カテゴリを選択すると、関連するフォントのペアが表示されます。
組み合わせのプレビュー
各フォントの組み合わせとサンプル テキストを表示して、コンテキスト内でそれらがどのように連携するかを確認します。
フォントの詳細を確認する
各ペアリングを成功させるフォント名、ウェイト、特性を確認してください。
フォント情報をコピーする
デザイン プロジェクトで使用するフォント名と Google Fonts リンクをコピーします。
設計での実装
選択したフォントを Web デザインや印刷デザインに自信を持って適用できます。
ユースケース
Web サイトのデザインとブランディング用のフォントを選択する
マーケティング資料用にまとまりのあるタイポグラフィを作成する
プロフェッショナルなプレゼンテーションと提案書をデザインする
読みやすいフォントを使用してモバイル アプリのインターフェイスを開発する
補完的な書体を使用して印刷デザインを作成する
アクセシブルなタイポグラフィを使用して電子メール テンプレートを作成する
魅力的なフォントを使用してソーシャル メディア グラフィックをデザインする
読みやすいフォントの組み合わせでブログ レイアウトを作成する
よくある質問
これらのフォントのペアは無料で使用できますか?
多くの候補には Google Fonts の無料フォントが含まれていますが、一部のプレミアム フォントにはライセンスが必要な場合があります。使用する前に個々のフォントのライセンスを確認してください。
これらのフォントを商用プロジェクトに使用できますか?
含まれているフォントのほとんどは商用ライセンスを取得していますが、プロジェクト内の各フォントの特定のライセンス条項を必ず確認してください。
これらのフォントを自分の Web サイトに実装するにはどうすればよいですか?
ほとんどのフォントは、簡単なコード スニペットを使用して Google Fonts から直接インポートできます。ペアリングごとに説明が記載されています。
Tool Information
Related Tools You Might Like
画像からカラーパレットジェネレータ
画像からドミナント色を抽出する
RGB/HEXコンバーター
RGBとHEXのカラーフォーマット間で変換
CSS グラデーションジェネレータ
プレビューでカスタムCSSグラデーションを作成
WCAG コントラストチェッカー
WCAG規格に準拠したカラーコントラストをチェック
デジタル署名ジェネレータ
異なるフォントで固定されたデジタル署名を作成する
箱の影の発電機
CSS ボックスの影を生成する
サーフボードボリューム計算機
あなたの体重、経験レベル、波条件に基づいて完璧なサーフボードのボリュームを計算します.
波の高さのコンバーター
異なる波高さ測定(顔の高さ、ハワイアンスケール、オーシャンズウェル)間で変換します.
スキューバダイビングプランナー
深さの限界、最下の時間および安全解凍の条件のあなたのscubaの潜水艦を計画して下さい.