drifting blog by snotch

　
movabletype を例に、パブリッシングシステムにおける日本語文字表示に関して・・・
パブリッシングシステムのレイアウトを考える場合、タイトルはもちろん、本文の文章の長さが記事によって異なるということを念頭に置かなければならない。結果として、流体風のデザインをする必要が出てくる。記事の長さが変化しても対応できるということは、画面の大きさや解像度の変化に対しても柔軟に対応できるということにもなる。また、記事入力時に、入力者が全ての環境におけるアウトプットの結果を予測出来るわけではないので、再現性に十分な幅を持たせておく必要がある。以上の前提をふまえて、記事本文表示に関するスタイルについて考えてみたい。movabletype のデフォルトのスタイルシート中で、本文の表示に関係する部分は以下のとおり。

.blogbody {
	font-family:palatino, georgia, verdana, arial, sans-serif;
	color:#333;
	font-size:small;
	font-weight:normal;
	background:#FFF;
	line-height:200%;
}

英文の表示に関しては、ほぼ問題の無いスタイル指定であろう。ところが、日本語を表示させるとなると幾つかの工夫が必要になる。
まず、font-size について。記事の長さと、閲覧環境が大きく変動し、かつ、アウトプットが完全に予測できないということを考えると、当然相対サイズ指定が好ましい。見出しや記事の長さが大きく変動する場合、文字の大きさを絶対値で指定するメリットはほとんどない。また、絶対値でフォントの大きさを指定すると、ユーザがブラウザ操作によって文字の大きさを変えることが、一般にできない。その点で「small」指定は１つの解では有り得る。しかし、「small」 の解釈が IE とNN で異なるので、NNで表示した場合には小さすぎる。よって、100%～90%という指定が最も適しているように思う。
font-family については、各OSのゴシックの標準フォントを記述しておく必要があるだろう。特に意図がなければ、パソコンモニターでは明朝よりもゴシックのほうが読みやすい。
color については、画数の多い日本語表示には、#333よりも#000のほうが読みやすく、見栄えも良いと思う。ここの違いは微妙。
line-height は、英文よりも若干狭くても、支障無いように思うので、170%としてある。ここも、相対サイズ指定が好ましいことは、font-sizeの理由に同じである。
letter-spacing は、1px入れてやるとずっと読みやすくなる。これがないとずいぶんと窮屈な印象を与えてしまう。
結果、以下のようになった。どうでしょうか？

.blogbody {
	font-family: verdana, Helvetica, 
	"ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
	color:#000;
	font-size:90%;
	font-weight:normal;
	background:#FFF; 
	line-height:170%;
	letter-spacing:1px;
}