2018年の最高の無料Webフォント

公開: 2018-10-26

WordPress Webサイト用に選択したフォントは、全体的なデザインに大きな役割を果たします。 それは決して後付けではありません。 証拠を確認する必要がある場合は、すべての見出しをComicSansに変更してください。 さて、それは少し劇的です。 しかし、タイポグラフィでは、わずかな変更でも大きな違いを生む可能性があります。 ウェブ(そして特にグーグル)のおかげで、あなたが最高のものを選ぶのを助けるためにそこにたくさんの無料のウェブフォントがあります。 したがって、少しのインスピレーションや現在のサイトのフォントアップグレードを探している場合は、以下のリストを参照して、デザインの世界が提供する最高のWebフォントのいくつかを探索することを強くお勧めします。

2018年の最高の無料Webフォント

私たちのYoutubeチャンネルを購読する

2018年に利用可能な最高のWebフォントの40がここにあります(そしてそれらは無料です!)

1. Roboto

best-web-fonts-1

Robotoは、幾何学的形状と親しみやすい曲線の融合を目的としています。 それは自然な読書リズムを作り出し、タイトル、見出し、または体型としてうまく機能します。 凝縮バージョンのRobotoCondensedも非常に人気があります。

フォントを取得する

2.プレイフェアディスプレイ

best-web-fonts-2

Playfairは、18世紀後半の書き込み/印刷技術の移行の影響を受けています。 羽ペンが先のとがった鋼のペンに置き換えられたとき。 また、タイプフェーサーのジョン・バスカヴィルとウィリアム・マーティンの「ボイデル・シェイクスピア」の書体の影響も受けています。 タイトルやヘッドラインに最適です。

フォントを取得する

3.サンセリフを開く

best-web-fonts-3

優れたニュートラルタイプの書体として設計されたOpenSansは、とてもフレンドリーで読みやすいです。 タイトル、見出し、または本文に適しています。

フォントを取得する

4.モントセラト

best-web-fonts-4

このフォントは、もともとフリエタウラノフスキーによって作成されました。 彼女のフォントデザインへのインスピレーションは、ブエノスアイレス近郊のモントセラトで見たすべての美しい看板やポスターから生まれました。 すべて大文字で大きな文字が含まれる短い見出しでは見栄えがします。

フォントを取得する

5.メリウェザー

best-web-fonts-5

このセリフ書体は、Web用に作成されているため、すべてのタイプの画面で本文テキストを読むのが非常に快適です。 見出しにも最適です。

フォントを取得する

6.ラト

best-web-fonts-6

Latoは、企業向けに特別に設計されました。 さまざまなサイズでの使用に適したプロフェッショナルな外観を備えています。 その半丸みを帯びたディテールはまた、多くの人々にアピールする暖かさを与えます。

フォントを取得する

7. Bebas Neue

best-web-fonts-7

このサンセリフの「オールキャップス」フォントは非常に人気があり、正当な理由から最高の無料Webフォントの1つと見なされています。 それはあなたのウェブサイトのヘッダーのために素晴らしい見た目のディスプレイを作成します!

フォントを取得する

8.能登さん

best-web-fonts-8

Noto Sansは、複数の言語で見栄えがするように作成されているという点でユニークです。 文字間の水平方向の間隔のため、本文テキストやコンテンツの多いページで見栄えがします。

フォントを取得する

9. Source Sans Pro

best-web-fonts-9

Source Sans Proは、主にユーザーインターフェイスを念頭に置いて設計されました。 これは素晴らしいメニューフォントになりますが、本文などの他の用途にも使用できます。

フォントを取得する

10.オズワルド

best-web-fonts-10

このサンセリフ書体は、デジタル画面のピクセルグリッドに合わせて形成されているため、Webに最適なフォントです。 スペースをあまりとらない幅の狭いフォントなので、テキストの多い大きなヘッダーに最適です。

フォントを取得する

11. PT Sans

best-web-fonts-11

PT Sansは、「Public Types of Russian Federation」と呼ばれるプロジェクトの一部であり、複数の言語でのテキストの表示を統一することを目的としています(Noto Sansと同様)。 このフォントは複数の目的に適しています。

フォントを取得する

12.ルービック

best-web-fonts-12

rubikフォントは、PhilippHubertとSebastianFischerによって設計され、文字がルービックキューブの正方形の内側に完全に収まる、わずかに丸みを帯びた角を持つサンセリフフォントを作成しました。 フォントは、見出しと本文の両方に最適です。

フォントを取得する

13.ヌニートサンセリフ

best-web-fonts-13

このサンセリフフォントは、Nunitoの丸められていないバージョンです。 これはユーザーインターフェイスで人気のあるフォントであり、ダッシュボード、レストランメニュー、価格表などに最適です。

フォントを取得する

14.フィラサンセリフ

best-web-fonts-14

この人気のあるWebフォントは、元々、すべての画面サイズで明確に読みやすくするためにMozillaFirefoxOS用に設計されました。 複数の目的のための現代的なタイプとしてそれを使用してください。

フォントを取得する

15.ワークサンセリフ

best-web-fonts-15

このサンセリフフォントは、すべての画面で見栄えのする簡略化されたWebフォントとして設計されています。 大きくて広々とした見出し表示には重いウェイトを使用し、読みやすい本文テキストには通常のウェイトを使用します。

フォントを取得する

16.ポピンズ

best-web-fonts-16

Poppinsは、この美しいフォントの幾何学的な円の形を強調するデーバナーガリーデザインに基づいたモダンな幾何学的なサンセリフ書体です。 見た目にとても心地よいデザインの見出しと本文の両方にこのフォントを自由に使用してください。

お気づきの方もいらっしゃると思いますが、ブログで使用しているフォントでもあります。

フォントを取得する

17. Josefin Sans

best-web-fonts-17

この書体は、Josefin Slab(これも素晴らしいフォント)の姉妹です。 幾何学的にエレガントで、ヴィンテージ感を加えるように設計されました。 見出しを大きくするには負の文字間隔を使用すると、本文テキストに提供されるデフォルトの文字間隔を維持できます。

フォントを取得する

18. Ubuntu

best-web-fonts-18
Ubuntuは、Web用に作成されたサンセリフフォントであり、汎用フォントを目的としています。 タイトル、見出し、ボタン、本文のテキストに適しています。

フォントを取得する

19.PTセリフ

best-web-fonts-19

PT Serifは、PT Sansファミリに新しく追加されたものであるため、2つはフォントペアとしてうまく連携します。 それはほとんど何にでもうまく機能する調和のとれたタイプです。

フォントを取得する

20.ムリ

best-web-fonts-20

このサンセリフフォントは、ミニマリストデザインのWebサイトに最適です。 大きな見出しに最適ですが、本文にも使用できます。

フォントを取得する

21.アルボ

best-web-fonts-21

Arvoは、複数の目的に適した「混合」タイプを目的とした幾何学的なセリフ書体です。 タイトル、ヘッドライン、本文に使用できます。

フォントを取得する

22.酸素

best-web-fonts-22

このサンセリフフォントは、ユーザーインターフェイスを念頭に置いてVernonAdamsによって作成されました。 すべての画面サイズで見栄えがするように、クリアで読みやすいように設計されています。 本文、メニュー項目、ボタンにご利用ください!

フォントを取得する

23.レールウェイ

best-web-fonts-23

Ralewayは、タイトル、字幕、見出しにおそらく最もよく使用される、エレガントで薄いサンセリフフォントです。

フォントを取得する

24.能登セリフ

best-web-fonts-24

Noto Sansと同様に、Noto Serifは、複数の言語でWeb全体で見栄えがするように作成されており、すべての画面で美しく見える優れた多目的フォントです。 NotoSansとの完璧なフォントペアリングとしても使用できます。

フォントを取得する

25.ヌニート

best-web-fonts-25

Nunitoは、わずかに丸みを帯びたサンセリフ書体で、大型ディスプレイのタイポグラフィに最適です。 これは、ユーザーインターフェイスで人気のあるフォントです。 大きな見出しに通常のウェイトを使用すると、非常に見栄えがします。

ヌニート

26. Archivo

best-web-fonts-26

Archivoはグロテスクな(古い)サンセリフタイプで、技術的な感触が素晴らしいです。 見出しフォントとしてWeb上で特に見栄えがします。

フォントを取得する

27.アブリル・ファットフェイス

best-web-fonts-27

名前が示すように、AbrilFatfaceは「より大きな」タイプです。 これは、古典的なディドーンスタイルの刷新となることを目的としています。 特に19世紀のイギリスとフランスの広告ポスター。 このフォントは素晴らしくエレガントで、おそらくタイトルや見出しに最適です。

フォントを取得する

28. Exo 2

best-web-fonts-28

Exo 2は、NatanaelGamaによって設計されたExoの新しいバージョンです。 この現代的な書体は、技術的で未来的な雰囲気を持っています。 Exoとは異なり、Exo2は本文テキストにも最適です。

フォントを取得する

29.バーロウ

best-web-fonts-29

Barlowは、カリフォルニアの一般市民(ナンバープレート、看板、バスなど)に触発されています。 デザインはわずかに丸みを帯びており、スペースをあまりとらずに優れたヘッダーを作成する凝縮バージョンがあります。

フォントを取得する

30.スラボ27px

best-web-fonts-30

Slabo 27pxは、(姉妹フォントのSlabo 13pxと同様に)名前のピクセルサイズで表示するように特別に最適化された独自の書体です。 これにより、明確でわずかに凝縮された読みやすい見出しに最適なWeb​​フォントになります。

フォントを取得する

31.アレオ

best-web-fonts-31

Aleoは、人気のあるLatoフォントに似たスラブセリフフォントです。 なめらかで半丸みを帯びたディテールでデザインされているため、見出しや本文に最適です。

フォントを取得する

32.流砂

best-web-fonts-32

これは、ウェブ上で人気のある選択肢であり続けているディスプレイサンセリフ書体です。 見出しにぴったりの幾何学的なデザインです。

フォントを取得する

33.クーパー・ヒューイット

best-web-fonts-33

この現代的なサンセリフフォントは、その凝縮されたディスプレイでうまく機能するユニークな幾何学的なアーチで設計されています。 このフォントは、見出しとしてすべて大文字で見栄えがしますが、通常の本文テキストにも使用できます。

フォントを取得する

34.オーストリッチサンセリフ

best-web-fonts-34

オーストリッチサンセリフフォントは、タイトル、ロゴ、見出しに最適なモダンなサンセリフフォントです。

フォントを取得する

35. IBM Plex Sans

best-web-fonts-35

この現代的な書体は、IBMブランドの精神を反映するように特別に設計されました。 それはあなたのウェブサイトで複数の目的に使用できる中立的で友好的な魅力を持っています。

このフォントを入手

36.鵜

best-web-fonts-36

このユニークな書体は、Christian Thalmannによってゼロから設計されました(ほとんどが描かれています)。 書体の複雑さを強調するには、見出しなどの大きな表示用にWebサイトでこのフォントを使用します。

フォントを取得する

37.アレグレイアサンセリフ

best-web-fonts-37

このサンセリフフォントはもともと文学用に設計されたもので、全体に調和した段落間隔があるため、本文テキストとして非常にうまく機能します。

フォントを取得する

38.リブレフランクリン

best-web-fonts-38

このサンセリフ書体は、古典的なフォントであるフランクリンゴシックの現代版です。 見出しや本文に使用します。 見出しテキストとして使用し、本文テキストとしてLibre Baskervilleと組み合わせると、非常にうまく機能します。

このフォントを入手

39. Libre Baskerville

best-web-fonts-39

この美しいウェブフォントは、ユニークで読みやすい本文に最適な高品質の書体です。 LibreFranklinと組み合わせるとうまく機能します。

このフォントを入手

40.リーグスパルタン

best-web-fonts-40

リーグスパルタンは、力強く美しいタイトルや見出しを作成するのに適した、単一の太さ(太字)のサンセリフフォントです。

フォントを取得する

スクリプトフォントはどうですか?

スクリプト(または手書き)フォントが不足しているリストを見つけた場合は、間違いではありません。 しかし、それはそこにいくつかの素晴らしい無料のものがないという意味ではありません(いくつか例を挙げると、マリ、インディーフラワー、パシフィコ、そしてダンススクリプト)。 この美しい無料およびプレミアムスクリプトフォントのリストも確認できます。

フォントペアリングに関するいくつかの簡単なヒント

Webサイトのタイポグラフィを更新する場合は、さまざまなフォントがどのように連携するかを検討することをお勧めします。

始めるためのヒントをいくつか紹介します。

  • シンプルに保ちましょう。一度に多くのフォントを使用しないでください。
  • 読みやすくしてください。
  • 反対に考えてください。 たとえば、セリフとサンセリフを組み合わせたり、太字と薄いものを組み合わせたりします。
  • または、家族で保管してください。 同じファミリで異なるウェイトとスタイルのフォントを使用します。
  • コンテンツの雰囲気に合わせてみてください。
  • 実験して、機能するものを維持します。

(Google Fontsの場合は、無料のペアリングツールを使用することもできます)

フォントペアリングの詳細については、7つの主要な原則に関する記事全体をご覧ください。

最終的な考え

このフォントのリストが、次のプロジェクトに最適なフォントを見つけるプロセスに役立つことを願っています。 また、これらのフォントの多くは、さまざまな太さやスタイルを持っているため、微調整して無数のデザインを作成できることを忘れないでください。 だから、探索を楽しんでください!

乾杯!