line-height に使用する計算
デザインツールに合わせて文字サイズと行間の入力順を入れ替えました！
px から倍率に変換する
- 文字サイズが
- 行間が
- 設定値は
使い方
文字サイズと行間のpx値を入力するとline-heightを求めることができます。
Photoshop
Adobe XD
line-heightの単位は何を使う？
文章でline-heightを使う
line-heightは様々な場面で使いますが、文章等で使用する場合は単位なしの倍率で設定するのがおすすめです。
line-heightは子要素に設定が引き継がれる（継承する）プロパティなのですが、emや％などの単位で設定した場合と倍率値で設定した場合で子要素のline-heightの結果が変わるためです。
例えば現在の要素のfont-sizeが16pxで子要素のfont-sizeが24pxのとき、emや％でline-heightを設定するとその親要素の値が子要素に適用されますが、倍率で設定すると子要素のfont-sizeに合わせて適切に計算をしてくれるようになります。
| 要素(font-size) | line-height: 1.5 | line-height: 1.5em | line-height: 150% |
|---|---|---|---|
| 親要素(16px) | 24px | 24px | 24px |
| 子要素(32px) | 48px | 24px | 24px |
| 孫要素(18px) | 27px | 24px | 24px |
bodyセレクタにline-height: 170%と設定してしまうと、h2やh3の見出し等で文字サイズよりline-heightが小さくなってしまい、都度line-heightを再設定しなければいけなくなってしまいますので注意しておきましょう。