2020年に流行する10の素晴らしいGoogleフォントの組み合わせ

Googleフォントから厳選された流行のフォントと、それらを組み合わせてウェブサイトにインストールする方法のリスト.


Googleフォントの最高の組み合わせ

ウェブサイトのタイポグラフィは、現在よりもさらに神秘的なデザイン手法でした。カスタムフォントでWebページを装飾する複雑なプロセスでは、ユーザーのサーバーでホストされるフォントファイルを変換して埋め込む必要がありました。また、使用可能なフォントの選択は、ユーザー自身のコレクションまたは標準システムフォント以外の文字体裁の知識に制限されていました。その結果、ほとんどのWebサイトはコンテンツのフォーマットがほぼ同じに見え、使いすぎて平凡な多くのものが使用されていました Webセーフフォント.

2010年にリリースされたすべての変更 Googleフォント, Webサイトにカスタムフォントをはるかに簡単に実装できるオープンソースプロジェクト。幸いなことに、これらのフォントを自分のWebサイトにインストールするのは迅速かつ簡単なプロセスですが、Googleのライブラリにあるすべてのフォントの組み合わせが印刷上の成功のレシピであるとは限らないことに注意してください。ただし、適切なフォントの組み合わせと使用上の考慮事項により、オンラインブランドは、高価なカスタマイズされたフォントを必要とせずに、プロ意識、美しさ、読みやすさを醸し出すことができます。この記事では、このすべてを達成する方法を紹介します.

トレンドのGoogleフォントの10の組み合わせのリスト

始めましょう!順不同で、現在流行しているGoogleフォントの組み合わせのベスト10は次のとおりです。

1. Open Sans Condensed + Open Sans

トレンドのGoogleフォントの組み合わせ-Open Sans CondensedとOpen Sans

これは、ほぼすべての該当する用途で驚異的に機能する簡単な組み合わせです. オープンサンズ は、Googleフォントのコレクション全体の中で最も汎用性の高いフォントの1つです。大きな見出しでも読みやすいと同時に、大きなテキストブロックで読むのは非常に簡単です。.

シンプル。洗練された。おなじみの。間違いない!

実際の使用

どんなシナリオも予測できません オープンサンズ 悪い選択でしょう。特にセリフフォントを探しているのでない限り、これはほとんどすべてのビジネス、ブログ、ランディングページ、またはWebアプリに完全に対応すると思います.

2. オズワルド+ EBガラモンド

トレンドのGoogleフォントの組み合わせ-OswaldとEB Garamond

オズワルド フォントの太さや大文字の使用に関係なく、見出しに最適なフォントです。その凝縮された性質は注目を集め、ポップするのに役立ちますが、本体のフォントとして心地よくユニークなテキストにもなります.

EBガラモンド クラシックなGaramondフォントのエレガントなアップデートです。即座に認識可能で時代を超越した外観のこのフォントは、タイポグラフィで独特のプロ意識を醸し出しています。.

実際の使用

この組み合わせは、弁護士、不動産代理店、さらには高級ブティックなど、ハイエンドの顧客を扱う専門家に適しています。の汎用性 オズワルド そしての古典的な外観 EBガラモンド プレミアム品質のアイテムを強調することが重要である場合、優れた製品説明テキストを作成します.

3. モントセラト+メリウェザー

トレンドのGoogleフォントの組み合わせ-MontserratとMerriweather

モントセラト 汎用性とシンプルさのためにデザイナーの間でお気に入りです。 メリウェザー 対照的なスタイルと読みやすさと見事に調和しています。見出しまたは段落テキストとして自由に入れ替えてください。どちらもどちらも優れた働きをします。!

実際の使用

この特定の組み合わせは、モダンなデザインとクラシックなデザインの素晴らしいバランスです。そのため、そのさまざまな用途は、多くのタイプのビジネスをサポートすることができます。個人的には、これらのフォントはあらゆるタイプのオンラインニュースソースや出版社に適していると思います.

4. Roboto Thin + Roboto Regular

トレンドのGoogleフォントの組み合わせ-Roboto RegularとRoboto Thin

Roboto font-familyは個人的なお気に入りであり、こちらもHow To Get Onlineで使用しているものです。幅広いフォントの太さを備えた非常に用途が広く、フォントの用途に実質的な制限はありません。モダンで幾何学的でありながら、何とかフレンドリーで信頼性の高いRobotoは、形と機能の驚異です.

実際の使用

ここでは、悪用を見つけるのが難しいと思われる別のペアリングを紹介します。ながら Roboto ほぼ何でも機能します。特に、テクノロジーの新興企業、現代の中小企業、または将来を見据えたあらゆるタイプのブランドに最適です。.

5. Raleway + Roboto Slab

トレンドのGoogleフォントの組み合わせ-RalewayとRoboto Slab

私たちの友達です Roboto 再び!今回はセリフのバリエーションを見ています, Roboto Slab. 従兄弟と同じくらい用途が広いフォントですが、スタイルはもう少しクラシックです。独特で大胆な組み合わせで レールウェイ, きれいで洗練されたタイポグラフィの素晴らしい組み合わせがあります.

実際の使用

レールウェイ 洗練を叫ぶそれらのフォントの一つです。オールキャップスの見出しとして使用すると、ジュエリー、デザイナーウェア、または同様に高級なeコマース製品などの高級品に美しく機能すると思います. Roboto Slab シンプルで親しみやすい説明テキストで十分にサポートします.

どちらも同じように機能します。見出しと本文の両方のフォントに異なる太さのバリエーションを試し、どのペアがあなたのブランドを最もよく捉えているかを確認してください.

6. Playfair Display + Source Sans Pro

トレンドのGoogleフォントの組み合わせ-Play San FairとSource Sans Pro

そのデザイナーによると, プレイフェアディスプレイ クイルから先端がスチールのペンへの移行期にある18世紀の書体に触発されました。このフォントが旧世界の魅力を醸し出していても、現代のスピンを備えているのは当然のことです.

ソースSans Pro 物事を少し先に進め、実用的でありながら華やかな魅力的な組み合わせを作成します.

実際の使用

プレイフェアディスプレイ キャッチフレーズや製品の説明のようなものに個人的なタッチを追加します。アンパサンドまたは通貨記号を使用する機会がある場合は、それが高級感と外観を中心とした製品またはサービスに最適な理由であることがすぐにわかります。. ソースSans Pro モダンでクリーンなプレゼンテーションに基づいたテキストを維持します.

7. Fjalla One + Noto Sans

トレンドのGoogleフォントの組み合わせ-Fjalla OneとNoto Sans

Fjalla One は、最も用途の広いフォントではないかもしれませんが、非常にうまく機能していることの1つは、注意を引く見出しを作成することです。小文字でも大文字でも、大文字でも小文字でも、これらの文字は何を使っても催眠術です.

能登さん 言語に関係なく、世界中のユーザーがフォーマットエラーなしで表示できる、真にユニバーサルなフォントを目指しています。適切に、フォントの美学はその実用性と同様に多用途です.

実際の使用

ブログやランディングページは、このペアリングに最適です。あるいは、コンテンツを分割するために目立つ小見出しを必要とする長いテキスト本文を含むすべてのものです。 Noto Sansの普遍的な適応性は、国際的な視聴者への到達を優先する場合にも適しています。.

8. アレグレイア+ラト

トレンドのGoogleフォントの組み合わせ-AlegreyaとLato

アレグレイア とても「素朴」でフレンドリーな感じがします。その性格についての装いはありません。あなたが見たもの、それがあなたの手に入れたものだ.

ラト 与えることができる オープンサンズ Googleのライブラリにある万能フォントのチャンピオンとしての金のための実行.

一緒に使うと、楽しく、読みやすく、実用的な組み合わせになります.

9. PT Sans Narrow + PT Sans

トレンドのGoogleフォントの組み合わせ-PT Sans NarrowとPT Sans

旧世界のスタイリングに対するもう1つの現代的な見方, PT Sans とその兄弟, PT Sans Narrow, ペアになったときに即座に紛れもない発言をする.

実際の使用

どちらのフォントも、見出しや本文と同じように機能します。選択する特定のペアリングは、あなたの言葉の性質に依存します—私はより短いバーストでPT Sans Narrowを好む傾向がありますが.

「現代のデジタル通信にとって非常に重要なツール」として意図されているが、これらに限定されないが、テックスタートアップ、ソフトウェアアプリケーション、またはその他のデジタルビジネスにこれらのフォントを使用するのに最適であると思われる.

10. Amatic SC + Josefin Sans

トレンドのGoogleフォントの組み合わせ-Amatic SCとJosefin

わかりました、これは間違いなく明るい側にあります。明らかに、この組み合わせはすべての人に役立つわけではありませんが、両方の奇抜な性質 アマティックSC そして Josefin Sans 注意を払っている限り、確実に目立つものを作成する!

実際の使用

あなたが楽しくて元気なアーティスト、ミュージシャン、エンターテイナーなら、このフォントはあなたのユニークな個性をとらえるのに不可欠かもしれません。包括的なトーンと主題に応じて、この組み合わせはニッチなブログでも機能します.

アドバイス:使用しないでください アマティックSC 本文として。読者を狂わせます.

ボーナス:私たちのお気に入りのプレミアムフォント5つ

この記事はトレンドのGoogleフォントの最高のものであることは承知していますが、おまけとしていくつかのお気に入りのプレミアムフォントについても触れておきたいと思います。もちろん、プレミアムフォントは無料ではありませんが、Webサイトをよりユニークでカスタムデザインにすることができます。これらのフォントは人気がなく、流行りもせず、実際に上記のフォントとは逆です。ただし、これらは自分のブランドのカスタムでパーソナライズされたデザインが必要で、ロゴやクリエイティブな見出しに使用するとうまくいく人には最適です。

ボーナス1:メガクラフトバンドルX

ボーナス2:バレンタインのバンドル

ボーナス3:クールなフォントバンドル

ボーナス4:The Little Graphicsバンドル

ボーナス5:嫉妬

簡単なヒント: プレミアムフォントはデザイナーに時代を超えたデザインを実現する機会を提供し、ロゴとブランドアイデンティティに強く推奨されます.

Googleフォントを使用する理由?

多くのWebデザイナーが親友とみなすものへようこそ。経験から言えば、カスタムフォントファイルをWebサイトに埋め込むことはほとんどありません。現在、Googleフォントは、ほぼ独占的に私がWebサイトのタイポグラフィに頼る最初と最後の場所です。その理由は次のとおりです。

  • それは 完全に無料. 選択したフォントの数やフォントを使用するWebサイトの数は関係ありません。ダイムを支払うことはありません.
  • 2018年3月現在、 850以上のフォント 図書館で。おそらく、あなたのブランドに合ったスタイルが見つかるでしょう.
  • それは 速い. フォントはGoogleのサーバーでホストされているため、ファイルはインテリジェントに圧縮され、すばやく読み込まれるように設計されています.
  • それは 簡単. 単純なコピーアンドペーストでHTMLファイルに貼り付けるだけで完了です.
  • それは 組織された. すべてのフォントは分類され、1つのデータベース内で検索できます。コンピューターの乱雑なサブフォルダーを調べて、完璧なフォントを探す必要はもうありません.
  • 私はそれについて言及しました 自由? それは無料です!

Googleフォントをインストールする方法

ここで頭痛は必要ありません。に行くだけ Googleフォント 必要なフォントを見つけます.

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

スタイルを追加する

ここから、斜体、太字、太字斜体などの追加のスタイルを含めるように選択できます。をクリックしてください カスタマイズ タブをクリックして、必要と思われるスタイルを選択します.

たとえば、これは私が両方を選択する方法です 定期的 そして 大胆な フォントのテキスト クラ.

Google Fontsにフォントスタイルを追加する

標準または@Importの埋め込み?

Webサイトにフォントを埋め込むには、標準を使用する2つのオプションがあることに気づくでしょう。 あなたのサイトで使用される HTML ファイル、または @import URL あなたのサイトに含まれる CSS ファイル。どちらを使うべきか?

一般的に、最良のオプションは、 HTMLファイルに挿入します。フォントは通常、CSSファイルが読み込まれるのを待つよりも、この方法の方が高速に読み込まれます。また、この方法では、(非常に)古いブラウザのサポートが少し向上しています.

コードを配置する場所

Googleが提供するコード行をコピーして貼り付けます。 HTMLファイルのセクション。上記で選択したKhulaフォントを使用すると、次のようになります。

簡単なヒント: フォントスタイルをカンマで区切ってURLに書き出すことで指定することもできます。例:「https://fonts.googleapis.com/css?family=Khula:太字、斜体、太字

スタイルシートでのフォントの使用

今、あなたはあなたの中でいつものようにフォントを呼び出すだけです CSS コード。デモのために、メインの見出しと段落テキストは次のようになります。

h1 {
font-family:「Khula」、サンセリフ。
font-weight:700;
font-size:48px;
}
p {
font-family:「Khula」、サンセリフ。
font-weight:400;
font-size:16px;
}

簡単なヒント: Googleフォントの読み込みに失敗したまれなイベントには、「serif」、「sans-serif」、または同様のウェブセーフフォントなどの代替フォントを必ず含めてください.

フォントのペアリングに関するアドバイス

どのフォントをグループ化するかを決定することは、時には芸術的なバランスを取るのが難しい場合があります。一方では、フォントの選択は、スタイルに十分なコントラストがある場合に最も効果的です。サイトの各フォントは他のフォントよりも目立ち、その使用の正当性を獲得する必要があります。一方、フォントがスタイルから離れすぎないようにすると、フォントがランダムに選択されたように見えます。.

簡単なヒント: 特定のフォントがどのような感情やアイデアを呼び起こすかを考えます。同じ感情やアイデアを呼び起こす別のフォントと組み合わせてみてください。それはあなたのユニークなブランドに語りかける適切なフォントを見つけることです。フォントがあなたのブランドのように感じるとき、またはそれが混合されたシグナルを与えているかどうか、本質的にそれを知るでしょう.

セリフとサンセリフ

実証済みの方法は、セリフフォントとサンセリフフォントをペアにすることです。彼らのスタイルはよく対比される傾向があり、見出しと段落を簡単に区別できます.

実験が鍵

新しいWebサイトのフォントを選択するときは、可能なすべてのGoogleフォントオプションを自分のコンピュータにダウンロードして、ワープロドキュメントでそれらを操作します。さまざまなサイズと重みで気をそらし、組み合わせを並べて比較することは、可能な最高のペアリングを決定するための効果的な方法です。時間をかけて実験することで、 薄い 特定のフォントのバリエーションを使用すると、完全に別のフォントを使用する場合よりも、見出しのテキストがよくなります。 (多くの場合、最も単純なソリューションが最善です。)

結論

Google Fontsは、ウェブサイトで高価なカスタムフォントにお金をかけたくないDIYユーザーのための強力なリソースです。しかし、大きな力には大きな責任が伴います。タイポグラフィは、うまく機能するために慎重な検討を必要とし、すべてのフォントが勝者であるとは限りません。このガイドがあなたを正しい方向に導き、あなたのブランドの個性をとらえる完璧なフォントの組み合わせを見つけるのに役立つことを願っています.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map