12pt no Photoshop parece totalmente diferente na Web

estamos criando um site agora no Photoshop e estamos usando 12pt para as fontes. Mas quando vemos as fontes na Web com 12pt, elas parecem muito maiores. Parece que temos que usar 12px na web para que pareça igual ou semelhante.

Então, minha pergunta é: como pode ser que os 12 pontos no photoshop sejam diferentes dos 12 pontos na web?

obrigado

Então, minha pergunta é: como pode ser que os 12 pontos no photoshop sejam diferentes dos 12 pontos na web?

Por algumas razões.

1. Eles são mídias diferentes, com diferentes mecanismos de renderização de fontes. Simplificando, o Photoshop não é um navegador da web. Não é renderizado com base em CSS e HTML.

2. Pontos, para o tipo de medição, não é uma medida exata. Os pontos se referem à caixa delimitadora da letra - não à letra em si. As diferenças nos arquivos de fonte e nos mecanismos de renderização também podem contribuir para essa diferença.

3. Níveis de DPI e zoom no Photoshop vs. níveis de zoom no navegador. Eles podem simplesmente variar.

Lembre-se também de que você provavelmente não obterá a correspondência de tipo de navegador para navegador ou mesmo dispositivo para dispositivo. Existem simplesmente muitas variáveis ​​fora de seu controle. Como tal, nunca se deve assumir que o que eles construíram no Photoshop será o que eles vêem no navegador. O Photoshop simplesmente não é uma página da web. Tudo bem como ponto de partida, mas não o trate como um plano imóvel.

O tamanho da fonte renderizada (no nível de zoom de 100%) também depende das configurações de dpi da sua imagem.

Experimente um destes:

• padrão da velha escola para gráficos da web: 72 dpi
• monitores comuns da área de trabalho: 96 dpi

Adicionando à resposta de Scott, a razão pela qual o tamanho da fonte é muito diferente no Photoshop ou na Web pode ser porque o Photoshop usa pontos, enquanto a Web usa pixels (ou ems, contra os quais eu recomendo fortemente px).

O cálculo para o relacionamento seria algo como:

Tamanho da fonte em pixels / tamanho da fonte em pontos = dpi do navegador (96) / resolução de imagem do Photoshop (ppi ou pontos por polegada)

Portanto, se você tiver uma imagem do Photoshop com fonte 13pt a 72 ppi, o tamanho da fonte correspondente em pixels para exibição em um navegador da web é

Tamanho da fonte em pixels = (13/72) * 96 = 17,3 px

Você pode ver uma tabela de conversão aqui .

O Photoshop e o Navegador são diferentes, por isso é possível no tamanho do texto. Também tenho esse problema. Pesquisei no Google http://pxtoem.com Você pode ver como o tamanho da fonte funciona e qual o tamanho da fonte que você pode usar para o seu texto.

Você deve se lembrar de que o PhotoShop é construído de maneira diferente de um navegador. Portanto, o que é 12 px no PhotoShop pode ter 14 px em um site online. Às vezes, até os navegadores exibem as coisas de maneira estranha ou movem um elemento 2 px para a direita.

Quando o navegador renderiza um site, ele usa px em vez de pt. Nada ficará igual em tudo, apenas lute para que pareça bom.