「line-height」の性質を知り、デザインデータとズレの無い実装を目指す

line-heightは、テキストの1行の高さを指定するCSSプロパティです。行間を調整するために使用され、font-sizeに対する比率で指定することができます。

例えば、次のように指定することができます。

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

この場合、1行の高さは24px（16px * 1.5）になります。

【※補足】
line-heightは、比率以外に「24px」などと決め打ちで指定することも可能です。
しかし、font-sizeに変更が入った場合、line-heightに決め打ちで数字が入っていると、line-heightも変更しなくてはならなくなります。
比率で指定しておけばfont-sizeに応じて自動的に行間が計算されるため、運用・更新がしやすいソースになります。
そのため、決め打ちで指定するべき特段の理由が無ければ、比率で指定することが多いです。

私自身はPhotoshopかAdobe XDで作成されたデザインデータを扱うことが多いので、ここではPhotoshopを例に挙げます。

Photoshopでは、「行送り」の項目に数値を入力することで、テキストボックス内の文字の上下の間隔（行間）が指定できます。
そこで、Photoshop上で行間が24pxに設定されているデザインデータをもとに実装する場合、CSSでもline-heightが24pxになるように指定します。

しかし、デザインデータの数値とCSSの数値を合わせても、見た目が大きくズレてしまう場合があります。一体なぜでしょう？

実は、PhotoshopとCSSではテキストボックスへの余白の付き方が違っており、それが大きな要因の1つになっているのです。
Photoshopの行間は、テキストボックスの上部に余白が出来ないという特徴があります。また、テキストボックスの下部の余白に関しては手作業で調整するため、余白にばらつきが出てしまいます。
一方、CSSのline-heightはテキストボックスの上下に自動的に余白を付与します。
デザインデータと実装では、テキストボックスの内側の余白の付き方に違いがあるのです。

この違いが、数値としては合っていても見た目に差が生じる理由です。

解決方法としては、実装時にpaddingやmarginを調整することです。実装で、テキストボックス外側の余白を調整することで、デザインデータの再現性を高めることができます。

デザイン側で、デザインの意図を申し送りをしておくことも有効な解決策です。
デザインデータと見た目を合わせることを優先して欲しい（数値は目安程度として見てほしい）のか、数値通りに実装で大丈夫（結果的にデザインデータと見た目がズレることは想定済み）なのか、申し送りがあるとスムーズです。

いずれにしても、デザインと実装を分業している場合は、担当者同士でコミュニケーションを取って不明点のすり合わせを行うことが重要です。

デバイスフォント（※1）は、表示させるデバイスやブラウザのサイズ、サイトの仕様によって表示に差異が出やすいという特性があります。
そのため、デバイスフォントに関連したCSSプロパティであるline-heightは、デザインと実装で特にズレが生じやすい箇所です。
制作過程でしっかりとコミュニケーションを取り、サイトのコンセプトや目的に合わせた適切な表示方法を模索していくことが、より良いWebサイトにするための近道かと思います。

※1 デバイスフォント…画像として貼り付けられている文字ではなく、PCやスマートフォン等のデバイスがレンダリングしている文字のこと。