Generic-family

フォントには様々な種類があるが、その形状から似通ったものを分類してGeneric-family（総称フォントファミリー）に分けられる。特にWEBデザインの世界では以下のような分類がよく使用される。この値はCSSのfont-familyの値で直接指定することができる特別な値である。

Serif (日本語では明朝体)
Sans-serif (日本語ではゴシック体)
Cursive (日本語では楷書体)
Fantasy (日本語では装飾体)
Monospace (日本語では等幅フォント)

この内で特に重要でよく使用するのはなものSerifとSans-serifであり、WEBデザインの表現において、より多くの端末でより再現度の高い見た目を提供するためには、その書体がどの分類に属しているのかは把握しておく必要がある。端末にインストールされているフォントは端末ごとに異なるので、優先順位でフォントを指定することで端末上に存在しないフォントの場合は、指定したいフォントにより近いフォントで表示させて最低限の見た目を再現する事が重要である。

例えば、デザイン上ではHelveticaであるのに、CSSの指定で以下のようにするのは不適切である。

font-family: Helvetica, serif;

HelveticaはSan-serifに属するフォントなので、Helveticaが存在しない場合にserifを表示させるのは基本的には間違っている。また、Helveticaが存在しない場合はArialが比較的Helveticaに近いので、以下のように指定する方が親切である。

font-family: Helvetica, Arial, sans-serif;

日本語フォントの場合も、上述の英語フォントの場合と同様にSerifとSans-serifを判断して同じ分類のファントやGeneric-familyを指定する必要がある。日本語フォントを扱う場合には日本人以外は字面から判断できない可能性も高いが、一部の書体は名称から判断することも可能である。SerifでWEBで利用されている有名な日本語フォントは「ヒラギノ明朝」「ＭＳ明朝」などがあり、英字では"Mincho", "Min"などが添え字がある。Sans-serifでWEBで利用されている有名日本語フォントは「ヒラギノゴシック」「ＭＳゴシック」などがあり、英字では"Gothic", "Go"などの添字がある。

font-family: 'ＭＳ Ｐゴシック' , 'MS PGothic' , sans-serif;

font-family: 'Hiragino Mincho ProN W3', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', serif;