Como calcular a “altura da linha” do arquivo psd?

Question

Eu tenho um .PSD e estou tentando convertê-lo em HTML / CSS.

Não consigo calcular a altura da linha no CSS do .PSD.

Como posso calcular a altura da linha a partir do início?

    

Answer 1

Para converter a altura de linha para linha: tamanho da fonte + (entrelinha / 2) = altura da linha.

Por exemplo, se o tamanho da fonte no Photoshop for 10px e a entrelinha for 18px, a altura da linha será 19px ...

fontsize + (leading / 2) = lineheight
  10     +   (18 / 2)    = ?
  10     +      9        = ?
                         = 19

Se não houver um valor principal definido no photoshop, é de 120% do tamanho da fonte ou simplesmente

line-height: 1.2;

Além disso, para calcular o espaçamento entre letras CSS apropriado, conforme exibido em um PSD.

Divida o valor de espaçamento entre letras por 1000. Por exemplo, se o valor for 20, sua equação será 20/1000 = 0,02

Agora, o espaçamento entre letras é 0.02em

    

Answer 2

A solução easist é apenas selecionar a camada de texto, clique com o botão direito nela e selecione "Copiar CSS". Cole no bloco de notas ou algo assim e leia os valores de lá:)

    

Answer 3

Você diz .PSD, então vou assumir que você está usando o Photoshop. No Photoshop, você pode ativar a régua para obter a altura em pixels.

Ou use uma régua na tela (pesquise "régua na tela" do Google) para obter a altura em pixels. Em seguida, experimente alturas diferentes no seu CSS e use a régua de tela para medi-lo, caso seja preciso.