【CSS】line-heightとletter-spacingの仕組みと計算方法をわかりやすく解説

はじめに

Webサイトの文字を読みやすくするために欠かせないのが、行間（line-height）と文字間（letter-spacing）の調整です。
どちらもCSSで簡単に指定できますが、

• 「line-heightって数値を変えると何が変わるの？」
• 「letter-spacingはフォントサイズによってどう計算されるの？」

といった疑問を持つ方も多いはずです。

この記事では、line-heightとletter-spacingの仕組みと計算方法を初心者向けにわかりやすく解説します。
この記事を読めば、文字組みの基本が理解でき、見やすいWebデザインを作れるようになります。

line-heightについて

line-heightとは？

line-heightは行の高さ（行間）を決めるCSSプロパティです。
文字の上と下にどれくらい余白を取るかによって、文章の読みやすさが変わります。

line-heightの指定方法

p {
  line-height: 1.5;
}

• 単位なし（推奨）一番扱いやすく、推奨される方法
• フォントサイズに対する倍率で行の高さが決まる
• 子要素にも継承されるが、フォントサイズが変わっても自動で倍率計算される

line-heightの計算

行の高さは以下のように計算されます。

letter-spacingについて

letter-spacingとは？

letter-spacingは文字と文字の間隔（カーニング）を調整するCSSプロパティです。
日本語サイトではあまり大きく設定しないことも多いですが、英字や数字を使うデザインでは重要です。

letter-spacingの指定方法

p {
  letter-spacing: 0.05em;
}

• emで指定する方法（推奨）
• フォントサイズに応じて文字間隔が自動調整される
• レスポンシブデザインとの相性が良い

letter-spacingの計算

計算式は次のとおりです。

さいごに

この記事では、CSSで文字組みを整えるためのline-heightとletter-spacingについて解説しました。

• line-height ・・・ 行の高さ（行間）を決めるプロパティ
• letter-spacing ・・・ 文字と文字の間隔を調整するプロパティ

Webデザインは、見た目の装飾だけでなく文字の読みやすさも大切です。
line-height と letter-spacing を理解して、あなたのサイトの文章をもっと見やすく整えてみてください。