フォントペアリング & Google Fonts ディレクトリ
人気の Google Fonts を厳選したディレクトリでライブプレビュー付きに閲覧 — カテゴリーでフィルターし名前で検索、そのまま貼り付けられる CSS をコピーして、おすすめのフォントペアリングを探せます。すべてブラウザ内で完結します。
すべてブラウザ内で実行されます。フォントはライブプレビューのためにのみ Google Fonts から読み込まれ、何もアップロードされず、登録も不要で、完全に無料です。
ディスプレイフォントで組んだ見出し
そしてこちらはペアとなる本文フォントで組んだ本文の段落です。優れたフォントの組み合わせは個性と可読性のバランスを取ります。特徴的な見出しフォントが視線を引きつける一方、すっきりと読みやすい本文フォントが長い文章を読みやすく保ちます。「CSS」をクリックすると、見出しと本文用の @import 行と font-family ルールの両方をコピーできます。
フォントペアリング & Google Fonts ディレクトリについて
このフォントディレクトリは、80種類の人気のあるGoogle Fontsを1つの検索可能なページに集め、それぞれをパングラムのサンプル行、アルファベットと数字の行、カテゴリバッジ付きのライブ見本として表示します。サンセリフ、セリフ、ディスプレイ、手書き、モノスペースという5つのタイプファミリーをカバーしているので、名前から推測するのではなく実際の字形を比較できます。
すべてのフォントカードには、厳選されたペアリングの提案が含まれています。見出しと本文でうまく組み合わさる相手のフォントです。ペアリングチップをクリックすると、一方のフォントで見出しを、もう一方で段落を設定したプレビューが開くので、組み合わせを実際に採用する前に文脈の中で判断できます。
フォントやペアリングが決まったら、ワンクリックですぐに貼り付けられるCSSをコピーできます。Google Fontsのスタイルシート用の@import行と、適切なフォールバックを持つ一致するfont-familyスタックです。フォントはライブプレビューのためだけにGoogle Fontsから読み込まれ、入力した内容はどこにもアップロードされません。
フォントペアリング & Google Fonts ディレクトリの使い方
- 名前、カテゴリバッジ、実際の書体で組まれたライブサンプルテキストを表示する各フォントカードを閲覧します。
- 検索ボックスで名前からフォントを見つけるか、カテゴリチップ(サンセリフ、セリフ、ディスプレイ、手書き、モノスペース)をクリックしてグリッドを絞り込みます。
- サイズスライダー(16〜72px)をドラッグして、目標の見出しや本文サイズでサンプル行をプレビューします。
- 「組み合わせ」チップまたは「ペアリングをプレビュー」ボタンをクリックして、提案された組み合わせで設定された見出しと本文の段落を確認します。
- カードまたはペアリングプレビューの「CSS」ボタンをクリックして、@import行とfont-family宣言をクリップボードにコピーします。