日本語のみに別のCSS設定をする

今のデザインは、記事部分のフォント・サイズ(font-size)を14pxに。行の高さ(line-height)を1.4emに設定してあります。英文だとこれで全然問題ないのですが、やはり日本語だと行間がキツイです。そこで、記事内の日本語のみ少し大きめのline-heightを設定してみました。

TrueTypeフォント パーフェクトコレクション

TrueTypeフォント パーフェクトコレクションによれば、欧文の行間(レディング)はフォント・サイズの20%くらいでOKだそうですが、和文の場合は50%、もしくは75%くらいが適切だそうです。ちなみに、組版用語では、50%を「二分アキ」、75%を「二分四分アキ」と言うんだとか。ともかく、欧文の行間は、和文の行間よりも狭くすると言う事です。

そこで、和文のline-heightを1.7emに変更しました。一応、1.6emとか、line-heightはそのままで、フォント・サイズを小さくしたりするのも試したのですが、結局は1.7に。

フォントのサイズと行の高さ

それから、フォントの種類も日本語の場合は和文フォントで表示されるようにしました。特に、記事のタイトルはこれで見栄えがよくなったと思います。

これらを日本語のみに適用する方法ですが、lang 属性を指定した擬似クラスを使っています。もちろん、XHTMLにて言語(lang)属性を正しくマークアップしている必要があります。その変を考慮しているのが、BasicBilingualの良いところの1つ。

[css]
div.entry h1:lang(ja), div.entryBody h2:lang(ja), div.entryBody h3:lang(ja), div.entryBody h4:lang(ja) {
font-family: “MS Pゴシック”, Osaka, “ヒラギノ角ゴ Pro W3”, Verdana, Arial, Helvetica, sans-serif;
}
div.entryBody p:lang(ja) {
line-height: 1.7em;
font-family: “MS Pゴシック”, Osaka, “ヒラギノ角ゴ Pro W3”, Verdana, Arial, Helvetica, sans-serif;
}
[/css]

ただし、これの欠点はIEでは認識されない事。バグではなく、そう言う仕様です。IE7でもその方針(ベータ)だそうで・・・。IEにも適用させるには、今のところ新たなクラスを作る以外方法はなさそうです。