Skip to main content

Webサイト用のWebセーフフォントの選択

[Learn Muse] 03 Webセーフフォント (六月 2026)

[Learn Muse] 03 Webセーフフォント (六月 2026)
Anonim

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

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

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

Webフォントへのリンク

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

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

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

  • Arial
  • Arial Black
  • タホマ
  • Trebuchet MS
  • ヴェルダナ

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

  • センチュリーゴシック
  • ジュネーブ
  • ルシダ
  • ルシダサンズ
  • ルシダグランデ

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

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

  • 宅配便
  • Courier New
  • ジョージア州
  • タイムズ
  • Times New Roman

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

  • MSセリフ
  • ニューヨーク
  • パラチノ
  • パラチノリノタイプ

モノスペースフォント

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

  • 宅配便
  • Courier New

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

  • ルシダコンソール
  • モナコ

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

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

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

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

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

  • Arial
  • 宅配便
  • Courier New
  • ジョージア州
  • ヘルベチカ
  • パラチノ
  • Times New Roman
  • Trebuchet MS
  • ヴェルダナ

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

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