中国語ウェブレイアウト:垂直方向のリズム


フォントが崩れた中国語ウェブページや、読みにくいレイアウトの中国語ウェブページはよく見かけますが、しかしちょっとした工夫で、改善できるものです。

垂直方向で、中国語の読みやすさを影響する要素は主に三つです。

  • フォントサイズ(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

以下は表示サンプルです。
中国語ウェブレイアウト:垂直方向のリズム