フォントペアリングのガイド:Webサイトに最適なフォントの組み合わせの選択

公開: 2020-11-02

Webデザイナーとして、構築するWebサイトごとに多くの大きな決定を下す必要があります。 カラーパレット、UIインタラクション、ナビゲーションレイアウト、Webサイトに最適なフォントの選択、その他多数。

ただし、考えるのに十分な時間を費やしていない可能性のあるWebデザインの1つの領域は、フォントのペアリングです。

見栄えの良いフォントを1つ選択することは1つのことです。 ブランドの声とスタイルをよく理解すると、似たような雰囲気を伝えるフォントを簡単に識別できるようになります。

目次

  • なぜフォントペアリングが必要なのですか?
  • フォントをペアリングする際の考慮事項
  • Webデザインでフォントをペアリングするための4つのルール
  • ルール1:サイトで使用するフォントは3つ以下
  • ルール#2:コンコードとコントラストは良いです。 紛争は悪い
  • ルール3:フォントスーパーファミリー内でのペアリングを恐れないでください
  • ルール4:フォントが適切なサイズと形状になっていることを確認する
  • Webデザインに最適な30のフォントの組み合わせ

なぜフォントペアリングが必要なのですか?

Webサイトには、階層を確立し、訪問者を多くのテキストに引き付け続け、ブランドの個性とアプローチについて訪問者にサブリミナルに伝えるために、複数のフォントが必要です。

この複雑さの層をミックスに追加すると、状況が複雑になる可能性があります。 フォントを相互にペアリングするだけではありません。 あなたもそれらをあなたのウェブデザインと組み合わせています。

Webを巡る旅の中で、次のようなシナリオに遭遇したことは間違いありません。

  • 2つの退屈なフォントを使用すると、長いブログ投稿が非常に読みにくくなり、ヘッダーをざっと見て、そのようにストーリーをつなぎ合わせることができるかどうかを確認することになります。
  • 楽しくてユニークな筆記体フォントは、訪問者にビジネスを紹介しますが、その第一印象と矛盾する小さすぎて非常にシンプルなボディフォントだけです。
  • ウェブサイトは、会社がビジネスに若くて革新的なアプローチを取っていると主張します、それがレトロなフォントがとても場違いに見える理由です。

フォントがどのように組み合わされているかを時間をかけて理解しないと、フォントのペアリングで問題が発生する可能性があります。

WordPressにカスタムフォントを追加する方法を学ぶ

フォントをペアリングするときに考慮すべきこと

ウェブサイトに最適なフォントのガイドでは、探すべき主な特徴を要約しました。

1.読みやすさ

セリフが文学や新聞で非常に好まれる理由の1つは、読みやすさのためです。 文字の上部と下部にあるセリフ(フィート)により、読者は大文字の「I」と小文字の「l」のような似たような文字を簡単に区別できるため、理解の問題による速度低下はありません。

600語を超えるページをデザインしている場合は、まさにこの理由から、本文にセリフを使用することは悪い考えではありません。

とはいえ、(セリフがなくても)明確な文字形式のサンセリフを見つけた場合は、恐れずに実験してください。 以下に、本文とヘッダーの両方の配置でサンセリフを使用する方法の例をいくつか示します。

2.読みやすさ

サンセリフがオンラインテキストのセリフよりも優れた選択肢であると長い間考えられていた理由の1つは、読みやすさが高いためでした。 ただし、調査によると、少なくとも小さいサイズでは、セリフとサンセリフのテキストをすばやくまたは簡単に読むことができるかどうかにはほとんど違いがありません。

画面の解像度が長年にわたって大幅に向上したため、タイポグラファーは、同じように読みやすい両方のスタイルでフォント面を作成することができました。 NNGが説明するように:

「オンラインタイポグラフィの古いユーザビリティガイドラインは単純でした。サンセリフ書体に固執することです。 コンピューターの画面がひどくてセリフを適切にレンダリングできないため、本文のサイズでセリフを入力しようとすると、文字の形がぼやけてしまいました。」

他のフォントタイプ(過度に装飾的なものなど)は、大きなヘッダーテキストの外では読みにくい場合がありますが、デザイナーには、セリフサンセリフを使用してページ上のテキストのスタイルを設定する方法に関して多くのオプションがあります。

したがって、もっと認識しておくべきことは、読みやすさと読みやすさに影響を与えるので、代わりに文字のサイズと間隔です。

3.快適さ

HelveticaやTimesNew Romanのような書体は、使いすぎのために使いたがらないWebデザイナーもいます。 ただし、フォントの選択とペアリングは、Webサイトのタイポグラフィについてどのように感じるかではなく、訪問者がどれだけ快適に読むことができるかということです。

だから、彼らが仕事を成し遂げれば、古典を選ぶことに恥はありません。

4.スタイル

フォントの種類と、ブランドに合ったスタイルのフォントを選択してください。 たとえば、セリフフォントは、風変わりで楽しい傾向がある筆記体フォントとは対照的に、より伝統的で真面目な感じで外れます。

最初に適切な種類のフォントを選択するだけで、訪問者にブランドについて多くのことを伝えることができます。

タイポグラフィを使用したデザインの次のステップに進むときに、これらのルールを見失わないでください。