デザインって何で作られてますか？
やっぱり多く方は「photoshop」で作ってらっしゃるんじゃないんですかね？
いま所属している会社でも、コーディングする際に頂くデザインデータは基本「photoshop」ですね。
（最近は、sketchもあるから結構、photoshopから乗り換えてる人も多いのかな。）
下記のようなレイアウトを渡される事も多いかと思います。
テキストの部分「line-height」は、どう設定されてますか？
大抵の方は下記の計算式を使って値を導くと思います。
行送りの数値 ÷ フォントサイズ
この場合は、
28 ÷ 14 = 2
ですね。
では、コーディングしてブラウザで確認してみましょう。
なんじゃこりゃー
なんか、テキスト上部に隙間（ピンクの帯部分）できてるじゃねーかー
となって、デザイナーさんに「デザインと違うんだけど！」って言われた人も多いんじゃないですかね？
これって何でなの？
そもそも「行送り」「行間」「line-height」って、定義が違うものなんですよ。
定義が違えば、反映のされ方も違うというのは当たり前な話なわけで。
photoshop
line-heightを指定する際に、photoshop上で見る値って「行送り」であって「行間」ではない。
「行送り」と「行間」の定義っていうのは
行送り
- 文字の大きさ + 次の行までの間隔。
行間
- 2つの行の間隔。
という感じらしいんですね。
私はずっと「photoshop」で「行間」を設定しているんだと思い込んでました。
でも実際は「行送り」だったわけです。
web
cssで行間を指定するとしたら「line-height！」って思うかと思うんですが、
「line-height」って「行間」を指定する訳じゃなくて「行の高さ」を指定するプロパティなんです。
この「行の高さ」は「line-height」で指定した数値からフォントサイズを引いた数値が行の上下に均等に反映されます。
この場合、
( (14 x 2) - 14 ) ÷ 2 = 7
となって、上下に7pxずつ反映され、上に隙間が出来てしまうって事になるわけですね。
調べて思った事
ややっこしいな、おい
っていうのを個人的に思った訳で、なんかもっとすぐにわかるツールないかなーと思って、こんな物を作ってみました。
※精度は低いと思うので、あしからず。
Line Height Checker