How to calculate "line height" from psd file?

Question

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?

Solution 1

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

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

Solution 2

The easist solution is to just select the text-layer, right click on it and select "Copy CSS". Paste it into notepad or something and read the values from there :)

Comments

[Ryan]

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/…

[Dave]

Do you mean the height of the font used and the space between each line?

[Avital Macabi]

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...

[Rick Janusz]

There is a unitless line-height calculator (relative ems) here: cssleading.com

[Avital Macabi]

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???

[JacobTheDev]

That actually doesn't seem to output the right line height. For example, the correct line height as per @davidcondrey's formula would be 19.7125 for my case, but Photoshop's Copy CSS feature was listing it as 0.8.

[Daniel says Reinstate Monica]

Does this work when the leading is less than the font size?

[Mithun Satheesh]

I see a problem with the way Photoshop "Leading" is defined in this answer. As per adobe docs, leading is "amount of space between the baselines of consecutive lines of type, usually measured in points" which is not what you reference in the answer as "the distance between the bottom of a line of text and the top of the line of text underneath it". Please correct me if am wrong.