Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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?

share|improve this question
    
I'm not able to comment or I would have put this as a comment. This article may help you with setting your line height correctly in CSS: thebrightlines.com/2009/12/26/… –  Ryan Jun 13 '13 at 13:43
    
Do you mean the height of the font used and the space between each line? –  Dave Rook Jun 13 '13 at 13:57
    
the leading is the extra space that added above the text. In HTML That extra space is distributed above and below the text.The line-height = 2*leading + font size ??? I calculate like that and it is not correct... –  Avital Macabi Jun 16 '13 at 13:13
    
There is a unitless line-height calculator (relative ems) here: cssleading.com –  Rick Janusz Oct 9 '13 at 13:27
add comment

2 Answers

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.

share|improve this answer
    
Hi,thanks a lot.I have a question: the leading is the extra space that added above the text. In HTML That extra space is distributed above and below the text.The line-height = 2*leading + font size ??? I calculate like that and it is not correct... My question is where to put the "screen ruler" in order to get the height??? –  Avital Macabi Jun 16 '13 at 13:10
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.