チュートリアル記事

初級

5 分

ガイド:フォントの組み合わせ

フォントの種類と、それらを統一感のあるデザインで組み合わせる方法について説明します。

必要なもの

概要

Adobe Expressでプロジェクトを作成する場合、おそらくメッセージにタイポグラフィを活用するでしょう。文字によって伝えたいことをうまく表現するには、プロジェクトを最もよく表現するものが何かをよく考える必要があります。そして、それをもとにして判断や選択をおこないます。そこでは、フォントが重要な要素となります。このガイドでは、プロジェクト用のフォントを選択する際に役立ついくつかの基礎知識について説明します。

フォントの種類を使い分けて魅力を高める

プロジェクトをよく考えて、それに適したフォントの種類を見つけることが重要です。そのためには、どのような感情や美しさを生み出したいかを考える必要があります。主なフォントの種類およびそれぞれのカテゴリーを基に検討することが、より魅力的な表現を追求するためのひとつのアプローチです。その概要を簡単にご紹介します。

セリフフォント

セリフフォントは、文字から小さな線またはペンストロークが伸びている書体です。これらの線によって文字が個性的になるだけでなく、読みやすさも向上します。多くの場合、このフォントファミリーは洗練さ、優雅さ、伝統といった雰囲気を伝えることができます。セリフフォントは、歴史や組織の名声などの印象を与えるのに役立ちます。

サンセリフフォント

サンセリフフォントとは、セリフのないフォントのことです。セリフの装飾がなくなることで、鮮明でくっきりとしたミニマリズムの印象を与えるのに役立ちます。また、シンプルなフォントなので、目立つ特徴的なフォントと特に組み合わせやすくなります。これらの書体は、より現代的な連想を与え、幅広い用途に使えます。

スラブセリフフォント

スラブセリフとは、正確にはセリフが厚くブロック状になったセリフフォントのことで、通常は線幅がほぼ均一になります。つまり、線の太さや幅が変わりません。これにより、伝統的なセリフにはない安定感とインパクトが生まれます。このような性質から、スラブセリフは見出しやディスプレイでの使用に特に適していますが、歴史的には本文や記事のコピーでも重要な役割を果たしてきました。

スクリプトフォント

スクリプトフォントは手書きを模倣したものですが、カジュアルなものからフォーマルなものまで様々です。通常、フォーマルな筆記体は装飾とカールが多く、エレガントな印象を与えますが、読みやすさは低下します。一方、カジュアルスクリプトはより落ち着いていて、親しみやすく、読みやすいフォントです。

ディスプレイフォント

デコラティブフォントまたはディスプレイフォントは、ユニークで注目を集めるフォントです。幅広いイメージの範囲を持ちますが、その特徴は視覚的な面白さと独創性にあります。これらの書体は本文テキストとしては読みにくいので、一般的には最重要なテキスト要素として使用します。このことを念頭に置いて、ディスプレイフォントは控えめに、意図をもって使用する必要があります。

これらの一般的なカテゴリー内には、検討すべき視覚的バリエーションが多数あります。また、カテゴリー間に美的性質やスタイルが存在する場合ももちろんあります。例えば、セリフフォントとサンセリフフォントのどちらかを使用すれば、鮮明でクラシックな見た目を実現できます。人々は、自分の経験や文化を自然に連想するものです。特に特定の書体が特定の用途向けに設計されたことを考えると、歴史的背景による連想もあります。このような主観的事実にうまく対処するには、オーディエンスのことを知り、自分の選択したデザインがどのように受け取られるかを理解することが最も重要です。

デザインの原則を参照

より良いデザイン上の選択となるようにフォントを組み合わせるには、デザインの原則 [link out] に注意することも役立ちます。

まず、強調と階層について考えてみましょう。ほとんどの場合、ヘッダーや最重要なテキスト要素は、組み合わせるフォントの中でより目立つようにする必要があります。つまり、最も重要な情報やトップレベルの情報を含むその箇所に最初に目が行くようにする必要があります。ヘッダーのフォントをより強調すれば、すぐにそこに目が行くようになるでしょう。より特徴的なフォントを選択し、重みを加え、太字や斜体にすれば強調することができます。ほとんどの場合、補助的なテキストには比較的落ち着いたフォントを選択します。重要性の低い情報、より多くのコンテキスト、詳細などを記載するためです。また、このフォントでは読みやすさを重視することも重要です。

デザイン原則を考慮したフォントの組み合わせを採用するデザインの例では、より視覚的に魅力を高める方法がとられているものもあります。どちらのフォントもサンセリフですが、ヘッダーに使用されているGravesend Sans Boldは、その太さと大文字小文字(すべて大文字)によって区別され、強調されています。フォントの組み合わせの中でタイトルセクションを強調し、トップレベルの情報に注目を集めることによって、階層も示されています。

フォントを組み合わせる際には、バランス、比率、コントラストに注目することが重要です。このケースでは、フォントの組み合わせとデザイン全体のニュアンスが異なっているので、バランスと比率が密接に結び付いています。比率は、バランスを生み出す上で重要な要素となります。

バランスを求めましょう。各フォントは釣り合いが取れていますか?一方の重みがもう一方の軽さに反映されていますか?ここでは、大文字小文字の区別がバランス調整に役立つことがあります。すべて大文字のフォントまたはすべて小文字のフォントを使用すると、意味のあるアシンメトリーを生み出すことができる場合があります。

比率をうまく利用しましょう。補助的なテキストの比率は、最重要なテキストに釣り合っていますか?サイズと太さの違いは理にかなっていますか?文字の高さと幅を検討することもできます。

この例では、太い文字を使ったタイトルセクションの重みを、比較的軽い本文テキストによって調和させています。Aviano Future Heavyがすべて大文字であることも、アシンメトリーなバランスをさらに強調しています。ある程度のバランスは、スケールと比率の観点からおこなう選択によって実現されます。

類似性という点では、同じファミリーのフォントを採用することで連続性が得られます。また、組み合わせるフォント間で文字(「a」や「g」など)が同じになるようにすれば、より意図的なデザインを実現できます。例えば、オープンテール型とループテール型の「g」が混ざっているデザインは、雑に見えてしまうおそれがあります。

この例では、比較的カジュアルな手書きのヘッダーが、サンセリフの本文テキストと意味のあるコントラストになっており、タイトルと本文テキストの区別が際立っています。また、同じオープンテール型の「g」の文字を使用することで類似性を生み出し、連続性が保たれているので、コントラストが乱雑になっていません。

もう一方にあるのはコントラストの役割です。各書体は意味のあるコントラストになっていますか?各フォントの特徴によって見分けがつきますか?ここでは、サイズ、重み、色、間隔、スタイルがすべて要因となり得ます。コントラストのスペクトルを、似すぎていて混乱してしまうケースから、まとまりがなくなるほどハイコントラストなケースまで考えたときに、一方の側に偏りすぎないようにすることが重要です。

最後に、フォントがどれほど調和しているかを評価するには、常に統一性に注目しましょう。コントラストが大きくても、互いに補完し合って全体のまとまりに貢献している必要があります。このステップを完了すれば、すぐに公開できる調和のとれたフォントの組み合わせを実現することができるでしょう。


プレゼンター

Adobe Express

2024年2月9日

Adobe Express でこれらのチュートリアルをお試しください

Web ページ、SNS 用画像、動画を作成