5

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
14

enter image description herePhotoshop 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

  • Does this work when the leading is less than the font size? – Daniel Pendergast Feb 28 '18 at 15:45
3

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

  • 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. – JacobTheDev Feb 1 '17 at 19:29
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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