Web サイトで使用できる 5 つの Web セーフ フォント

あなたが Web サイトの所有者であれば、HTML フォントが Web サイトで重要な役割を果たしていることを知っているはずです。 すべての Web サイトには、何らかの形式でテキスト コンテンツが含まれています。適切なフォントを正しく選択すると、ページの美しさが向上し、コンテンツの読みやすさにプラスの影響を与えることができます。そのため、Web サイトのデザインと開発は、実際に重要な要素の 1 つとなります。ビジネスを開始するための最も重要な側面。 不適切なフォントはスイートのパフォーマンスに悪影響を及ぼします。それはすべて、Web セーフ フォントを使用しているかどうかによって異なります。

Web セーフ フォントとは何ですか?

フォントがデバイスにインストールされている場合に限り、フォントはどのブラウザまたはデバイス (モバイル、タブレットなど) でも読み取り可能であり、同じように見えます。 Web セーフ フォントは、通常、コンピュータ、携帯電話、ゲーム機、タブレット、スマート TV などのデバイスにプレインストールされているフォントです。

あなたにおすすめ:偉大なデザイナーが必要とする 20 の素晴らしいロゴ デザイン フォント。

Web セーフ フォントが重要な理由

完璧な世界では、Web サイトに必要なフォントを選択できます。 ただし、オペレーティング システムに基づいて、デバイスには独自のプリインストールされたフォントの選択が付属しています。 問題は、その設計が通常、使用するシステムに応じて異なるという事実にあります。 Windows 上で動作するデバイスには 1 つのグループがあり、MacOS には別のグループがあり、さらに Google の Android には別の異なるバージョンがある場合があります。

Web サイトを表示するときに、ビューポートに表示されるフォントが、デザイナーが意図したフォントであるとは限りません。 意味: デザイナーが比較的目立たないフォントを使用しているとします。 そのフォントがインストールされていない場合、Web サイトはシステム定義の汎用フォントに戻り、あなたはそれを知らない可能性があり、見た目が不快になるだけです。

Web セーフ フォントは、すべてのシステムに存在するフォントのコレクションであり、デバイスに必要なフォントがない場合にデザイナーが代替フォントを指定できるようになります。 これにより、Web サイトをさまざまなデバイスで同じように表示できるようになります。

5 つのフォント ファミリとは何ですか?

タイポグラフィでは、すべてのフォントは、デザインの類似性に基づいて 5 つのフォント ファミリのいずれかに分類されます。 これらは次のとおりです。

1. 筆記体 (例: Zapf-Chancery)

Cursive フォント ファミリは人間の手書きを模倣しており、通常は文字が流れるように結合されています。 多くの場合、書道をしたり、書くのが速い人に関連付けられます。

2. ファンタジー (例: スターウォーズ)

Fantasy フォント ファミリのフォントは通常、各文字に装飾的な要素がありますが、それでも文字を表現します。 多くの架空の本や映画のタイトルには、内容のニュアンスを強調するためにこのファミリーのフォントが使用されています。

3. セリフ (例: Times New Roman)

Serif フォント ファミリの最も注目すべき機能は、文字または記号の大きなストロークの最後にある小さな線です。 エレガントさとフォーマル感を演出します。 多くの Web サイトで本文に広く使用されています。

4. サンセリフ (例: Helvetica)

Serif ファミリのフォントとは異なり、Sans-serif ファミリのフォントにはすべての文字に小さな線が付いていません。 このファミリーに属するフォントのほとんどは同様のストローク幅を持っているため、ミニマルでモダンなものになっています。

5. 等幅 (例: Courier)

Monospace フォント ファミリでは、各文字と記号が水平方向にまったく同じスペースを占めます。 したがって、それらは一貫性があり、区別しやすくなるため、タイプライターでよく使用され、最近ではコンピューター端末でも使用されています。

あなたは好きかもしれません：試してみる必要がある11の素晴らしいPhotoshopフォント（無料！）。

人気のある Web フォント:

フォントについて理解できたところで、Web サイトに追加できる人気の Web セーフ フォント 5 つを以下に示します。

1. エリアル

オンラインメディアと印刷メディアの両方で最も広く使用されているサンセリフ フォントの 1 つ。 それは事実上の標準です。 OpenType バージョン 3.0 では、次のように説明されています。

「現代的なサンセリフ デザインである Arial には、これまでの多くのものよりも人間主義的な特徴が含まれており、そのため 20 世紀最後の数十年間の雰囲気によりよく調和しています。 曲線の全体的な処理は、ほとんどのインダストリアル スタイルのサンセリフ顔よりも柔らかく、豊かです。 ターミナルストロークは斜めにカットされており、顔に機械的な外観を与えるのに役立ちます。 Arial は非常に汎用性の高い書体ファミリーであり、レポート、プレゼンテーション、雑誌などのテキスト設定や、新聞、広告、プロモーションでの表示用途に同様に使用できます。」

Google ドキュメントのデフォルトのフォントでもあります。

2. タイムズ・ニュー・ローマン

Times New Roman は、Serif フォント ファミリの Old Times フォントのバリエーションです。 1931年にイギリスの新聞「ザ・タイムズ」からの依頼で、印刷機器会社モノタイプの芸術顧問であり、タイムズの広告部門レタリング部門のビクター・ラーデントと協力したスタンリー・モリソンによってデザインされた。 これは史上最も人気のあるフォントの 1 つとして浮上しており、ほとんどのデバイスにプリインストールされています。

Times New Roman の Roman の名前は、Times New Roman フォント ファミリの最初にデザインされる部分である Roman スタイルを参照しています。 その起源は 15 世紀後半から 16 世紀初頭のイタリアの印刷物にあり、そのデザインはローマやローマ人とは何の関係もありません。

3. ヘルベチカ

Helvetica または Neue Haas Grotesk は、Sans-serif フォント ファミリの広く使用されているフォントです。 1957 年にスイスのフォント デザイナー、マックス ミーディンガーがエドゥアルド ホフマンの助言を得て開発しました。 ネオ・グロテスクなデザインで、高いxハイト、水平線または垂直線でのストロークの終端、文字間の非常に狭い間隔が特徴で、これらが組み合わさって重厚で緻密な外観を与えています。 元々は、非常に明瞭で、形式に本質的な意味がなく、さまざまな標識で使用できるニュートラル フォントとして使用するためにデザインされ、Neue Haas Grotesk (ニュー ハース グロテスク) と名付けられましたが、すぐに Linotype によってライセンス供与され、1960 年に Helvetica と改名されました。 , スイス人のラテン語。 このフォントはその中立性からデザイナーに愛されており、ジープ、カワサキ、モトローラ、BMWなどの多くの有名ブランドに愛用されています。

4. 宅配便

Courier フォントは、Serif フォント ファミリに属する​​フォントです。 Howard “Bud” Kettler によって元々は IBM のタイプライター用にデザインされましたが、コンピューター フォントとして使用できるように改良され、ほぼすべてのコンピューターにインストールされています。 等幅タイプセットのため、1990 年代には、文字の列を一貫して揃える必要があるエレクトロニクスおよびコンピュータ業界で新たに使用されるようになりました。たとえば、あらゆる種類のコードを記述または描写するためのデフォルト フォントであるコーディングの場合です。

業界標準によれば、すべての脚本は 12 ポイントの Courier で書かれることになっていました。 米国国務省は、2004 年 1 月まで、このフォントをすべての文書の標準フォントとして使用していました。デジタル産業での使用が増加するにつれて、Courier は、より大きな句読点、類似した文字 (数字の 0 / など) の区別を強化するなどの機能を備えたバリアントを開発しました。画面を読みやすくするために、大文字の O と数字の 1 / 小文字の L) などを使用します。

5. カリブリ

Calibri フォントは、2002 年から 2004 年にかけて Lucas de Groot によってデザインされた Sans-serif フォント ファミリのメンバーです。 これは 2007 年に一般にリリースされ、Microsoft Office 2007 および Windows Vista にバンドルされていました。 Office 2007 以降、MS Word のデフォルト フォントとして Times New Roman が置き換えられ、MS Powerpoint、MS Excel、Microsoft Outlook、および WordPad のデフォルト フォントとして Arial が置き換えられました。 これは、Microsoft の ClearType テキスト レンダリング システムと連携して、液晶ディスプレイ (LCD) 上でテキストを読みやすくするように設計された ClearType フォント コレクションの一部です。

チェックアウトすべきフォントツール

Web サイトでさまざまなフォントを使用する前に、それらをテストするために使用できるオンライン ツールが多数存在します。 利用可能なフォントの種類を調べたい場合、または使用するフォントの選択が難しい場合、これらのツールは非常に役立ちます。

フォントペア

Font Pair は、タイポグラフィーに関連したリソースが豊富にあるニッチな Web サイトです。 フォントに関するさまざまな電子書籍、ガイド、レビュー、ビデオ、プラグインの推奨事項があります。 Google で利用できる最も人気のあるフォントに特化したセクションがあり、どのフォントを組み合わせるのが最適であるかを詳細に比較しています。

ワードマーク.it

Wordmark.it を使用すると、特定のフォントまたは複数のフォントを組み合わせた場合にテキストがどのように見えるかを簡単にプレビューできます。 バーにテキストを入力するだけで、さまざまなフォントでどのように表示されるかが表示されます。

フォントとは

WhatTheFont はテキストを作成するものであり、画像を逆検索するのと同じです。 これは、見たことのあるフォントを識別するのに役立ちます。 フォントの画像をアップロードするだけで、データベースと照合され、最も近いと思われるものが表示されます。 また、アクティブなフォーラムにアクセスして、フォントを特定したり、一般的な活版印刷のクエリについてサポートを求めることもできます。

こちらもお勧めです: WordPress サイトのテーマにカスタム フォントを追加する 3 つの方法。

Web セーフ フォントを Web サイトに追加するにはどうすればよいですか?

Web セーフ フォントを選択したので、それを適用します。 プログラミングの経験がほとんどない場合は、次の手順に従って Web セーフ フォントを Web ページに追加します。

1. header.php ファイルを開きます。

2. フォントのソース/標準コードをコピーします。 通常、これは Google 経由で見つけることができます。

3. ヘッダー ファイルの先頭にコードを貼り付けます。

4. style.css をロードし、フォント コードを入力して、選択したフォント テキストを変更します。

最後までに、スタイルシートは次のようになります。

 この記事はアビヤンク・スリネットによって書かれています。 Abhyank は、ESCP Europe で管理の修士号を取得し、計測と制御を専門とする工学の学位を取得しています。 デジタル環境への関心がきっかけとなり、早期キャリアの修士号に関する質の高い情報を広めることに重点を置いた、アプリケーション コンサルティング (MiM-Essay) のオンライン スタートアップを設立しました。