2021年にトレンドの10 Awesome Google Font Combinations

Googleフォントから厳選した相性の良いトレンドフォントのリストとウェブサイトへのインストール方法

• 記事：Jason Beever
• 更新しました。 2020年1月2日
• Tags: タイポグラフィー、Webデザイン

かつてWebサイトのタイポグラフィは今よりも神秘的なデザインプラクティスであった。 かつて、Web ページをカスタム フォントで装飾する複雑なプロセスでは、フォント ファイルを変換して埋め込み、ユーザーのサーバーでホストする必要があり、利用可能なフォントの選択は、ユーザー自身のコレクションまたは標準のシステム フォント以外のタイポグラフィの知識に限られていました。 その結果、ほとんどの Web サイトは、コンテンツのフォーマットがほぼ同じで、使い古されたありふれた Web セーフ フォントに依存していました。

それが 2010 年に、Web サイトにカスタム フォントをはるかに簡単に実装できるオープンソース プロジェクト、Google Fonts がリリースされると、すべてが変わりました。 自分の Web サイトにこれらのフォントをインストールするのは、幸いにも迅速かつ簡単なプロセスですが、Google のライブラリにあるすべてのフォントの組み合わせがタイポグラフィの成功の秘訣ではないことに注意する必要があります。 しかし、正しいフォントの組み合わせと使い方を考慮すれば、高価なカスタマイズフォントを使わなくても、あなたのオンラインブランドは、プロフェッショナルで美しく、読者に親しみやすいものになります。 この記事では、その方法を紹介します。

A List of 10 Trending Google Font Combinations

Let’s get to it! 順不同で、現在トレンドになっているGoogle Fontの組み合わせベスト10を紹介します：

1. Open Sans Condensed + Open Sans

• Open Sans Condensed
• Open Sans

ここに、ほぼすべての用途にうまくいく、簡単な組み合わせがあります。 Open Sans は、Google Fonts の全コレクションの中でも最も汎用性の高いフォントの 1 つです。 大きなテキスト ブロックでも非常に読みやすく、また、見出しには十分に印象的です。 洗練された。 親しみやすい。 Open Sansが不適切な選択であるというシナリオは、私には考えられません。 特にセリフ系のフォントを探しているのでなければ、このフォントはほとんどのビジネス、ブログ、ランディングページ、ウェブアプリに完璧に対応できると思います。 Oswald + EB Garamond

• Oswald
• EB Garamond

Oswaldは、フォントウエートやキャップスを使用しなくても見出しに最適なフォントである。 その凝縮された性質が注目を集め、ポップな印象を与えますが、本文のフォントとしても心地よくユニークなテキストになります。

EB Garamondは、クラシックなGaramondフォントをエレガントにアップデートしたものです。

実世界での使用

この組み合わせは、弁護士、不動産会社、あるいは高級ブティックなど、高級な顧客を相手にする専門家に適している。 オズワルドの汎用性とEB Garamondの古典的な外観は、高級品を強調することが重要な商品説明の文章に最適です。 Montserrat + Merriweather

• Montserrat
• Merriweather

Montserrat はその汎用性とシンプルさでデザイナーの間で人気があり、Merriweather はそのコントラストスタイルと読みやすさが素晴らしい組み合わせです。 見出しや段落のテキストとして自由に入れ替えてください。

実際の使用例

この特定の組み合わせは、モダンとクラシックなデザインの良いバランスです。 そのため、さまざまなビジネスシーンで活用することができます。 個人的には、これらのフォントはオンラインニュースや出版社に適しているように思います。 Roboto Thin + Roboto Regular

• Roboto Thin
• Roboto Regular

Roboto フォントファミリーは個人的に好きで、ここ How To Get Online でも使っているものです。 また、How To Get Onlineでも使用しているフォントファミリーです。 モダンで幾何学的、それでいて親しみやすく信頼できるRobotoは、フォルムと機能が見事に融合したフォントです。 Robotoは何にでも使えますが、特に技術系のスタートアップ企業や現代の中小企業、あるいは未来を見据えたあらゆるタイプのブランドに最適だと思います。 Raleway + Roboto Slab

• Raleway
• Roboto Slab

またしても我らがロボットが登場です。 今回はセリフ体のバリエーション、Roboto Slabです。 Roboto Slabは、Roboto Slabと同様に汎用性の高いフォントでありながら、よりクラシカルなスタイルを持っています。

実世界での使用

Ralewayは洗練された印象を与えるフォントの一つです。 すべて大文字の見出しとして使用した場合、宝石やデザイナー服などの高級品、あるいは同様の高級な e コマース製品に見事にマッチすると思います。 Roboto Slabは、シンプルで親しみやすい説明テキストで、このフォントをうまくサポートしています。 このような場合、「萌え萌え」なのは、「萌え萌え」なのですが、「萌え萌え」なのは、「萌え萌え」なのですが、「萌え萌え」なのは、「萌え萌え」なのです。 Playfair Display + Source Sans Pro

• Playfair Display
• Source Sans Pro

デザイナーによると、Playfair Displayは18世紀の羽ペンからスチール先ペンへの移行期の書体からインスピレーションを得ているとのことです。

Source Sans Pro は、さらに未来へと物事を押し進め、実用的でありながら装飾的であるという、興味深い組み合わせを作り出しました。 そのアンパサンドや通貨記号を使う機会があれば、なぜこの文字が高級感や見栄えを中心とした製品やサービスに最適なのか、すぐにわかるだろう。 Source Sans Proは、テキストをモダンでクリーンな表現で地に足をつけたものにします。 Fjalla One + Noto Sans

• Fjalla One
• Noto Sans

Fjalla Oneは最も多才なフォントではないかもしれないが、非常によくできることの1つとして注目を集める見出しを作成できる。 小文字でも大文字でも、小文字でも全角でも、その文字は何をやっても催眠術のようです。

Noto Sans は、言語に関係なく、世界中のユーザーがフォーマット エラーなしに表示できる真のユニバーサル フォントとなることを目指しています。

実際の使用例

ブログやランディング ページは、この組み合わせに最適です。 また、Noto Sansの普遍的な適応性は、国際的な読者に到達することが優先される場合に良い選択となる。 Alegreya + Lato

• Alegreya
• Lato

Alegreya には非常に「土くさい」、親しみやすく感じる魅力がある。 その個性には気取ったところがなく、見たままが得られるのです。

Lato は、Google のライブラリの万能フォントのチャンピオンとして Open Sans に一歩譲るかもしれません。

彼らが一緒になると、楽しく、読みやすく、実際的な組み合わせになります。

9. PT Sans Narrow + PT Sans

• PT Sans Narrow
• PT Sans

旧世界のスタイルにもう一つの現代的なアプローチを加えたPT Sansとその兄弟であるPT Sans Narrowは一緒に組むとすぐに、間違いなく主張できるものになる。

Real-World Use

どちらのフォントも見出しや本文として同様に機能します。選ぶ特定の組み合わせは言葉の性質によりますが、私は短い文章ではPT Sans Narrowを好む傾向があります。

「現代のデジタルコミュニケーションにとって非常に重要な道具」として意図されており、これらのフォントを使うのは技術系スタートアップ、ソフトウェアアプリケーション、その他のデジタルビジネスに最も適していると考えられますが、もちろんそれに限るわけではありません。 Amatic SC + Josefin Sans

• Amatic SC
• Josefin Sans

さて、これは確かにもっと軽快な面もありますね。 もちろん、この組み合わせは誰にでも合うというわけではありませんが、Amatic SCとJosefin Sansの両方の気まぐれな性質が、注意を払う限り、確実に目立つものを作り出します！

実世界での使用

あなたが楽しい雰囲気のアーティスト、俳優、ミュージシャン、芸人なら、このフォントはあなたのユニークな個性を捉えるために必要かもしれませんね。 全体的なトーンと題材によっては、この組み合わせはニッチなブログにも使えるかもしれません。 Amatic SCを本文に使わないでください。

Bonus: 5 of Our Favorite Premium Fonts

この記事は最高のトレンドのGoogleフォントについてのものですが、私たちのお気に入りのプレミアムフォントのいくつかもボーナスとして紹介したいと思います。 プレミアムフォントは、もちろん、無料ではありませんが、あなたのウェブサイトをよりユニークでカスタムなデザインにします。 これらのフォントは、人気やトレンドに左右されることはなく、上に挙げたものとはまさに対極にあるものです。 しかし、これらは、ブランドのためにカスタムでパーソナライズされたデザインを求める人には最適で、ロゴやクリエイティブな見出しに使用するとうまくいきます：

Bonus 1: The Mega Craft Bundle X

Bonus2：バレンタイン バンドル

Bonus 3: Cool Font Bundle

Bonus 4: The Little Graphics Bundle

Bonus 5: Jealous

Why Should You Use Google Fonts?

Welcome to what many web designers consider their best friend.多くの Web デザイナーが親友と考えるものを紹介します。 経験から言うと、私は、カスタム フォント ファイルを Web サイトに埋め込むことはもうほとんどないと言えます。 Google Fonts は、現在、私が Web サイトのタイポグラフィのために利用する最初で最後の場所となっています。 その理由は、

• 完全に無料だからです。 このような場合、「SkyDesk」は、「SkyDesk」を使用することができます。 あなたは一銭も支払うことはありません。
• 2018年3月現在、ライブラリには850を超えるフォントが用意されています。 あなたのブランドにマッチする正しいスタイルが見つかる可能性があります。
• 速いです。 フォントはGoogleのサーバーでホストされているため、ファイルはインテリジェントに圧縮され、素早く読み込まれるように設計されています。
• 簡単です。 HTML ファイルにコピー＆ペーストするだけで完了です。
• 整理されている。 すべてのフォントは、1 つのデータベース内で分類され、検索可能です。 もう、完璧なフォントを見つけるために、コンピュータ上の乱雑なサブフォルダを探し回る必要はありません。

Google Fonts のインストール方法

悩む必要はありません。

フォントを選択すると、ページ下部のコレクションに累積的に追加されます。 検索が終わったら、その下のタブをクリックすると、埋め込み方法のウィンドウがポップアップします。

スタイルの追加

ここから、イタリック、太字、太字イタリックなどの追加のスタイルを選択できます。 CUSTOMIZE] タブをクリックし、必要と思われるスタイルを選択するだけです。

たとえば、フォント Khula の通常テキストと太字テキストの両方を選択する方法は次のとおりです。

Web サイトにフォントを埋め込むには、2 つのオプションがあることにお気づきでしょう。サイトの HTML ファイルで使用する標準の <link href> またはサイトの CSS ファイルに含める @import url を使用することです。

一般に、最良の選択肢は、<link href> 行をコピーして HTML ファイルに貼り付けることです。 この方法では、CSS ファイルの読み込みを待つよりも、通常、フォントの読み込みが速くなり、また、この方法は、（非常に）古いブラウザのサポートが少し良くなります。 つまり、上で選んだ Khula フォントを使用すると、次のようになります:

スタイル シートのフォントを使用する

これで、CSS コード内で通常通りフォントを呼び出すだけです。 デモのため、主見出しと段落のテキストは次のようになります:

Advice On Pairing Your Fonts

どのフォントをグループ化するかは、時にトリッキーな芸術的バランスを取ることができます。 一方では、フォントの選択は、スタイルに十分なコントラストがある場合に最も効果的になります。 一方、フォントがスタイル的に互いに離れすぎると、ランダムに選ばれたという印象を与える可能性があります。 同じ感情やアイデアを呼び起こす別のフォントと組み合わせてみてください。 それは、あなたのユニークなブランドを語る適切なフォントを見つけることがすべてです。

セリフ体とサンセリフ体

試行錯誤の結果、セリフ体フォントとサンセリフ体フォントを組み合わせるという方法があります。 これらのスタイルは互いにうまく対比される傾向があり、見出しと段落を簡単に区別できます。

実験がカギ

新しいウェブサイトのフォントを選択するとき、私はコンピュータにすべての考えられる Google Font オプションをダウンロードして、ワープロ文書で遊んでみたいと思っています。 サイズや重さを変えてみて、並べて比較するのも効果的な組み合わせのひとつです。 じっくり試してみると、まったく別のフォントを使うよりも、あるフォントの細いバリエーションを使ったほうが、見出しの文字がきれいになることがわかるかもしれません。 (最もシンプルなソリューションが最良であることはよくあります。)

Conclusion

Google Fonts は、ウェブサイトに高価なカスタム フォントを使用したくない DIYer にとって、強力なリソースとなります。 しかし、大きな力には大きな責任が伴います。タイポグラフィをうまく行うには慎重に考える必要があり、世の中にあるすべてのフォントが勝者であるとは限らないのです。 このガイドが正しい方向へと導き、ブランドの個性を表現する完璧なフォントの組み合わせを見つけるきっかけになれば幸いです。