優れたデザインには、優れたフォントの組み合わせが不可欠です。

Fontペアリングルール

優れたフォントの組み合わせを作成するための基本的なルールを次に示します。

1.補完する

互いに補完し合うフォントの組み合わせを見つけることは常に安全です。

優れたフォントの組み合わせは、似すぎたり違いすぎたりせずに調和する必要があります。

2. フォントスーパーファミリーを使用する

フォントスーパーファミリーは、連携して機能するように設計されたフォントのセットです。したがって、同じスーパーファミリー内で異なるフォントを使用しても安全です。

たとえば、Lucidaスーパーファミリーには、Lucida Sans、Lucida Serif、Lucida Typewriter Sans、Lucida Typewriter Serif、およびLucida Mathのフォントが含まれています。

3. コントラストが重要

あまりにも似ている2つのフォントは競合することがよくあります。ただし、適切な方法で対比を行うと、各フォントの長所が引き出されます。

例: serifとsan-serifの組み合わせは、よく知られている組み合わせです。

強力なスーパーファミリーには、同じフォントのserifとsan-serifの両方のバリエーションが含まれます (例: LucidaとLucida Sans)。

4.ボスを1つだけ選ぶ

1つのフォントをボスにする必要があります。これにより、ページ上のフォントの階層が確立されます。これは、サイズ、太さ、色を変えることで実現できます。

以下に、多くのブランドや状況に適した人気のあるフォントの組み合わせをいくつか紹介します。

GeorgiaとVerdana

GeorgiaとVerdanaは古典的な組み合わせです。また、Webセーフフォント標準にも準拠しています。

HelveticaとGaramond

HelveticaとGaramondは、Webセーフフォントを使用するもう1つの古典的な組み合わせです。

人気のあるGoogleフォントの組み合わせ

HTMLで標準フォントを使用したくない場合は、Googleフォントを使用できます。

Googleフォントは無料で使用でき、1000以上のフォントから選択できます。

以下は、人気のあるGoogle Webフォントのペアリングです。

MerriweatherとOpen Sans

UbuntuとLora

Abril FatfaceとPoppins

CinzelとFauna One

Fjalla OneとLibre Baskerville

Space MonoとMuli

SpectralとRubik

OswaldとNoto Sans

すべての無料のGoogleフォントのリストについては、How To - Googleフォントチュートリアルを確認してください。