I have a .PSD and trying to convert it to HTML/CSS.
I can't calculate the line height in CSS from the .PSD.
How can I calculate the line height from the leading?
You say .PSD so I will assume you are using Photoshop. Within Photoshop, you can turn on the ruler to get the hight in pixels.
Or, use an on screen ruler (search Google for "on screen ruler") to get the height in pixels. Then, try out different heights in your CSS and use the screen ruler to measure it if it must be exact.
Photoshop 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.
Therefore, you can mathematically convert leading to line height with the equation: 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
If there is no leading value set in photoshop it is 120% of the font-size
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