line-heightについて考えませんか

Webサービスの制作におけるline-heightの扱い方とかをまとめました。

コーディングのポイント

CSSをリセットしてから、bodyにline-heightを入れていると思いますがそれは大きな間違いです。
bodyにline-heightを入れてしまうと全ての要素に適応されてしまうため、buttonやinputにもline-heightが入ってしまいます。

button {
  height: 56px;
  line-height: 56px;
}

上のように実装している場合はそこまで影響はないですが、下のように実装するとデザインに崩れが生じます。

button {
  padding: 16px 32px;
}

文字が一行で収まるような要素にはline-heightを1に指定し、複数行になる場合は個々にline-heightを指定すると良いです👇

body {
  line-height: 1;
}

p {
  line-height: 1.8:
}

button {
  padding: 16px 32px;
}

和文フォントと欧文フォント

和文フォントの14pxと欧文フォントの14pxでは、和文フォントの方がはるかに大きく見えます。
仮想ボディの占有率が違うため、大きく見えてしまうのです。

font-sizeは、和文は13〜16px、欧文フォントは15〜18px
line-heightは、和文は1.4〜1.8、欧文フォントは1.2〜1.4
くらいを目安に指定するとユーザビリティを考慮したものになると思います。

##太字と細字
上で、ある程度のline-heightがきまりましたが、太字と細字でもline-heightは変えた方が良いです。
強調の意図があって太文字を選ぶと思うので、そういうときは普通のline-heightより少し値を小さくしてあげると文字のバランスが整います（文字が1行で収まる想定の場合はこの記述はそもそもline-heightいりません）👇

body {
  line-height: 1;
}

h1, h2, h3 {
  line-height: 1.4:
} 

p {
  line-height: 1.8;
}

印象のつけかた

line-height、font-sizeだけでサービスの印象が大きく変わります。
どんな印象にしたいかを考えて、サイズを決めていきます。

以下、参考になれば。（スマホ画面での情報です。）

ニュース系メディア

ニュース系メディアの特徴はとにかく1画面に対しての情報量が多いです。
font-sizeは16px、line-heightは1.7前後。
左右marginは10px前後なのでmarginを大きく取らない代わりにline-heightを多めにとって、文字のつまりを最小限に抑えながら可読性を重視しています。

女性向けキュレーションメディア

女性向けのメディアはかわいらしさを重視しています。
そのため、フォントサイズを小さめにしていて、letter-spacingをとっているケースもあります。
font-sizeは14px、line-heightは1.5前後。
写真と文章を切り分けるためにline-height少なめに、写真とのmarginは大きめに取っています。

IT企業のブログ

font-sizeは16px、line-heightは1.8前後。
letter-spacingを入れていることもあります。
左右marginは多くとりませんが、letter-spacingを入れることで文字の間隔が空き、marginの狭さをカバーしつつ、1画面のコンテンツ表示量を多くしています。
漢字をたくさん含んでいる文章でも詰まっていると感じないように工夫されています。

技術系メディア

font-sizeは16px、line-heightは1.8前後。
文章内にコードが挿入されるので、line-heightは多めにとっています。
文章間のmarginが少ないので、hrやコードをうまく利用する設計になっています。

おわりに

参考になるものはまだまだたくさんあるので随時更新できればと思います。
メディアに限らず、文字の可読性は重要です。
読む時やクリック、タップをするときに少しでも違和感があるとそれだけで機会損失をする恐れがあります。
ターゲットを見極めて、綺麗なコードと見た目の設計を心がけましょう