Quantcast
Channel: How to calculate "line height" from psd file? - Super User
Viewing all articles
Browse latest Browse all 4

Answer by davidcondrey for How to calculate "line height" from psd file?

$
0
0

enter image description herePhotoshop measures line-height with leading which is not the same as CSS line-height. Leading is the distance between the bottom of a line of text and the top of the line of text underneath it. Line-height is the distance between half of the leading above a line and half the leading below it.

To convert leading to line height: font size + (leading / 2) = line-height.

So for example if the font size in Photoshop is 10px and the leading is 18px then the line height is 19px...

fontsize + (leading / 2) = lineheight  10     +   (18 / 2)    = ?  10     +      9        = ?                         = 19

If there is no leading value set in photoshop it is 120% of the font-size or simply

line-height: 1.2;

Additionally, to calculate the appropriate CSS letter-spacing as displayed in a PSD.

Divide the letter-spacing value by 1000. For example if the value is 20 your equation will be 20 / 1000 = 0.02

Now the letter spacing is 0.02em


Viewing all articles
Browse latest Browse all 4

Trending Articles