基本フォントの指定

スタイルシートで、必ずフォントの指定をしておかなければいけないわけではありません。指定しておかなければ、ブラウザで設定したフォントで表示されます。

フォントを指定する理由はデザイン、つまりサイト制作者の趣味、そして文字化け対策です。文字化け対策は別項で述べましたので、ここでは好みのフォントをどう選び、どう指定していったらいいかを記します。

まず、body 命令（body {}）で基本スタイルを指定します。もちろん、個別に指定していってもかまわないのですが、やはり基本スタイルをきめて、見出し等はその何倍、というふうにしたほうが、わかりやすいです。

font-size 属性

フォントサイズは、だまっていると16pxになります。1emもおなじで、あとはブラウザしだいです。外国製の CSS は、この基本サイズが10pxとか、11pxになっていることが多いのですが、これでは日本語（漢字）表示には小さすぎます。最低12pxは必要でしょう。

それで、px と em のどちらがよいかですが、px は固定、em は相対表示となるので、ブラウザでの操作（拡大・縮小）をゆるさないのなら px、ゆるすのなら em で指定します。

em が推奨されていますが、このサイトではデザインがくずれることをきらって14pxとし、あとは em で調整しています。しかし、Firefox や Mac IE では px で指定しても拡大・縮小されてしまいます。

font-family 属性

フォントファミリは、最初に記述したものが優先され、そのフォントがなければ次に書かれたフォント、それがなければその次…で表示されます。このサイトでは和文フォントは指定していません。

和文フォントを指定するときは、たとえば次のようにします。

font-family: Verdana, sans-serif, "ＭＳ ゴシック", "Osaka‐等幅", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3";

和文フォントと欧文フォントの両方を書くと和欧混植となります。プロポーショナルフォントではなく、「ＭＳ ゴシック」とか「Osaka‐等幅」のモノスペースフォントを指定すれば、全角空白、かな、約物（句読点やかっこ類）がつまるのをさけられます（でも、iCab は等幅になってくれません）。「Osaka‐等幅」のダブルクォートはいらないはずですが、はずすと、なぜか Firefox で欧文も含めて全部「等幅」で表示されます。

和欧混植で注意が必要なのは、ブラウザによっては、特定の全角文字（記号）が意図しない形で表示されるばあいがあることです。たとえば、「… ○ ● □ ■」が、Verdana では「… ○ ● □ ■」に、Helveticaでは「… ○ ● □ ■」、Arial では「… ○ ● □ ■」、ついでに Courier では「… ○ ● □ ■」となります。

Verdana は奇妙ですね。

＜span style="font-family: Verdana"＞… ○ ● □ ■＜/span＞

というふうに、HTML 中に直接スタイルを記述したばあいは「… ○ ● □ ■」となります。

line-height 属性

ラインハイトとは、行の高さのことです。これも指定しないとブラウザまかせとなりますが、狭いと読みにくいですから、少し広めに指定しておくとよいでしょう。

行送り（行間）は、字詰め（1行の文字数）が多ければ広く、少なければ狭くが基本ですから、文字サイズが小さいときは広めに、大きいときは狭めでいいということになります。また長い文章では広く、短い文章では狭めにするとよいでしょう。1.5を基準に好みで調整してください。

それで、どこに記述するかですが、body ではメニューや見出し等、テキスト全部に適応されますから、これは本文のみとするのがよいでしょう。このサイトでは

.content {
padding: 20px;
line-height: 1.5;
}

と、content クラスに記述しています。