# How to calculate “line height” from psd file?

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?

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

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 :)

-

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

-

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.

-
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