Webデザイナーのための10のトップフォントペアリングツール

公開: 2021-02-24

適切な書体を選択することは、間違いなく優れたデザインを作成するための重要なステップです。特に、複数のフォントを使用する場合は、それらが一貫性とバランスでうまく調和していることを確認する必要があります。

ブログ投稿「Webデザイナーのためのフォントペアリングガイド+30のすばらしい例」で詳しく説明したように、フォントをペアリングすることには科学があります。彼らはあなたのブランドとうまく調和し、反対のデザイン原則に従わずに望ましいコントラストを作り、そして全体的な流動性と調和の感覚を作り出す必要があります。

何千ものフォントを自由に使用できるため、このプロセスは非常に混沌とし、時間がかかる可能性があり、頭痛の種になる可能性があります。それで、どこから始めますか？

プロセスを支援するために、デザイナーに最適なフォントペアリングツールのリストをまとめました。これらのツールは、互いに見栄えのするさまざまなフォントの組み合わせを提案し、オンラインテンプレートを提供するため、フォントが実際にどのように表示されるかをプレビューできます。彼らは間違いなくあなたのインスピレーションを解き放ち、あなたが正しい決断をするのを助けます。

以下でそれらをチェックして、お気に入りをブックマークしてください！

1.Fontjoy

ほとんどのフォントペアリングツールは、厳選されたコレクションまたはフォントペアをプレビューし、どちらが最も効果的かを判断するのに役立つツールを提供します。一方、Fontjoyは、人工知能を使用して、すべてのハードワークを実行します。デザイナー兼エンジニアのJackQiaoによって作成されたこのツールは、ディープラーニング技術を使用して、フォントの主要な視覚的特徴を分析し、どのフォントが最も効果的に機能するかを計算します。

つまり、バランスの取れたフォントペアを作成するために、高度なデザイナースキルは必要ありません。「生成」ボタンを押すだけで、いくつかの素晴らしいフォントの組み合わせを閲覧できます。または、フォントを選択すると、システムは選択したフォントとうまく機能する可能性のある組み合わせを考え出します。最大3つのフォントをペアリングできます。1つは見出し用、1つは小見出し用、もう1つはメインコンテンツまたは段落用で、暗い背景または明るい背景のいずれかでプレビューできます。

2.「接続」と入力します

フォントのペアリングを練習し、フォントがどのように連携するかを学ぶための風変わりで楽しいツールを探しているなら、あなたはそれを見つけました！ Type Connectionは、Aura Weinerによって論文プロジェクトとして作成され、「活版印刷のデートゲーム」と表現されています。そしてそれは本当にです！

あなたはあなたが完璧にマッチしたいメインタイプの「主人公」を選ぶことから始めます。 2番目のステップでは、可能なデート戦略が提示されます。それぞれの戦略は、類似したフォントの選択や別のフォントの探索など、フォントペアリングのさまざまな戦略に基づいています。戦略を選択すると、Type Connectionは、選択したフォントの潜在的な「日付」を提案します。

これらの「日付」のそれぞれがシステムによって分析および評価された後、この一致が悪い、中程度、または素晴らしいかどうか、およびその理由についてのフィードバックが得られます。

私が個人的に好きなディテール？各フォントには、その「個性」に一致する小さな説明が付いています。全体として、Type Connectionは、フォントの組み合わせを調べ、その原理を理解するための優れた教育ツールです。

3.タイプミス

Typothequeは、スタイルと使用方法に基づいてフォントの組み合わせを見つけるための独自の方法を提供します。スタイル、目的、カテゴリ、サポートされている言語など、検索結果を絞り込むのに役立つ多数のフィルターにアクセスできます。これは、フォントの組み合わせをフィルタリングするのに役立ちます。

さらに実験したい場合は、Font Combinatorと単純なドラッグアンドドロップ書体を使用して、どのように表示されるかを確認できます。完璧なバランスが見つかるまで、サイズスライダーを使用して各フォントのサイズを修正してください。

4.Googleタイプ

Google Typeと呼ばれるこの共同で進行中のプロジェクトは、GoogleFontsの見栄えの良い組み合わせを使用してインスピレーションを提供します。 Aesop's Fablesのパッセージを表示するためにフォントのペアリングを使用して、フォントのペアリングを紹介するには、見事に目を引くアプローチが必要です。すべてのデザイナーがこのプロジェクトに貢献でき、受賞した組み合わせを使用して美しいランディングページを作成します。

このウェブサイトの最も良いところは、フォントの組み合わせがどれだけうまく表現されているかです。各セクションは特定のフォントペア専用であり、さまざまな方向、配置、スタイルに従ってその個性を強調しています。また、体験を強調するための背景画像も取得します。全体として、Google Typeは、すばらしいフォントペアを探索するだけでなく、Webサイトでのレイアウト、カラーパレット、タイポグラフィのクリエイティブな使用法のインスピレーションを得るための優れたツールです。

5.フォントペア

利用可能なGoogleフォントの量に圧倒されている場合は、それらを美しい組み合わせに絞り込むツールがまさに必要なものです。 FontPairは、人々が無料のオープンソースフォントをペアリングできるようにする方法としてHayden Millsによって開始され、現在も毎週更新されています。

インスピレーションを高め、次のプロジェクトに最適なフォントを見つけるのに役立つ素晴らしい例の膨大なコレクションをホストしています。各ペアには、一緒に使用されているこれらのフォントの実際の例のセットが付属しているため、美しく組み合わせられたペアを閲覧したり、フォントをダウンロードしたり、実際の動作を確認したりすることもできます。さらに、セリフフォントを使用した表示など、特定のペアリングタイプを探している場合は、必要になる可能性のあるほとんどの組み合わせに個別のカテゴリがあります。

6. Typ.io

Typ.ioの優れている点は、既存の適切に設計されたWebサイトと、それらが使用するタイポグラフィに飛び込むことで、美しいフォントのペアを見つけることです。ホームページでは、さまざまなフォントを活用したサイトのショーケースからインスピレーションを得ることができます。

特定のフォントをペアリングする場合は、そのフォントを検索して選択し、それ自体で、または他のフォントと組み合わせて、どのように美しく使用されているかの例を確認できます。各フォントペアには、フォントの特性またはそのスタイルと個性を説明する一連のタグが付属しています。さらに、「ヘッダーとコンテンツの両方のセリフフォント」など、条件に一致する可能性のある事前定義されたフォントのリストを調べることができます。

7. Canva

Canvaは、優れたデザインの作成に役立つさまざまな高度な機能とテンプレートを提供する、有名な強力なデザインアプリです。しかし、フォントの組み合わせにも使用できることをご存知ですか？

Canvaのジェネレーターを使用すると、目的のフォントを選択してから、独自のコピーを使用できるさまざまな組み合わせオプションを生成できます。また、実際に使用されているフォントペアの例もあります。

8.ミックスフォント

Mixfontは、数十万のフォントペアを視覚化する簡単な方法を提供するため、プロジェクトに最適なものを見つけることができます。専用のボタンが付いており、クリックして新しいフォントの組み合わせを生成できます。特定のフォントの書体が気に入った場合は、それを「ロック」して、ジェネレーターに他のフォントを交換させて、適切な組み合わせを見つけることができます。

ただし、すべての組み合わせが適切にキュレートされ、視覚的にバランスが取れているわけではないため、組み合わせを成功させるには、少なくともいくつかの基本的なフォントペアリングスキルが必要です。

9.タイプウルフ

Typewolfは、ゴージャスなタイポグラフィのもう1つの優れたセレクションと、Web全体の例を組み合わせて、人気のあるフォントのセレクション、その日のサイト、および理想的な一致を見つけるのに役立つさまざまな推奨事項を提供します。

ほとんどのフォントペアリングプラットフォームと同様に、特定のフォントを選択して、選択内容とうまく調和する他のフォントの多数の提案を見ることができます。これらはすべてWebの実際の例に基づいています。さらに、Googleフォント、Adobeフォント、およびその他のソースのフォントを使用して特定の外観を取得する方法を示す、既製のタイプペアリングパレットを備えた厳選されたルックブックを参照できます。

10.タイプスピレーション

Typespirationは、Rafal Tomalによって作成された素晴らしいツールであり、デザイナーが提供したフォントの組み合わせとカラーパレットを紹介しています。見出しフォントを指定して、さまざまな本文フォントの提案とどのようにブレンドされるかを確認するか、またはその逆を行うことができます。

または、両方のフィールドを指定せずに、可能なすべての組み合わせを参照することもできます。各例の下に、使用されたフォント、色の組み合わせ、さらにはプライマリボタンやセカンダリボタンなどの基本的なUI要素をダウンロードするためのリンクがあります。
現在、このツールはGoogleフォントライブラリにしかアクセスできませんが、将来的にはさらに多くのライブラリが追加される予定です。