中国語ウェブレイアウト:垂直方向のリズム
フォントが崩れた中国語ウェブページや、読みにくいレイアウトの中国語ウェブページはよく見かけますが、しかしちょっとした工夫で、改善できるものです。
垂直方向で、中国語の読みやすさを影響する要素は主に三つです。
- フォントサイズ（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
以下は表示サンプルです。
