XD, Photoshop, Illustratorの行送りとline-heightの設定について

こんにちは、むったん（@6ttan）です。

ピクセルパーフェクトで組んでください、と言われるまであまり気にしなかったのですが…
行間設定した文字の上下に微妙に余白ありませんか？

Adobeソフト（XD, Photoshop, Illustrator）で作られたカンプ通りの数値で余白空けているのに、異様に空いていたりしませんか？

実はAdobeソフト上では表示されていませんが、コーディングした際に設定したline-heightの影響で文字の上下に余白（実際には行間）が付いているんです。

今回はXD, Photoshop, Illustratorの行送りとline-heightについて深掘りしていきます。

カンプと実物の余白（行間）の違い

今回はXDで作成したカンプを元にコーディングしていく事を想定して説明していきます。
※とはいえ、行送り部分はXD, Photoshop, Illustrator共に同じ見方です。

こんなカンプがあったとします。

画像とテキストの間に50pxの余白。
フォントサイズは36px。
行間は54（= 1.5）。

これをこのままコーディングすると…

See the Pen About line-height① by むったん (@6ttan) on CodePen.0

画像とテキストの間の余白がカンプより少し大きく感じませんか？

ディベロッパーツールなどで見るとすぐわかるのですが、実はこれmarginの余白に加え、テキストの行間も含まれているので50px + 9pxが余白として存在しています。
※9px = (54 – 36px) / 2

ちょっと分かりづらい…という方のために、テキストをホバーするを行間を含めたp要素部分に背景色が入るようにしました。
背景色が同じだと「ちょっとのズレ」と見えますが、背景色を入れることで9pxが意外と大きく感じます。

これは行間が大きくなるほど、想定以上の余白になります。
ということで、以下のようにしてあげましょう。

See the Pen About line-height① by むったん (@6ttan) on CodePen.0

marginから行間分の高さを引いてあげて、カンプと同じ余白にしました。
ただ、毎度フォントサイズと行間を計算するのは面倒ですよね。

ということで、自分が計算するのではなくscssを利用してパパッと書いちゃいましょう！

scssでメンテナンス性のある書き方をする

scssの関数を利用して、先ほどのXDカンプにありました余白、フォントサイズ、行送りの数値を以下のようにします。

See the Pen About line-height② by むったん (@6ttan) on CodePen.0

頻繁に行間が変わるサイトなんて、あまり無いとは思いますが上記のようにしてあげれば都度計算せずに済みます。

font-sizeをem, rem, vw等々を使用する場合は、それように計算式を予めmixin部分に書いてあげればOKです！

さいごに

この事実に気づいたのはだいぶ前だったのですが、scssで書いているのに電卓叩いては値を出してました。
そして修正が入った時に、再度電卓を叩くという悪循環。。。

恐らく気にしない人は、全然スルーな内容だと思います。
ただピクセルパーフェクトを求められたり、細かいところが気になる人だと、どうしても数pxの誤差に目を瞑れないんですよね。