実際のウェブサイトで使われるフォントペアリング

これらのフォントの組み合わせは、What the Fontが分析したウェブサイトで最も頻繁に一緒に使用されています。各ペアリングは実際の使用データに基づいており、デザイン理論だけではありません。

最も一般的なフォントペアリング

#1104サイトで一緒に使用
#2104サイトで一緒に使用
#378サイトで一緒に使用
#444サイトで一緒に使用
#542サイトで一緒に使用
#642サイトで一緒に使用
#733サイトで一緒に使用
#831サイトで一緒に使用
#931サイトで一緒に使用
#1028サイトで一緒に使用
#1128サイトで一緒に使用
#1227サイトで一緒に使用
#1326サイトで一緒に使用
#1525サイトで一緒に使用
#1623サイトで一緒に使用
#1723サイトで一緒に使用
#1823サイトで一緒に使用
#1920サイトで一緒に使用

フォントの組み合わせとは?

フォントの組み合わせとは、ウェブサイト上でうまく機能する2つ(またはそれ以上)の書体の選択です。通常、見出しには1つのフォント、本文には別のフォントが使用されます。最良の組み合わせは視覚的な階層を作りながら調和を保ちます - フォントは区別できるほどコントラストがありながら、まとまりを感じさせる共通の個性を持っています。

このデータはどこから来ているのか?

このページのすべての組み合わせは、What the Fontが分析した実際のウェブサイトから導き出されています。同じサイトに複数のフォントが一緒に表示される場合、それらはペアとしてカウントされます。ある組み合わせを使用するサイトが多いほど、ランキングが上がります。これは実際の開発者やデザイナーによるリアルなデザイン決定を反映しています。

プロジェクトに合うフォントの組み合わせの選び方

まず、見出し用のメインフォントを選びましょう - ブランドの個性に合った特徴的なものを。次に、小さいサイズでも読みやすい本文用のサブフォントを選びます。セリフとサンセリフの組み合わせ、またはディスプレイフォントとInterやRobotoのようなニュートラルなフォントの組み合わせが一般的なアプローチです。フォント名をクリックすると、詳細情報を確認できます。

すべてのフォントはGoogle Fontsから

これらの組み合わせに登場するすべてのフォントは、Google Fontsで入手できます。これは、任意のウェブサイトで使用できる無料のオープンソースライブラリです。必要なフォントのCSSインポートを追加するだけで、すぐに使い始めることができます。ライセンス料なし、サブスクリプションなし。フォント名をクリックすると、Google Fontsページが開き、インポートコードをコピーできます。

ウェブサイトのフォントを調べたい場合

静的画像ではなくウェブサイト上のフォントを特定したい場合は、URLベースのフォントチェッカーをご利用ください。URLを貼り付けると、使用されているすべてのフォントを抽出します。