BOOKS
by Sukeharu Kano / 狩野祐東 著書

sans-serif、serif 以外にもあるCSSフォントファミリーのキーワード

2014-10-31

CSSでフォントを指定するにはfont-familyプロパティを使用します。カンマで区切って複数のフォントを指定しておくと、1つ目から順に探して最初に見つかったフォントで表示されます。どれも見つからなかったときの保険として、必ず最後に一般的なフォントファミリーを指すキーワードを入れておきます。書籍『スラスラわかるCSSデザインのきほん』ではsans-serifserifの2種類を紹介していますが、実はそれ以外にも3種類あります。

関連:『スラスラわかるCSSデザインのきほん』P.68、85

5種類の一般フォントファミリーキーワード

 特定のフォントではなく一般的なフォントの種類を指すキーワード(一般フォントファミリーと言われています)は、sans-serif、serif、cursive、fantasy、monospaceの5種類があります。

sans-serif

 欧文フォントでは「サンセリフ」を指すキーワードです。日本語では「ゴシック体」が該当します。

sans-serif

font-family: sans-serif;

ブラウザでの表示:Lorem ipsum ぐるりと回って猫の目。

serif

 欧文フォントでは「セリフ」を指すキーワードです。日本語では「明朝体」が該当します。

serifの書式

font-family: serif;

ブラウザでの表示:Lorem ipsum ぐるりと回って猫の目。

cursive

 手書き文字を指すキーワードです。欧文書体はOS、ブラウザによって表示するフォントが大きく異なります。また、日本語はこれに対応するフォントがなく、明朝体などで表示されます。使ってもあまり意味がないためほとんど使われません。

cursive

font-family: cursive;

ブラウザでの表示:Lorem ipsum ぐるりと回って猫の目。

fantasy

 装飾書体を表すキーワードです。cursive同様、欧文書体はOS、ブラウザによって表示するフォントが大きく異なります。また、日本語はこれに対応するフォントがなく、ゴシック体などで表示されます。使ってもあまり意味がないためほとんど使われません。

fantasy

font-family: fantasy;

ブラウザでの表示:Lorem ipsum ぐるりと回って猫の目。

monospace

 san-serif、seif以外で唯一よく使われるのがmonospaceです。等幅フォントを指します。等幅フォントとは1文字1文字の横幅が同じに作られた書体です。プログラムのソースコードを表示するときなどによく使われます。

monospace

font-family: monospace;

ブラウザでの表示:Lorem ipsum ぐるりと回って猫の目。

 ちなみに、次のページに異なるOS/ブラウザで表示されるフォントの違いが詳しく載っています(サイトのタイトルがちょっと… ですがよく調べられています)。──フォントカタログ5・ブラウザのデフォルトフォント http://rinrin.saiin.net/~aor/fonts/defaultfonts──
 お使いのOS、ブラウザでどう見えるかは以下のようなHTMLファイルを作れば簡単にチェックできます。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>一般フォントファミリーキーワード</title>
<style>
#sans-serif { font-family: sans-serif; }
#serif { font-family: serif; }
#cursive { font-family: cursive; }
#fantasy { font-family: fantasy; }
#monospace { font-family: monospace; }
</style>
</head>
<body>
	<p id="sans-serif">sans-serif ゴシック体</p>
	<p id="serif">serif 明朝体</p>
	<p id="cursive">cursive 手描き風書体</p>
	<p id="fantasy">fantasy 装飾書体</p>
	<p id="monospace">monospace 等幅書体</p>
</body>
</html>

狩野 祐東

Web/アプリケーションUIデザイナー、エンジニア。執筆家。 アメリカ・サンフランシスコに留学、UIデザイン理論を学ぶ。Webサイトやアプリケーションのデザイン・開発、関連技術書籍の執筆を数多く手がける。株式会社Studio947代表。