フォントペアリング
このフォント組み合わせツールは、見出しと本文向けに厳選した 12 組の Google Fonts をプレビューでき、自分でフォントを組み合わせて、対応する CSS @import をコピーできます。
The Art of Good Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
このツールについて
このフォント組み合わせツールは、見出しと本文向けに厳選した 12 組の Google Fonts をプレビューでき、自分でフォントを組み合わせて、対応する CSS @import をコピーできます。
使い方
- 厳選された組み合わせから 1 つ選ぶか、見出しと本文のフォントを自分で選びます。
- 「ランダムな組み合わせ」でさまざまな組み合わせを試せます。
- 見出しと段落のテキストのライブプレビューを確認します。
- 「CSS @import をコピー」をクリックし、サイトでフォントを読み込みます。
知っておきたいこと
- 定番の組み合わせは、Playfair Display と Source Sans 3 のように、セリフ体とサンセリフ体を対比させるものです。
- 組み合わせには、Montserrat + Merriweather、Raleway + Lato、Space Grotesk + Inter、DM Serif Display + DM Sans などがあります。
- サイトで使うフォントファミリーを 2 つに絞ると、ページに統一感が出てダウンロードサイズも減ります。
- プレビューでは、選んだフォントをウェイト 400 と 700 で Google Fonts から読み込みます。
- フォントの URL に display=swap を加えると、Web フォントの読み込み中は代替フォントでテキストが表示されます。
すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。
よくある質問
相性の良いフォントは？
スタイルは対照的でもプロポーションが似ているフォント同士は、たいてい相性が良いです。たとえば、コントラストの強いセリフ体の見出しと、すっきりしたサンセリフ体の本文です。ここにある厳選の組み合わせは、実績のある組み合わせです。
Web サイトで使うフォントは何種類がよいですか？
見出し用と本文用の 2 ファミリーで、ほとんどのサイトには十分です。3 つ目が必要になることはまれです。
Google Fonts は商用利用できますか？
はい。Google Fonts ライブラリのフォントは SIL Open Font License などのオープンライセンスで公開されており、商用利用できます。
サイトにフォントを追加するには？
コピーした @import を CSS の先頭に貼り付けるか、HTML の head 内の link タグに変換し、見出しと本文に font-family を設定します。