お勧めのフリーフォントの組み合わせ30選

The-ultimate-guide-to-font-pairing_featured-image

優れたデザインには優れたフォントが不可欠です。しかしそうしたフォントを選ぶことはまさに暗中模索の作業のようなもの。この記事では、優れたフォントを選ぶためのいくつかの考え方を紹介した後、実際の素晴らしいフォントの組み合わせをご紹介します。

以下のフォントは、あなたの次のプレゼンやSNSでの宣伝、その他あらゆるデザインに使えるフォントばかりです。もちろんすべては無料で使えます。

タイポグラフィについて知る

フォントの組み合わせ30選を見る前に、2つのことを予め頭に入れておきましょう。

まずひとつは、以下の画像です。これは、あるフォントが、高さなどにおいてどのような見た目上の特徴を持っているかを示しています。

もうひとつは、フォントに関する専門用語の数々です。

ぜひ覚えておきたい30のフォントの組み合わせ

以下、発行媒体や内容ごとに、最も美しく見えるフォントの組み合わせを30組紹介します。

01. 発行物

League Spartanは力強く幾何学的な形のモダンなフォントで、よりエレガントかつトラディショナルなLibre Baskervilleに対して強いコントラストを放ちます。

発行物では、コラムを用いてテキストを設置すると見栄えが良くなります。より一文が短い方が読みやすいので、テキストスペースの横幅は削減するようにすると良いでしょう。

02. レジュメ

Julias Sans Oneはストロークがはっきりとしていて、ベースラインが広いため見出しに最適です。これはArchivo Narrowの男性的かつ幾何学的なスタイルと調和を取りやすく、合わせて用いることで非常に読みやすい見た目となります。

レジュメ(履歴書)やフォーマルなドキュメントではフォントが重視されることがあまりないため、味気ない物になりがちです。しかしクリーンでかつ読みやすいフォントを組み合わせて用いることでヒエラルキーを生成すれば、メッセージの伝わりやすさもぐんとアップします。

03. スポーツ・アクティブ

太く丸い形のフォントと身軽で強い印象を与えるフォントのミックスも優れた組み合わせであると言えます。例えば、太い線のArchivo Blackを用いると強いインパクトが感じられ、メッセージに男性っぽさが生まれます。以下の例では、Archivo Narrowがコピー部分に用いられています。

このポスターでは、見出し部分が背景と同化しないように色を変えて配置されています。このようにデザインのビジュアル面におけるテクニックを意識することはとても重要なことです。この場合は全体の見出しの隣にバレーダンサーを配置することで、全体としての物語性を演出しています。

04. 電子書籍

全体で用いているフォントの種類がひとつであっても問題はありません。例えばLibre Baskervilleは同じスタイルに複数の種類を持つため、デザインを複雑にすることなく微妙なニュアンスをスマートに表現できるのです。このフォントは昔からあるserifタイプのフォントで、見出しにも、読みやすいボディコピーにも用いられるものです。

実際にLibre Baskervilleの複数の種類を使い分けることで完成されている例を見ると、その素晴らしさが分かるでしょう。イタリックにしたり太字にするだけで、綺麗な使い分けが可能です。

05. ファッション小売店

Bebas Neueはデザインの世界で人気の高いフォントです。くっきりとして見えやすい形は、見出しに用いるのに最適だからです。これに対して、丸く細いフォントを用いればコントラストが利いたデザインにすることが可能で、Montserratはそんなフォントのうちのひとつと言えます。

このフォントの組み合わせは幾何学的な形を伴っているため、例えば例のように全体の横幅を合わせて表示すると非常に綺麗な見た目となります。以下の例では、Season saleの線とそれぞれのコピーの横幅が調節されています。

06. 洗練された印象のもの

劇的な効果を狙うなら複数のフォントを使う必要はありません。同じ種類のフォントの通常体と太字体を使い分けるだけでも様々な効果を狙うことができます。Loraは綺麗なカーブが特徴で、非常にエレガントかつ洗練された印象を与えるフォントです。このフォントの通常体とイタリックを合わせて使うコンビネーションはチャーミングで女性的な印象になります。

どこにテキストを置くかということはよく考えなくてはいけません。以下の例では、つぼみをアップすることでそこにテキストを配置し、ボディコピーは花びらの色の濃い部分に来ているためフォント色を白にしていますが、見出しや小見出しについては花の色に近い色になっています。右側に引かれた線は文章全体の収まりを良くする効果があり、ささやかながら優れた配置と言えます。

07. フロントページ

Open Sans Extra BoldCopper Hewittの組み合わせは発行物の際に見た組み合わせと似ています。注意を引く優れた見出しのフォントと、それに続いて小見出しを作ったりボディコピーを書くためのフォントの組み合わせであると言えます。

これらのフォントは要点を伝えるのに最適です。また、細字のCooper Hewittを小見出しとし、PT Sansを本文に使うとコントラストができ、読みやすくなります。どちらのフォントもバランスが良くくっきりとした見た目ですため、印象に残りやすい組み合わせです。

08. テクノロジー

Roboto Condensedはsans serifに属するフォントで、その読む際の独特のリズムのためにボディコピーとして重宝するフォントです。一方、太字で用いれば、見出しにも充分用いることのできるフォントでもあります。このフォントは少し背が高めであることもあり、全体としてくっきりして見える印象は更に強まります。

ところで、見出しと小見出しは必ずしも見出しが先というような順番でなくても良いのです。以下の例のように、大きな見出しの上の文と下の文の間に小見出しを配置するというのも面白いでしょう。

09. アートギャラリー

アーチやカーブが強いCooper Hewwitはクラシックなフォントで、いくつものバリエーションがあり、見出しや小見出し、ボディコピーなどに合わせて用いることが可能です。

背景画像に幾何学的あるいはコントラストが利かせられそうなスペースがあれば、そこにテキストを置いてみると良いでしょう。画像全体を少し暗くすれば、視認性も向上します。

10. 招待状やイベント

Playfair Displayはウェディングやイベントの招待のデザインに用いるのに適したフォントです。これの少し重いバージョンがPlayfair Display Blackで、Playfair Displayのイタリックと合わせて用いることで美しいヒエラルキーを形成することができます。

フォントを用いる際にはその色はとても重要です。例えば以下では、背景画像に空を用いていてそれが明るいのを、フォントの強さを弱める効果のために利用しています。

11. 工業製品

Norwesterは、注意を引く幾何学的フォントで、見出しによく用いられます。これとの組み合わせでKollektifMonstserratを用いれば、構造的かつ幾何学的な美しさが得られます。

そのデザインを見る人の視覚に何を訴えたいのかを考えることが重要です。例えばこのフォントの組み合わせを用いれば、商品の物理的な頑丈さや力強さを表現することができるでしょう。

12. ライフスタイルの雑誌

Source Sans ProSource Serif Proはペアで用いることを前提として作られたフォントであり、合わせて用いれば素晴らしいハーモニーを生み出してくれます。

グリッドを用いることで、クリーンでよく整えられた印象の配置を実現することができます。これにより全体の調和が取れ、かつヒエラルキーも形成することができるのです。この時、画像の色と一致した色のフォントを用いることで、全体に一貫性が生まれ、整った印象になります。

13. バイクショップ

Yellowtailは太い筆で筆記体を書いたようなフォントです。これと対照的にOpen Sans BoldOpen Sans lightはよりベーシックなフォントで、組み合わせることで全体の調和が取れるのです。

筆記体のフォントは、短く、時に少し派手な見出しに用いられます。ここで文字を入れすぎると読みにくくなってしまいますので注意しましょう。こうした筆記体のフォントのちょっとした傾きを最大限に生かすには、文字全体を少し傾けると良いでしょう。

注意:テキストを配置する場所は自然な位置にすること。ディセンダー(yやgの下の部分)が自然に空いたスペースに入るようでなければならない。

14. 展覧会

Ralewayの丸さはRoboto Condensedのくっきりとした見た目と用いられることで美しい調和を生み出します。適切な重さの小見出しを付けることで、全体として重く感じられる見出しの印象を少し軽くすることができます。

ひとつのフォントを複数の太さで用いることで、ヒエラルキーを形成し、微妙なニュアンスを伝えることもできます。背景画像に一致した色を差し色として入れれば、見た人にも何がテーマなのか伝わりやすくなるでしょう。

15. 地中海的なもの(健康食など)

Cinzelは現代風のフォントであるとされていますが、実際にはクラシックなローマ文字に着想を得たフォントで、繊細なストロークを持つQuattrocentoLoraと合わせて用いると見出しや招待状などにぴったりの組み合わせになります。

この組み合わせは比較的以前からあるもので、見たことがあるという人もいるでしょう。高さや幅を近づけることで、全体として調和の取れたデザインである印象を与えることができます。

16. フォームや機能的なもの

Oswaldはウェブで用いられることを意図してデザインされたフォントで、あらゆるデジタルスクリーンで綺麗に表示されるフォントです。Montserrat LightCooper Hewittとは非常に読みやすい組み合わせになります。

Oswaldのようなフォントの性質をより高めるには、テキストの背景にコントラストが利いた色を用いると良いでしょう。これによりテキストが目立つようになるばかりでなく、見出し、小見出し、ボディコピーのヒエラルキーも強調されます。この時、テキストのブロックには注意するようにしましょう。明度の低い画像と一緒に白黒の要素を上手に配置することで、強力なモノクロームの効果が得られます。

17. 年次レポート

レポートという媒介においては複雑なフォントの組み合わせは避けるべきですが、それならばCooper Hewitt ThinAileron Thinを組み合わせて使うと良いでしょう。細字のフォントを見出しに使うのは気が引けるかもしれませんが、構造と体系を強調する上で細身のフォントを用いるのは効果的な方法のうちのひとつです。

細身のフォントを用いるときには読みやすさが損なわれていないかどうか注意しなければなりません。単色の上に配置すれば、コントラストが利いて文字が浮き、読みやすくなります。

注意:細身のフォントには印象が弱くなってしまうリスクがあるため、濃い色を用いたり要素を追加したりすることで、デザインに力強さを加えることができます。

18. 芸術やオブジェクトを用いたデザイン

Kollektifは幾何学的フォントのクリーンなスタイルに対抗して作られたフォントで、丸く力強いフォントはウェブでも紙媒体でも使いやすいと言えます。Gidoleは細身でくっきりとした見た目であるため、これと強い対称性を生み出すのです。

フォントを選ぶときに重要なのはあなたがそのフォントを好きかどうかでなく、そのフォントを用いたときにコピーがどのような見た目になるかということです。例えばgのディセンダーや、kとoが並んだときにkの右の部分にoが入るようになるかどうか、iの上の点などをチェックすることで、何らかのニュアンスを伝えたり他の要素とのコントラストを利かせたりすることができます。

19. ファッション誌

Bodoniは雑誌の見出しに古くから用いられているフォントとして知られています。Massimo Vignelliは「Bodoniは最もエレガントなフォントのうちのひとつだ」としており、BodoniとMontserratを組み合わせると洗練されたコンテンポラリーな印象になります。

背景画像の中にテキストを配置するスペースを作るのはクレバーなテクニックです。この時には、テキストの色を背景とコントラストが利くような色にすることに注意してください。画像の中に要素が多いと、テキストが見えにくくなる場合があります。

20. 冒険

Merriweatherはウェブデザインのために作られた、印刷物には向かないフォントです。太字と通常体を組み合わせて用いることで、読みやすくクラシックな美を実現できます。

ルールは破るためにあると言うとおり、以下のサイジングや組み合わせが絶対だと考える必要はありません。要素の配置とスタイルのバリアントについて常にクリエイティブであることは、特にヒエラルキーや全体のスタイルを構成するコンセプトデザインにおいて重要です。

21. 一般的な雑誌など

League GothicはArchivo Narrowによく似た、他よりも目立つはっきりとした見た目のフォントですが、同時にKollektifのような丸い形に対して強いコントラストを形成するため、見出しとボディコピーをはっきりと区別して表現することが可能です。

全体の形、写真や要素の配置を見た目に面白くすることが重要です。デザインの要素において色は特に重要で、以下の例では明度の低い写真とのコントラストを形成しながら、タイトルを生き生きとしたものにしています。タイトルの下に引かれた太線はアンカーとして機能し、タイトルとコピー部分を分ける役割も担っています。更に導入部分のHOARDERS REJOICEはタイトルのRETURNと横幅が完全に一致しており、視覚的に美しい調和を生み出しています。デザインをする上で要素の位置を揃えるというのが重要であることを忘れないでください。

22. ウェブデザイン

比較的新しいフォントであるLatoは、ウェブデザインのユーザーインターフェイスに用いるのに非常に向いています。Latoのやや丸みを帯びたような文字には暖かさがありますが、これは通常のウェブフォントでは見られないものです。しかしそれと同時に、その力強い形により、安定感やかすかな力強さも演出できるのです。

豆知識:Latoはポーランド語で『夏』を意味する。Latoの制作者は、「男も女も、真剣に、しかしフレンドリーに、夏のように」という思いを込めてLatoを作成したという。

23. 金融関係の広告

フォントを選ぶということは『言葉を語らせるもの』を選ぶということであり、コンテンツに適したフォントを選ぶことはとても重要です。このAlfa Slab OneとCoustard、Nixie Oneの組み合わせには、よりオーガニックな美が宿っており、それぞれのフォントの太さは優れたコントラストを生み出します。

これらのフォントは男性的で太く、強さや信頼感と関連するブランドに用いると効果的です。この時、ブランドや会社の意味合いを強める色を用いることが重要です。以下の例では、赤と青の色の組み合わせで商品とフォントを関連づけています。

24. ホテル

コンテンポラリーな、アール・デコに着想を得た組み合わせで、幾何学的フォントがコントラストを利かせながら互いを補完しています。Sifonnは力強いフォントで、見出しに理想的である一方、ボディコピーには向いていません。これをBebas Neueといったフォントと組み合わせると強いコントラストが生まれ、見出しと小見出しで視覚的な調和を取ることができます。

この組み合わせは要素が多い写真のグリッドと共に用いられるのが一般的です。その場合の画像はグリッド内にぶつ切りに配置され、テキストは最も色の濃い画像に配置、その画像に合わせた色などが用いられます。

25. カクテルバー

これは、細身のフォントを見出しに、より重いバージョンを小見出しとボディコピーに用いる例です。Montsrratはクリーンで整った、読みやすい形のフォントです。Montserrat Lightを見出しに用いると、全体的に優しい印象となります。

短く的を射たようなコピーや文章を加えることで、全体のテーマがより分かりやすくなります。特にここで用いるMontserratは非常に細いフォントであるため、あまり多くの文字を入れてのコピーは得策ではありません。全体として背景とテキストが充分にコントラストが利くようにして読みやすさが損なわれないようにすることも重要です。

26. レビュー

Source Sans ProはFranklin Gothicなどのフォントに影響を受けたフォントですが、より高さがあります。sans serifのフォントですが、serifフォントに影響を受けた、人間味のある絶妙なカーブ感を有しています。

Source Sans ProOpenSansもユーザーインターフェイスで用いることを想定されたフォントです。オンラインのニュースレターやレポートは読みやすいことが重要で、見出しや小見出し、ボディコピーも一目でそれと分かりやすいことが大切です。これにより、読み手は自分の読みたいところを一瞬で把握することができるのです。

27. 映画

Six Capsは、はっきりとした、文字と文字の間が詰まっているフォントで、見出しに最適のフォントです。Archivo Narrowと組み合わせて用いると、60年代を思い起こさせるようなスタイルになります。更にSource Sans Proと比較してもそれぞれが際立っていることから、情報が重要である順番に伝わりやすくなっています。

テキストとテキストの間に線を引いたり文字を揃えて配置したりすることで、全体として分かりやすく力強い印象になり、少ない文量のテキストでも揃った印象となります。

28. 製造

sans serifの組み合わせです。Antonは、力強く幾何学的な形で人々の目を引くようデザインされた、広告によく用いられていたフォントの改良版です。よりインパクトを強めるためには、Open Sans Lightと用いることでビジュアル的に強いコントラストを生成するのが良いでしょう。

29. パティシエ

Sacramentoは見出しに最適の筆記体フォントです。ただし、装飾的で文字と文字が繋がるストロークのため、あまり多くの文字を使うと読みにくくなります。このフォントと合わせて用いるのが推奨されるのはMontserrat Lightで、スタイルとしてはコントラストを利かせながら文字の太さは似せることができます。

この組み合わせは非常にモダンで女性的であるため、お菓子やスイーツなどと一緒に用いると良いでしょう。

30. モダンクラシック

Aileronは読みやすく機能的なフォントで、様々な太さで用いることで、一貫した印象のクリーンな印象になります。この組み合わせはあらゆるフォーマルなマーケティングや、文字数の多いドキュメントにも最適です。

フォントの秘密:このフォントはHelveticaをイメージして作られていますが、そのよりカーブが掛かったバージョンと言えます。

エレガントなserifのフォントを選ぶにしても、よりモダンでコンテンポラリーなフォントを選ぶにしても、あなたが選ぶフォントはブランドの顔になるということを念頭に置かなければなりません。フォントの正しい組み合わせはコンテンツを読みやすくするだけでなく、オーディエンスにより適切にメッセージを伝えることにも繋がります。

必要な視覚的要素を組み合わせることで、ブランドにパーソナリティのようなものを付与することができます。したがって、フォントを慎重に選ぶというのはブランドを作り上げていく上で非常に重要なステップであると言えるのです。この記事が、あなたが素晴らしいフォントの組み合わせを見つける一助となれば幸いです。

関連記事

すべて表示

Group 3 (3) (1)

アイディアを形に

もっとも簡単なデザイン作成サービス