和文の行送りを1.5で止めないための三つの基準

CSSフレームワークの多くは本文のline-heightを1.5前後に設定している。欧文を基準にした値で、和文にそのまま当てると行間が詰まって見える。和文は字面が正方形に近く、ディセンダーのような行間の“逃げ”がないためだ。

ただし、1.8や2.0に上げれば済むという話でもない。行送りを広げすぎると、視線が次の行頭へ戻るときに迷いやすくなる。ここでは編集部が実際に使っている三つの基準を紹介する。

基準1：字面率の高い書体ほど広げる

同じ16pxでも、書体によって字面の大きさは違う。Noto Sans JPのように字面が大きい書体は、文字同士の白が少なく、行送りを1.8程度まで広げてちょうどよい。字面が小さめの明朝体なら1.7でも窮屈に見えないことが多い。

判断に迷ったら、本文を10行ほど表示して目を細めてみる。行が帯状につながって見えたら狭すぎ、行ごとに独立した線に見えれば十分だ。

基準2：行長が長いほど広げる

1行の文字数が増えるほど、行末から次の行頭までの移動距離が長くなる。35字前後なら1.7〜1.8、45字を超えるなら1.9以上が目安になる。本誌の読書調査でも、45字以上の行長では行送り1.9の条件で読み戻りが減った。

逆に、スマートフォンで20字前後になる場合は1.7まで詰めてよい。画面が小さいと、行送りが広いぶん1画面に入る情報量が減り、スクロール回数が増えるからだ。

基準3：段落が短い媒体は詰める

ニュース記事のように1段落が2〜3行で終わる媒体では、段落間の余白が行間の役割を補う。この場合は行送りを1.7に抑え、段落の間隔を1em程度取ると、全体のリズムが整う。

反対に、論考やエッセイのように1段落が10行を超える文章では、行送りそのものが読みやすさを左右する。段落間隔より行送りを優先して調整したい。

clamp()で行長と一緒に変える

行長はビューポート幅に連動するので、行送りも幅に合わせて変えると管理しやすい。本誌では本文に次のような指定をしている。

.prose { line-height: clamp(1.7, 1.55 + 0.4vw, 1.9); } 値の根拠を残しておくことも大切だ。デザインシステムの設定ファイルに「なぜこの値か」を一行書いておくだけで、半年後の改修で数値が無根拠に戻されることを防げる。