ここでは、CSSでのフォント関連の指定を解説します。フォントファミリ、フォントサイズ、文字間、行間はサイトの見た目を印象付ける要因ともなるので、必ず指定しましょう。
font-size
font-sizeを指定する時にはまずbodyに指定をする方法が良いでしょう。bodyにfont-sizeを指定することにより見出し以外の要素に指定したものが継承されます。これによりサイト全体のフォントサイズを管理しやすくなります。つまりbodyで指定した数値を変更することでサイト全体のフォントサイズを変更することができるようになります。しかしh1要素やh2要素といった見出しの要素のフォントは変わりませんので、個々に指定してあげなくていけません。
CSS
[css]
body {
font-size: 75%;
}
[/css]
ここではfont-sizeを75%と指定しました。サイトにもよりますが、標準的な本文のサイズは12pxで作ることが多いと思いますので、75%としています。ちなみにWindows Internet Explore 6のデフォルトのサイズは、mediumの大きさで約16px相当です。
また全称セレクタを用いて見出し要素を含めたfont-sizeを管理する方法もあります。
CSS
[css]
* {
font-size: 100%;
}
body {
font-size: 75%;
}
[/css]
こうすることにより見出し要素も一定のサイズで管理することができます。
この様に指定して個々の要素に対して指定すると楽になります。
font-family
font-familyプロパティを指定することで、ユーザーが指定したフォントを持っていればそのフォントを表示することができます。しかしユーザーが指定したフォントを持っていない場合も考慮して、一般的なフォントファミリを指定し、ある程度意図した体裁のフォントを表示できるようにしましょう。
CSS
[css]
* {
font-size: 100%;
}
body {
font-size: 75%;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
}
[/css]
ちなみに優先順位は左が最も高くなります。「ヒラギノ角ゴ Pro W3」がなければ、「Hiragino Kaku Gothic Pro」を、なければ、「MS Pゴシック」を表示させ、さらにこれもなければ、ユーザーの持っている「サンセリフ体」のフォントを表示させるようにしてあります。
line-height
次に行間を指定していきます。特にブラウザのデフォルトのスタイルだと、行間が詰まりすぎている印象があります。長い文章がある場合は読みやすさを考え、行間を調整した方がよいでしょう。行間を調整するには、line-heightプロパティを用います。line-heightプロパティの初期値はnormalになっていて、主なブラウザは、これをフォントサイズの1～1.2倍の高さとしています。ですからこれより大きい値にしてやれば良いことになります。
CSS
[css]
* {
font-size: 100%;
}
body {
font-size: 75%;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
line-height: 1.4;
}
[/css]
line-heightプロパティの指定には、単位なしの倍率で指定する方法の他にも、長さの単位やパーセントといった指定の方法があります。しかしpxやpt・em・パーセントでは文字サイズを拡大した時や指定の継承されかたに差があるので、行間が詰まりすぎてしまう場合があります。この様な理由から単位なしの倍率で指定しておいたほうが無難です。
letter-spacing
次に文字間を指定します。文字間はletter-spacingプロパティを用いて指定します。letter-spacingプロパティの初期値はnormalとなっており、フォント自体が持っている間隔で表示されます。ここでもbody要素に対してサイト全体の文字間を指定します。
CSS
[css]
* {
font-size: 100%;
}
body {
font-size: 75%;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
line-height: 1.4;
/*\*/
letter-spacing: 0.1em;
/**/
}
[/css]
ここではemの単位を使用しました。emはその時採用されている値を基準とした単位です。例えばfont-sizeが12pxで表示されているなら、その0.1em分は、1.2pxとなります。文字間は狭すぎても、大きすぎても読みづらい印象を与えるので、慎重に指定をしましょう。
ここでは\(バックスラッシュ)を用いた妙な記述をしていますが、これは「Backslash Hack(バックスラッシュハック)」と呼ばれるもので、コメント(/* */)を閉じる直前に「\」を記述すると、Mac Internet Explore 5ではそこから以降普通にコメントするまでの間に記述されたプロパティを無視するという特徴です。
なぜこのようなことをするかというと、Mac Internet Explore 5では、日本語などの多バイト文字が含まれている要素にletter-spacingプロパティを指定すると、ボックスの幅が広がり、表示が乱れるというバグを持っているからです。