完璧なフォントの組み合わせのためのフォントペアリング戦略とツール

完璧なフォントの組み合わせのためのフォントペアリング戦略とツール

フォントの選択により、ドキュメント、Webサイト、またはその他のデザインの外観のトーンが決まります。それは楽しくてフレンドリーですか、滑らかで創造的ですか、それとも真面目でフォーマルですか?





原則として、プロジェクトでは2つまたは3つのフォントを使用する必要があります。しかし、どちらを選択するか、どのフォントペアがうまく調和するかをどうやって知るのでしょうか?





この記事では、プロジェクトで使用するのに最適なフォントの組み合わせを見つけるのに役立つフォントペアリング戦略とツールについて説明します。





タイポグラフィ入門書

このガイド全体で使用する用語があり、説明に役立つ場合があります...

フォントと書体

フォントと書体という用語はしばしば同じ意味で使用されますが、実際には別のものです。 NS 書体 フォントのファミリーです。 NS 作る その家族内の個々のスタイルのバリエーションの1つです。つまり、Times New Romanは書体であり、Times New RomanRegularとTimesNew Roman MediumItalicはフォントです。



ps4コントローラーがps4に接続されていません

タイプ分類

タイプ分類は、外観に基づくフォントのカテゴリです。いくつかの分類が含まれます:

  • セリフ
  • サンセリフ
  • ゴシック
  • タイプライター
  • 脚本
  • 装飾

これらは、さまざまなタイプのWebサイト、ファウンドリなどで見つかるタイプのカテゴリにすぎません。フォントを選択するための良い出発点は、プロジェクトとその主題に適した分類を選択することです。





セリフ対。サンセリフ

書体の最も一般的な分類の1つは、セリフとサンセリフです。違いがわかりませんか?セリフフォントは、文字の先端に細い線があります。サンセリフフォントには拡張機能はありません。

スーパーファミリー

スーパーファミリーは、いくつかの分類に分類される書体のグループです。書体は同じ基本形状で始まり、特定の分類に合うように要素が追加されます。スーパーファミリーの一般的な例は グロススーパーファミリー





また、フォントの技術的な側面に興味がある場合は、 OTFフォントとTTFフォントの違い

最初の書体の選択

一部の書体は、人生の目的が1つしかないように見えるため、物事が少し簡単になります。コッパープレートゴシックを検討している場合は、おそらくステーキハウスのメニューか銀行と関係のあるものを設計しているでしょう。

残念ながら、それほど簡単なことはめったにありません。適切な候補を見つけるのに問題がある場合は、少し調査することを検討してください。正しい方向を示すのに役立つ例を探してください。

コピーするのではなく、インスピレーションを求めていることを忘れないでください。誰かが以前にこの問題を解決したことがある可能性があり、彼らの解決策はあなたに知らせるのに役立つ可能性があります。

その最初の書体を選択したら、その補足について考える時が来ました。

フォントペアリングの選択

どのフォントがうまくペアリングされているかを理解するためのガイドラインはたくさんあります。これらのガイドラインのいくつかは組み合わせることができ、他のガイドラインは互いに矛盾しています。

フォントのペアリングに関しては絶対に避けなければならないことがいくつかありますが(フォントの数が多すぎるなど)、より柔軟で、デザインの雰囲気や目的に大きく依存するガイドラインもあります。

ここに覚えておくべきいくつかがあります。

1.コントラストを作成します

フォントに関しては、「反対の魅力」は間違いなく真実です。あまりにも類似しているオプションを使用したくありません。デザインに何も追加されないか、少し見栄えが悪くなります。

代わりに、渦巻き状のフォントと太字のフォントを組み合わせてください。軽くて風通しの良いフォントと太いフォントを組み合わせます。エレガントで筆記体のオプションを使用して、セリフ書体を上に接続します。スラブセリフと 手書きフォント 、上記の例のように。

または、狭いフォントと広いフォントを組み合わせます---カッパープレートに適したフォントの組み合わせは、HelveticaCondensedのように薄いものです。

2.家族でそれを保つ

最も簡単な方法の1つは、選択肢を1つの書体に限定し、サイズ、太さ、または傾斜を変更してフォントを変更することです。これは最もクリエイティブな選択ではないかもしれませんが、テキストに少し多様性を持たせるための最も簡単な方法です。

一部の書体には、かなり広範なフォントのセットがあります。 ベバの新しいもの たとえば、さまざまな重みがあります。 Bebas NeueBoldとBebasNeue Lightをさまざまなサイズで組み合わせると、優れたデザインに一歩近づくことができます。

Bebas Neueは大文字のみの書体ですが、デザインに興味を持たせる方法として、大文字で遊ぶこともできます。

もう少し多様性が必要であるが、それを家族に留めておくことはあなたにとって最も効果的であることがわかった場合は、スーパーファミリーを探してください。 NS グロススーパーファミリー Sans、Serif、Typewriter Sans、Typewriter Serif、Math、およびその他の書体が含まれます。

3.セリフとサンセリフを組み合わせる

コントラストを作成するための迅速で効果的な方法は、セリフフォントとサンセリフフォントをペアにすることです。以下の例でわかるように、Calibriフォントの適切な組み合わせは、Times NewRomanのようなセリフフォントです。

補完的なセリフとサンセリフのオプションを選択する最も簡単な方法の1つは、それをスーパーファミリーに保持することです。 Vigetは提供します スーパーファミリーの広範なリスト これは便利で、フォントが相互に補完し合うことを保証します。

4.自分を2つまたは3つのフォントに制限する

このタイポグラフィの基本的なルールに従わないプロのデザイナーを見つけるのは難しいでしょう。フォントを組み合わせる場合は、2つまたは3つに制限する必要があります。

デザインにヘッダー、サブヘッダー、本文が含まれている場合は、3つの異なるフォントを使用できます。デザインのテキスト量が少ない場合は、2つだけに固執することをお勧めします。

ルールには例外がありますが、それは非常に特定の種類のデザインに限られます。

フォントペアリングのインスピレーションとアイデア

最後に、フォントのペアリングのアイデアがまだ気が遠くなる場合は、小さなCalibriがひどい群衆で実行されないようにするのに役立つフォントペアリングツールがたくさんあります。

Canvaのフォントの組み合わせ

Canvaのフォントの組み合わせ あなたはあなたの最初の選択肢を選択し、そのパートナーがどうあるべきかについての提案をすることができます。 Canvaデザインツールで利用できるフォントを使用しているため、一部の一般的な書体は含まれていません。

Typ.io

NS Typ.io ウェブサイトは2つのセクションに分かれています。最初のセクションの機能 フォントの組み合わせ インスピレーションの源としてウェブの周りから。他のセクションの機能 フォントのリスト ヘッダーテキストと本文テキストのどちらに使用するかなど、機能に基づいて適切にペアリングします。

ジャストマイタイプ

アドビの一連のプログラムでデザインしていることに気付いた場合は、 ジャストマイタイプ とても重宝します。このサイトでは、Adobeのペアリングの提案を提供しています Typekitフォント Hoefler andCo'sからも クラウドタイポグラフィサービス

Hoefler and Co.には、ピッキングに関する非常に便利なガイドもあります。 パレットを作る '彼らは、同じ歴史的時代のフォントを異なる機能で組み合わせたり、同様の線品質で異なるテクスチャを組み合わせたりすることを推奨しています。フォントの提案はHoeflerand Co.からのものですが、他のフォントにもルールを適用できます。

Pinterest

ほとんどのビジュアルと同様に、Pinterestはフォントペアリングのインスピレーションの素晴らしい情報源です。 「フォントペアリング」または「タイポグラフィ」を検索するだけで、たくさんのすばらしい提案が見つかります。

タイプ接続

とフォントをペアリングするゲームを作る タイプ接続 。このウェブサイトでは、最初のフォントを選択できます。2番目のフォントを選択すると、「きみならどうする?」のようなものになります。

Netflixプロファイルを削除するにはどうすればよいですか

同じ家族、似たようなフォント、対照的なフォントから来たものを使いたいですか、それとも過去に浸りたいですか?

Googleタイプ

選択したフォントソースがGoogleFontsの場合、 Googleタイプ これらのフォントがどのようにうまく組み合わされるかについての素晴らしいインスピレーションの源です。このサイトは、イソップ寓話のテキストとUnsplashの写真を使用して、GoogleFontsがどのようにうまく連携するかを視覚的に示しています。

フォントペア は、Google Webフォントユーザーにとってもう1つの便利なツールであり、適切にペアになるヘッダーフォントと本文フォントの選択を提案します。

Typespiration

Typespiration フォントを組み合わせる方法だけでなく、適切な方法で配色を取り入れることもできます。サンプルは、特定の組み合わせを使用して記事がどのように見えるかを示しているため、Webデザインに特に適しています。

Webフォントブレンダー

Webフォントブレンダー 提案はしませんが、さまざまなGoogle Fontsを試して、サンプルの見出し、小見出し、本文でプレビューすることができます。ボーナスとして、オンラインデザインでこれらのフォントを使用するために必要なCSSを生成します。

適切なフォントを見つける

これで、プロジェクトのフォントを選択するときに何を探すべきかがわかりました。しかし、使用するフォントを見つけるのに最適な場所はどこですか?

私たちのガイド 最高のGoogleフォント ウェブサイトやプレゼンテーション用の素晴らしいフリーフォントを見つけるのに役立ちます。

さらに広い範囲から選択したい場合は、次のリストを確認してください。 フリーフォントをダウンロードして使用するのに最適なWeb​​サイト

画像クレジット:mrdoomits /

共有 共有 つぶやき Eメール キヤノン対ニコン:どちらのカメラブランドが優れていますか?

キヤノンとニコンは、カメラ業界で最も有名な2社です。しかし、どのブランドがより良いカメラとレンズのラインナップを提供していますか?

次を読む
関連トピック
  • クリエイティブ
  • フォント
  • タイポグラフィ
  • ウェブデザイン
  • グラフィックデザイン
著者について アンディベッツ(221件の記事が公開されました)

Andyは、テクノロジーについて15年間執筆している、元印刷ジャーナリスト兼雑誌編集者です。その間、彼は数え切れないほどの出版物に貢献し、大規模なテクノロジー企業のためにコピーライティングの仕事を生み出してきました。彼はまた、メディアに専門家のコメントを提供し、業界のイベントでパネルを主催しました。

AndyBettsのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください