あなたのウェブサイトで使用できる一般的なフォント分類
ウェブサイトを設計する際には、作業するページの重要な要素の1つがテキストコンテンツです。 そのため、Webページを作成してCSSでスタイルを設定すると、その作業の大部分はサイトのタイポグラフィに集中します。
活字体のデザインは、ウェブサイトのデザインにおいて重要な役割を果たします。 うまくレイアウトされ、整形されたテキストコンテンツは、楽しく使いやすい読書体験を作成することで、サイトの成功を助けます。 タイプを扱う作業の一環として、デザインに適したフォントを選択し、 CSSを使用してそのフォントとフォントスタイルをページのディスプレイに追加することができます。 これは、「 フォントスタック 」と呼ばれるものを使用して行われます 。
フォントスタック
Webページで使用するフォントを指定するときは、フォントの選択肢が見つからない場合に備えてフォールバックオプションも含めることをお勧めします 。 これらのフォールバックオプションは、「フォントスタック」に表示されます。 ブラウザがスタックにリストされている最初のフォントを見つけられない場合は、次のフォントに移動します。 このプロセスは、使用できるフォントが見つかるか、選択肢がなくなるまで続きます（この場合は、必要なシステムフォントを選択するだけです）。 "body"要素にCSSを適用したときのフォントスタックの表示例を次に示します。
body {font-family：ジョージア州、 "Times New Roman"、serif; }最初にジョージアフォントを指定することに注意してください。 デフォルトでは、これはページが使用するものですが、何らかの理由でそのフォントが利用できない場合、ページはTimes New Romanにフォールバックされます。 そのフォント名は複数の単語名であるため、二重引用符で囲みます。 ジョージアやArialのようなシングルワードフォント名は引用符を必要としませんが、マルチワードフォント名はそれらを必要とするので、ブラウザはすべての単語がフォント名を構成することを知っています。
フォントスタックの終わりを見ると、 "serif"という単語で終わることに気付くはずです。 これは一般的なフォントファミリ名です。 万が一、ジョージアやタイムズ・ニュー・ローマンが自分のコンピュータにインストールされていない場合、そのサイトはセリフフォントを使用します。 サイトのデザインの全体的なルックとトーンができるだけ損なわれないように、少なくとも使用するフォントの種類を教えてもらうことができるので、サイトをフォールバックすることが望ましいです。 はい、ブラウザはあなたのフォントを選択しますが、少なくともあなたはどのような種類のフォントがデザイン内で最もうまくいくかを知るためのガイダンスを提供しています。
汎用フォントファミリ
CSSで利用可能な一般的なフォント名は次のとおりです。
- 筆記体
- ファンタジー
- モノスペース
- セリフ
- サンセリフ
slab-serif、blackletter、display、grungeなどのWebデザインやタイポグラフィでは他にも多くのフォント分類がありますが、これらの5つの一般的なフォント名は、CSSのフォントスタックで使用するものです。 これらのフォント分類の違いは何ですか？ 見てみましょう！
筆記体フォントには、しばしば手の込んだ手書きテキストを複製するための薄い、華麗な文字フォームがあります。 これらのフォントは、薄い花文字のため、本文コピーのような大量のコンテンツブロックには適していません。 筆記体フォントは、見出しや短いテキストのニーズに使用され、大きなフォントサイズで表示することができます。
ファンタジーフォントは、他のカテゴリにはあまり入っていない、ややクレイジーなフォントです。 ハリー・ポッターやバック・トゥ・ザ・フューチャー・ムービーの文字のようなよく知られたロゴを複製するフォントは、このカテゴリに入るでしょう。 繰り返しますが、これらのフォントはボディコンテンツには適していません。これらのフォントは、これらのフォントで書かれたテキストの長文を読むのが非常に難しいため、しばしばスタイルが付けられています。
モノスペースフォントは、古いタイプライターのように、すべての文字フォームのサイズと間隔が同じであるフォントです。 等幅フォントは、文字のサイズに応じて可変幅を持つ他のフォントとは異なり（たとえば、大文字の「W」は小文字の「i」よりもはるかに広いスペースを占める）、固定幅フォントはすべての文字に対して固定幅です。 これらのフォントは、コードがページに表示されているときによく使用されます。その理由は、コードがそのページの他のテキストとは明らかに異なっているからです。
セリフフォントは、より一般的な分類の1つです。 これらは文字の上に少し余分な合字を持つフォントです。 これらの余分な作品は "セリフ"と呼ばれています。 一般的なセリフフォントは、GeorgiaとTimes New Romanです。 セリフフォントは、見出しのような大きなテキストにも、テキストや本文の長いパスにも使用できます。
サンセリフは我々が見る最終的な分類です。 これらは前述の合字を持たないフォントです。 名前は「セリフなし」を意味します。 このカテゴリの一般的なフォントは、ArialまたはHelveticaです。 serifと同様に、sans-serifフォントは見出しや本文にも同様に使用できます。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：10/16/17