行間とは何か、なぜ重要か

CSSの line-height プロパティは、テキストの行と行の間隔を制御します。日本語は漢字・ひらがな・カタカナという視覚的に重い文字が並ぶため、英文よりも広い行間を確保しないと文字塊が「ぎっしり」と圧迫感を持ち、読み進める意欲を削ぎます。逆に広すぎると、行と行のつながりが切れてしまい、文章としてのまとまりが失われます。

実務でつまずく最大のポイントは、英文のCSSフレームワーク(BootstrapやTailwindのデフォルト)が line-height: 1.5 程度を想定して作られていることです。これを日本語にそのまま適用すると、ほとんどのケースで「狭い」と感じる結果になります。日本語Webでは別の基準を持つ必要があります。

line-height: 1.5(タイトな表示向け)

1.5は、UIコンポーネント、ナビゲーション、ボタンラベル、フォームのプレースホルダー、テーブルセルなど、「1〜2行で完結する短いテキスト」に向いています。狭い空間に情報を詰め込みたい場面では、1.5前後にしないと縦方向のスペースを浪費してしまいます。

一方、3行以上続く本文に1.5を当てると、行が密集して読みにくくなります。特にスマホで段落の高さが画面の半分を超えるような長文では、ユーザーが「読む気が失せる」最大の原因になります。1.5は本文には使わない、と覚えておくのが安全です。

line-height: 1.7(本文の標準)

1.7は、日本語Webにおける本文の標準値として最も広く使われている数値です。可読性を確保しつつ、縦方向のスペースを過度に消費しない絶妙なバランスが取れます。コーポレートサイトの紹介文、サービス説明、ブログの本文、商品詳細など、ほとんどのケースでまず1.7を試すべきです。

KumiFontのシミュレーターでも、本文のデフォルト値は1.8前後に設定されています。これは1.7をベースにしつつ、明朝体や情緒系フォントでの読みやすさをわずかに上乗せした値です。プロジェクトに迷ったら1.7〜1.8の範囲で微調整してください。

line-height: 2.0(長文記事・ゆったり読ませる)

2.0は、書籍的な「腰を据えて読む」体験をWebで再現したい時に使います。エッセイ、長文ジャーナリズム、文学系メディア、ブランドストーリーページなど、ユーザーに時間を取って読んでほしいコンテンツに最適です。明朝体との相性が特に良く、Shippori MinchoやKaisei Optiと組み合わせると、書籍を捲るような上質な読み心地が生まれます。

注意点は、UIや短文には絶対に使わないことです。2.0をボタンラベルやテーブルに当てると、間延びして「素人っぽい」印象になります。長文セクションだけにスコープを絞って適用するのがコツです。

デバイスによる調整

スマホはPCより画面が狭く、1行あたりの文字数が少ないため、行間がやや広く感じられます。PCで1.8がちょうど良いと感じても、スマホでは1.7に下げたほうがバランスが取れる場合があります。逆に、PCで2.0を使うとスマホでは間延びしすぎることがあるので、メディアクエリで段階的に調整するのが理想です。

例: PC で本文 line-height: 1.8、スマホで line-height: 1.7。これだけでも体感の読みやすさが変わります。KumiFontのPC/スマホ切替プレビューで両方確認しながら決めるのがおすすめです。

まとめ

行間は「UI=1.5、本文=1.7、長文=2.0」を起点に覚えてください。フォントの種類、文字サイズ、想定読者の集中度によって0.1単位で微調整するのがプロの仕事です。たかが行間、されど行間。この1パラメータで読了率は確実に変わります。