ウェブデザインにおけるline-heightについて

目次

以下はページ内のセクションへのリンクです。

• CSSのline-heightでは文字の上下にスペースができる
• ウェブで使われるハーフ・レディングとは
• 印刷とウェブにおけるレディングの違い
• デザインツールでのline heightの扱いの違い
• 上下のハーフ・レディングを帳消しにするコーディング
• line-heightのnormalとは
• line-heightの100%ってなんの100%？
• line-heightの値は単位なしで記述するのがいい
• line-heightとアクセシビリティ
• 読みやすいline-heightについて考える
• さいごにひとこと
• 参考情報

ウェブで使われるハーフ・レディングとは

CSSの定義 では文字サイズと行の高さの差をleading（レディング）と呼び、その半分をhalf-leading（ハーフ・レディング）と呼びます。CSSでline-heightを指定すると、そのハーフ・レディングが文字の上と下に追加される仕組みなんですね。

ちなみに、レディングは活版印刷で行間にスペースを入れる際に鉛（lead = レッドと発音する）のプレートを使っていたことに由来していて発音は「リーディング」ではなくて「レディング」です。

そして、このハーフ・レディングがマイナスの数値になると行が重なります。下の例の場合、(2 – 16) ÷ 2 = -7になるので、行が重なります。

p {
  font-size: 16px;
  line-height: 2px;
}

意図的にすることはあまりないと思いますが挙動は知っておくと良いですね。

デザインツールでのline heightの扱いの違い

FigmaやAdobe XD、Affinity DesignerやAdobe Illustratorなど、デザインツールによってline heightの扱いは異なります。CSS line-heightと違うことも多いので注意が必要です。

CSSのline-heightの仕組みとデザインツールのline heightの扱いの違いを理解しているとデザインの精度が上がって実装の効率化にもつながります。デザインと実装（コーディング）は分業することが多いと思うので、デザインの引き渡しの際のチェックポイントとしてline-heightについてしっかりコミュニケーションしておくと、スムーズに実装を進められるかもしれませんね。

僕は1人チームでデザインもコーディングもしますが、コーディングの際にデザインで吸収できなかった細かい空きの設計を調整したり整理し直すこともあります。

line-heightのnormalとは

line-heightのデフォルトはnormalという値なんですが、これはユーザエージェントに依存する値だそうです。MDN Web Docsのline-heightの説明 は以下のようになっています。

ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の font-family によって決まる、おおよそ 1.2 という既定値を使います。

おぉ、なんとも曖昧な…感じではあるのですが、CSSで指定したフォント（font-family）に設定されたメトリクス（フォント・パーツのサイズ）に従うということのようです。「おおよそ1.2…」というのは、一般的にフォント・メトリクスによるline heightがおおよそ1.2だということを意味するのでしょうか。ちょっとわかりづらいですね…

font-familyに依存するということは、フォント編集アプリなどを使ってメトリクスを見るか実際にHTML/CSSで実装してブラウザで確認しないとわからないということです。和文フォントではそこまで数値の振れ幅は大きくない印象ですが、2017年2月に書かれたVincent De Oliveiraさんのこの記事 によると、Google Fontsでインストールした1059のフォントのうち95%はline-heightは1より大きい数値で、0.618〜3.378だとのことで、欧文では振れ幅が結構大きいようです。

結局、各OS・ブラウザでの検証は欠かせないですね。

line-heightの値は単位なしで記述するのがいい

line-heightの指定には単位なしの数値を使うことが推奨されています。

p { line-height: 1.5; }

というのも、親要素にフォントサイズが指定されていてline-heightに%やemを使った値を指定すると、font-sizeからline-heightを計算した値が継承されるからです。これが直感的じゃないんですね。

どういうことかというと、たとえば、以下のようにdivの中にh1が入っているHTMLがあるとします。

<div class="box">
  <h1>ここの行間が予期せぬ値に！</h1>
</div>

このHTMLに対して以下のCSSを指定するとh1のline-heightはいくつになると思いますか？

.box {
  font-size: 16px;
  line-height: 150%;
}
h1 {
  font-size: 32px;
}

32px x 150% = 48pxになると思いそうですよね？

ところが実際は24px（=16px x 150%）がh1のスタイルに継承されます。

これはemを使った場合でも同じですが、単位なしの数値を指定すると、その数値がそのままh1に継承されるので、h1のline-heightは48px（32px x 1.5）になります。なんで？と疑問に思いますが、それが仕様なんですね。はい。

上記の例について「こんなCSSの書き方するかなぁ？」と、若干懐疑的な自分ではありますが、未知の問題は避けたいのでline-heightは単位なしの数値で指定するのがよさそうです。逆に単位なしの数値の指定のみで困ることも想像できません（あったらぜひ教えて欲しいです）。

ブラウザでの文字サイズ変更にも対応できる

line-heightに単位なしの数値を使うと文字サイズにあわせた行間の指定になるので、ユーザがブラウザの設定で文字サイズを変更した場合、それにあわせて行間も変わります。line-heightをpxやem、remで指定するメリットは特になさそうなので、僕は単位なしの数値で記述しています。

あと、レスポンシブで文字サイズを可変させるデザインだと、行間が文字サイズと連動していた方がCSSが書きやすいです。

読みやすいline-heightについて考える

欧文と和文では読みやすいline-heightは若干違いますし、フォントの種類や文字サイズ、行の長さによっても異なります。あくまで個人的な意見ですが、僕が考える読みやすいline-heightの目安をご紹介します。

本文のline-height

• 和文は1.8 – 2.0
• 欧文は1.5 – 1.8
• 和文は欧文より若干広めの行間を設定するのが良い
• 欧文はフォントによって行間の余白部分の大きさが変わるので要注意

参考までに、ウェブの欧文タイポグラフィについて詳しい本「ウェブタイポグラフィ — 美しく効果的でレスポンシブな欧文タイポグラフィの設計 」では、「1.4に設定するところからスタート」することを勧めています（p46）。和文は「1.7程度から始めると良いでしょう（p200）」と書いています。

本文のline-heightの例

• 和文の例として、AXIS やCasa BRUTUS のようなデザイン系雑誌のウェブサイトの本文は2.0相当のline-heightを使っています。note では1.875で、Zenn やQiita は1.9にしてますね。
• 欧文の例として、FigmaのBlog の本文は1.5、A List Apartの記事 の本文は1.7を使っています。web.dev では1.7777777778ですね。
• ニュースサイトでは、New York Times が1.5相当、BBC が1.375相当、日経新聞 が1.8、朝日新聞 が1.6に設定しています。

レスポンシブなline-heightの調整は必要？

個人的に端末や画面サイズによってline-heightを変える必要はないと思っています。

上で紹介したウェブサイトでは、web.dev以外は端末に関係なく同じline-heightを使っているようですね。web.devの場合、横幅が320px以下のスクリーンで文字サイズを18pxから15pxに、行間を1.7777777778から1.8666666667に調整しています。

より小さいスマホ画面では、文字を小さくして表示できる文字数を増やしつつ、可読性を担保するために行間のスペースを多めにとっているのが読みとれます。面白いですね。

見出しのline-height

文字サイズが大きい見出しでは、本文と同じline-heightだと行間のスペースが空きすぎて逆に読みにくくなってしまいます。文字の大きさやフォントによるのでレイアウトをして確認することをお勧めしますが、僕の場合、欧文ば1.2〜1.3程度、和文は1.4〜1.5程度を使っています。