本文テキストの最適なラインハイト — 読みやすさのベストプラクティス

適切なラインハイトの見つけ方

ラインハイト（行送り）は、連続する行のベースライン間の垂直距離です。読みやすさにとって重要ですが、多くの開発者は基本的な原則を理解せずに任意の値をデフォルトにしています。

一般的なルール

16pxの本文テキストの場合、1.5から1.8のline-heightがほとんどのフォントに最適です。ただし、理想的な値は3つの要素に依存します：

1. フォントサイズ：大きなテキストはより少ないラインハイトが必要（見出しに1.2-1.4）
2. 行の長さ：長い行はより多いラインハイトが必要
3. フォント特性：高いxハイトのフォントはより多いラインハイトが必要

フォント固有の推奨値

/* Merriweather: 高いxハイト、より多くのスペースが必要 */
.merriweather { line-height: 1.8; }

/* Inter: 中程度のxハイト */
.inter { line-height: 1.6; }

/* Lato: コンパクトなxハイト */
.lato { line-height: 1.5; }

コンテキスト別のラインハイト

コンテキスト	ラインハイト	理由
見出し	1.1-1.3	視覚的な結合のためタイト
本文テキスト	1.5-1.8	快適な読書
キャプション	1.4-1.5	コンパクトだが読みやすい
コードブロック	1.5-1.6	垂直方向にスキャン可能
UIラベル	1.0-1.2	スペース効率的

行の長さとの関連

理想的な60-75文字の行の長さを10文字超えるごとに、ラインハイトを0.05増やしてください。段落が90文字に及ぶ場合は、1.6ではなく1.7を使用してください。