中国語Webページの組版におけるいくつかの細かなポイント v2

中国語と英語が混在する場合、個別に気をつけたい細かな点がいくつかあります。

行の高さ

ラテン文字にはアセンダー(上に突き出る部分)とディセンダー(下に突き出る部分)があり、見た目の上でもともと余白が生まれます。一方、漢字は正方形の字形で、1文字ごとに枠いっぱいを埋めます。そのため、中国語の本文にはより大きな行の高さが必要で、1.7 前後だと読みやすく感じます。英語のWebページでよく使われる 1.4–1.5 では、中国語には窮屈すぎます。

行の幅

1行が長すぎると、改行時に視線が次の行の位置を見失いやすくなります。短すぎると、今度は頻繁に改行が入ります。17px の本文に対して 680px 前後のコンテンツ幅を組み合わせると、1行あたり約 40 文字の漢字が収まります。

フォント

Webフォントは埋め込まず、システムフォントスタックをそのまま使います。苹方(PingFang SC)、Hiragino、Noto Sans CJK です。中国語のフォントファイルは数 MB になることも珍しくなく、埋め込むコストは得られる利点をはるかに上回ります¹。

その他

• 本文では text-wrap: pretty を使いません。英語では最終行に単語が1つだけ残る状態を避けられますが、中国語の段落ではかえって行末がガタガタになります
• 見出しには text-wrap: balance を使い、複数行にわたる見出しの長さをより均等にします
• 中国語と英語の間のスペース(text-autospace を使うかどうか、まだ検討中です)