Como calcular a configuração do tamanho da fonte contando pixels?

Eu tenho uma imagem de um site proposto.

Como faço para determinar qual valor de tamanho de fonte px para definir o texto contando pixels?

Por exemplo, eu tenho o tamanho da fonte: 14px (em Arial), mas contando do topo de um "L" e abaixo da cauda de um "p", conto 10 pixels no "L", com 3 extras na cauda do o "p". O que obviamente não me dá 14.

Existe uma maneira de exercitar o valor do tamanho da fonte contando pixels de maneira confiável?

O problema geral é praticamente respondido por Para que exatamente o tamanho da fonte é traduzido? - ou seja, o tamanho não significa realmente algo muito específico.

Mas, como você está trabalhando com uma fonte específica conhecida, você deve, de fato, conseguir converter uma contagem de pixels da maquete para o tamanho nominal do pixel - você precisará experimentar um pouco para determinar a proporção.

Mas eu sugiro que seja muito mais fácil fazer isso por comparação, ou seja, basta alterar o tamanho da sua página da Web até que ela corresponda à maquete, sobrepondo uma captura de tela, se necessário, para verificar. Lembre-se de que é improvável que a renderização de fonte do navegador corresponda exatamente à renderização do Photoshop ou do navegador em outra plataforma.

Em tamanhos de texto típicos, a maioria das fontes tem de 1 a 4 pixels de 'buffer' de cima para baixo.

Geralmente, você pode aplicar diretamente o tamanho de pixel usado ao compilar seu CSS. IOW, se o Photoshop / Illustrator disser 14px com 130% de vantagem, seu CSS diria

font-size:14px
line-height:1.3em

Não acho que contar pixels seja confiável. A razão é que, quando eu alterno entre as fontes, digamos no Photoshop, elas sempre são exibidas em tamanhos aleatórios. Eu sei que o PS não é a web, mas isso mostra que 14px em uma fonte pode ser muito maior do que em outra fonte.

Tive sucesso ao capturar a captura de tela no Photoshop e alinhá-la. É claro que você precisa garantir que sua captura de tela esteja em 100% e que tenha a mesma fonte.

No entanto, a melhor e mais rápida maneira de ver qual tamanho de fonte uma página da Web está usando é exibir a fonte da página. Se não for mencionado em style="font-size: 14px;"algum lugar da tag, está na folha de estilo (mais do que provável). Procure o link próximo ao topo do código da página que termina em .css e visite esse link. Procure as declarações font-sizee font-family. Isso informará qual fonte é usada e qual o tamanho de vários elementos da página da web.