Webセーフフォント

どのようにあなたのウェブサイトに最適なフォントを選択する

業界、企業規模、またはその他の差別化要因にかかわらず、あらゆるウェブサイトを見てみましょう。共通のものがテキストコンテンツであることが確かに分かります。 テキストが表示される方法は、タイポグラフィデザインの実践です。サイトのルック・アンド・フィールとその成功の最も重要な側面の1つです。

長年にわたり、Webデザイナーは、作成しているWebサイトにこれらのフォントを確実に表示するには、使用できるフォントの数に制限がありました。 ほとんどのコンピュータで見つかったこれらのフォントは、「Webセーフフォント」として知られていました。 特定のフォントの選択がサイトのデザインで使用できなかった理由を説明しようとしたときに、Webデザイナーからこの用語を聞いたことがあるかもしれません。

Webタイポグラフィーはここ数年で大きく進歩しており、Webデザイナーや開発者はWebセーフフォントのほんの一部を使用することに限られていません。 ウェブフォントの登場とフォントファイルへの直接的なリンクは、ウェブサイトのフォント使用の可能性の全く新しい世界を開いた。 現在多くの新しいフォントの選択肢にアクセスできるように役立つので、試行錯誤したウェブセーフフォントは、現代のウェブデザインにおいて重要な位置を占めています。

Webフォントへのリンク

あなたのサイトの他のコンピュータにないフォントを使用する場合は、Webフォントファイルにリンクし、訪問者のコンピュータを見る代わりにそのフォントファイルを使用するようWebサイトに指示する必要があります。 残りのサイトアセットに含まれているか、サードパーティのフォントサービスを使用してリンクできる外部フォントにリンクすると、フォントの選択肢はほとんど無制限になりますが、そのメリットは価格で提供されます。 外部フォントをサイトに読み込む必要があり、Webページの読み込み時間にパフォーマンスに影響を与えます。 これは、Webセーフフォントがまだ利益になることができる場所です! これらのフォントファイルは訪問者のコンピュータから直接読み込まれるため、Webサイトが読み込まれるとパフォーマンスが低下しません。 これは、多くのWebデザイナーが、信頼性の高いウェブセーフフォントと一緒にダウンロードする必要があるWebフォントの混合を使用する理由です。 サイトのパフォーマンスや全体的なダウンロードの影響を管理できると同時に、新しいフォントやエキゾチックなフォントにアクセスできるようになると、これは両方の世界で最適です。

サンセリフウェブセーフフォント

このフォントファミリは、Webセーフフォントのベストベットの1つです。 これらをフォントスタックに含めると、ほぼすべての人がページを正しく表示します。 一般的なサンセリフWebセーフフォントには以下のものがあります:

あなたが全体的にカバレッジに優れているが、一部のコンピュータには欠けているかもしれないサンセリフの選択肢は以下の通りです。 これらを使用する場合は、上のリストのバックアップとして、より一般的なものをフォントスタックに含める必要があります。

セリフウェブセーフフォント

サンセリフフォントに加えて、セリフフォントファミリは、ウェブサイトでも人気の高い選択肢です。 セリフフォントが必要な場合に使用する最も安全な方法は次のとおりです。

繰り返しになりますが、以下のリストは、多くのコンピュータ上にあるフォントですが、上のリストのように全体のカバレッジが少ないフォントです。 これらのフォントはかなり信頼できるものですが、フォントスタックにもっと一般的なserifフォント(上記のリストから)を含める必要があります。

モノスペースフォント

セリフやサンセリフフォントとして広く使われているわけではありませんが、モノスペースフォントもオプションです。 これらのフォントは、すべて等間隔の文字を特徴としています。 プラットフォーム間で広く受け入れられるわけではありませんが、モノスペースフォントを使用する場合は、これが最良の方法です。

これらのフォントにもいくつかのカバレッジがあります。

筆記体とファンタジーフォント

筆記体フォントとファンタジーフォントは、セリフやサンセリフとしては人気がありません。これらのフォントの華やかな性質は、身体のコピーとして使用するのが不適切です。 これらのフォントは、見出しやタイトルとして使用されることが多く、フォントのサイズを大きくしたり、テキストを短くしたりする場合にのみ使用されます。 文体的にはこれらのフォントはすばらしく見えるかもしれませんが、フォントを使って設定したテキストの読みやすさに対して、フォントの見た目を重視する必要があります。

WindowsとMacintoshでは使用できる筆記体フォントは1つだけですが、Linuxでは使用できません。 それはComic Sans MSです。 ブラウザとオペレーティングシステム間で良好なカバレッジを持つファンタジーフォントはありません。 これは、あなたのウェブサイトでファンタジーフォントの筆記体を使用している場合、おそらくそれらをWebフォントとして使用し、適切なフォントファイルにリンクしていることを意味します。

スマートフォンとモバイルデバイス

モバイルデバイス用のページを設計している場合、ウェブセーフフォントの選択肢は可変です。 iPhone、iPod、およびiPadデバイスの場合、一般的なフォントは次のとおりです。

外部フォントを読み込めるようになると、デバイス間でより一貫性のある外観が得られるため、Webフォントはマルチデバイス設計を検討する際に最適です。 1つまたは2つのWeb安全な選択肢を使用してダウンロードしたフォントを調整し、サイトが成功するために必要な外観とパフォーマンスを得ることができます。

Jennifer Kryninのオリジナル記事。 ジェレミージラール編集:8/8/17