フォントが崩れた中国語ウェブページや、読みにくいレイアウトの中国語ウェブページはよく見かけますが、しかしちょっとした工夫で、改善できるものです。
垂直方向で、中国語の読みやすさを影響する要素は主に三つです。
- フォントサイズ(font-size)
- 行の高さ(line-height)
- 余白(margin,padding)
中国では一番常用な指定は
- フォント:simsun
- 本文の文字サイズ:12px
- 行の高さ:1.5em
- タイトルの文字サイズ:24PX
- タイトルの上下余白:6pxずつ
中国ウェブデザイン常用フォントの記事にも書きましたが、中国語文章の本文は通常12pxの宋体(Simsun)を使います。行の高さの指定は通常文字サイズの1.5倍が綺麗に見える範囲です。つまり(line-height:1.5em)ということですね。
タイトルの場合、すこしややこしいですが、垂直方向のグリッドシステムを利用する手法もありますが。タイトルの文字サイズと余白を足して、18pxの倍数になっていれば綺麗に見えます。なぜなら、ちょうどグリッドシステムに載るからです。
実例で説明していくと、タイトルのフォントサイズを24pxにした場合、その上下の余白は6pxにあわせて指定すると、ちょうど18pxの倍数になるので、綺麗にみえます。
タイトルの指定例:
24px(文字サイズ)+6px(余白)+6px(余白)=18px×2