I have a .PSD and I am 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?
Super User is a question and answer site for computer enthusiasts and power users. It only takes a minute to sign up.Sign up to join this community
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.
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
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
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.