2022年にデザインで使用する8つのWebセーフフォント

公開: 2022-05-04

魅力的で審美的でUXが豊富なWebサイトを作成することは、フォントだけに依存するわけではありません。 ただし、シームレスなブラウジングエクスペリエンスを実現するには、Webサイトで使用するフォントが訪問者に表示され、理解できる必要があります。

World Wide Webの原始時代には標準フォントがなかったことを知っておくと興味深いかもしれませんが、すべてのコンピューターに特定のフォントがあります。TimesNew Roman、Arial、Helveticaなどがその例です。

ええと、これらはウェブセーフなフォントです。 @ font-faceはそれまで存在していなかったので、これらのフォントだけに固執することをお勧めしました。 最近では、フォントを試すことができます。実際、この手法を使用してWebページ上のほぼすべてのリモートフォントファイルをレンダリングできるため、さまざまなWebセーフフォントを自由に使用できます。

では、なぜさまざまなWebセーフフォントが必要なのですか?

フォントはブランディングの取り組みの重要な部分であり、フォントが意図したとおりに表示されない場合は、努力が損なわれたままになります。

昔は、使用したフォントを意図したとおりに表示するのは大変な作業でした。そのため、機能やデザインの問題が明らかになりました。

したがって、Webセーフフォントのリストに入る前に、

それらを使用する必要がある理由のいくつかを見てみましょう。 Webセーフフォントまたはフレンドリーフォント。これらは時々参照されることもあります。

1.ブラウザのいくつかのオプション

ご存知かもしれませんが、すべてのブラウザにはレンダリングされるデフォルトのフォントがあります。ウェブサイトのフォントを読み取ったり読み込んだりできない場合はどうなりますか?

Webセーフフォントを使用している場合、ブラウザにはかなりの数のフォントオプションがあり、可能な限り最も近い代替フォントを最初に試行し、プロセスで何も機能しない場合は、ブラウザ自体が使用するフォントを選択するため、このプロセスを簡略化できます。

2 。 セルフホストフォントを使用している場合の多くのバックアップの可用性

Google Fontsは、アイデア全体を一変させました。 1つは、GoogleFontsに接続するのはかなり簡単です。 すべてのブラウザで一般的に受け入れられているフォントを選択できます。

説明をわかりやすくするために、ホストファイルのリストにカスタムフォントを追加しても、フォントスタックにWebセーフフォントが追加されていない限り、互換性は保証されません。 このような場合、サーバーがダウンしたり、ユーザーのブラウザが使用しているフォントをサポートしなくなったりする可能性があります。 一言で言えば、ユーザーエクスペリエンス全体が大騒ぎになります。

一方、Webセーフフォントがフォントスタックに追加されると、ブラウザのデフォルト対応フォントにジャンプするのではなく、フォントが段階的に適切に劣化します。

また、EssentialPluginのバンドルパックには多くの人気のあるWordPressプラグインがあり、最高のWebセーフフォントを得るには、WordPress Google Fonts Proを使用できます。これにより、WordPressプラグインの数百種類からフォントを選択できます。

WordPress Google Fonts Pro
WordPress Google Fonts Pro

このWordPressGoogleFonts Proを使用すると、テーマのタイポグラフィを完全に制御でき、これはWPのどのテーマでも機能します。 Easy Post Google Fontsを使用すると、1つの投稿/ページで複数のフォントを使用できます。 すべてのページ要素を指定して、使用するGoogleフォントを指定できます。

ベストウェブセーフフォントリストをご覧ください。

今、あなたはあなたのウェブサイトに最適なフォントについて疑問に思っているに違いありません。 あなたの生活を楽にするために、私たちはあなたがあなたのウェブサイトをデザインするときに利用しなければならないフレンドリーなフォントのクイックリストをまとめました。

1.バスカヴィル

John Baskervilleによって設計されたBaskervilleは、1750年代にさかのぼるWebセーフフォントです。 このセリフフォントはそれ以来人気があり、その優れた読みやすさと文字性のために他のフォントよりも好まれています。

2.宅配便

ブランドやコピーにレトロなタッチを加えたい場合は、これが最適なフォントです。 読みやすく、上品な魅力があります。 このモノスペースセリフフォントはタイプライターテキストとまったく同じであり、通常、デフォルトの電子メールフォントとして使用されています。

3.ディドット

Didotは1700年代にまでさかのぼり、この時代を超越したセリフフォントについて多くを語っています。 それでもDidotを識別できませんか? それらのヴォーグ誌の​​表紙を覚えていますか? Didotは、ウェブサイトのデザインに活用できるおしゃれで曲線的なフォントです。

4.ガラモンド

リストにあるもう1つの注目すべきセリフウェブセーフフォントは、デザイナーの絶対的なお気に入りであるGaramondです。 これは、テキストを多用するデザインに最適であると考えられており、非常に優れたフォントを探している場合は、どのフォントを使用すればよいかがわかります。

5.タイムズニューローマン

Times New Romanは、その直接的でフォーマルな雰囲気のために、世界中のあらゆる人々に受け入れられており、特に学術的なテキストや法律事務所のコンテンツである場合はそうです。 Windowsのプライマリフォントであることは、その人気について多くのことを教えてくれます。 あなたは通常それを活字新聞で見つけるでしょう。

6.ジョージア

ジョージアは、その優雅さのために非常に人気のあるもう1つのセリフWebセーフフォントです。 何がそんなに人気があるのか​​疑問に思っているなら、ここにあなたの答えがあります。 読みやすさはジョージアの強みの1つです。 さまざまなフォントサイズでも読みやすいため、モバイルレスポンシブデザインに最適なフォントを探している場合は、Georgiaを選択する必要があります。

7.カンブリア

テキストの多いサイトやブログに最適なCambriaは、世界で最も人気のあるWebセーフフォントの1つです。 特に画面上で読みやすいように、間隔と比率が均等になっています。

8.Arial

最後になりましたが、Arial! それが世界で最も使用されているフォントであることは誇張ではありません。 ArialファミリのWebセーフフォントは、すべてのOSで利用できるため、安全な方法です。

結論:

ブランディングの観点から、Webセーフフォントを使用することは非常に重要です。 ただし、それだけが理由ではありません。 Webサイトやページのデザインの整合性を維持したい場合にも重要です。 エッセンシャルフォントの詳細については、お気軽にお問い合わせください。

後部関連記事:

WordPress用のGoogleFontsProプラグイン
WordPress Webサイトにフォントを追加する方法は?
WordPressのトップ7コンテンツマーケティングツールとプラグイン