Para que exatamente o tamanho da fonte é traduzido?

Eu tenho uma fonte de 40 pixels que estou tentando traduzir em imagens personalizadas. Estou tentando corresponder exatamente ao tamanho da imagem, mas estou tendo alguns problemas para obter exatamente o tamanho certo. Basicamente, o que se resume é isso. Quando uma fonte diz que é X pixels, o que isso significa fisicamente?

Esta é uma excelente pergunta, que tem uma resposta bastante insatisfatória.

O tamanho do tipo, especificado em pixels, pontos (1/72 ") ou milímetros, é a altura de um em-quadrado, uma caixa invisível que normalmente é um pouco maior que a distância da ascensão mais alta ao descendente mais baixo.

Dado que esta é uma medida um tanto arbitrária que

• depende do design técnico exato da fonte
• não pode ser medido com precisão a partir de uma amostra impressa ou rasterizada

não é muito significativo ou útil, exceto como uma aproximação.

No seu caso, calcule o tamanho que você precisa especificar no Photoshop para corresponder à renderização do navegador por experimentação. Você deve achar que essa é uma proporção constante para qualquer fonte, mas eu não esperaria que isso acontecesse se você alterar o navegador ou o SO.

Tempo ASCII! Finja que as duas caixas abaixo são peças do tipo chumbo de 1900, aproximadamente. Naquela época, os tipos de letra eram fundidos em chumbo (ou roteados em madeira). Para o tipo ser configurado em um bloqueio de impressão, eles precisavam ser conectados a blocos sólidos. É daí que vem a dimensão do tipo (em pontos):

+--------------+  +-------------+  <----+
|              |  |             |       |
|      XX      |  |             |       |
|     X  X     |  |             |       |
|    XX  XX    |  |             |       |
|    XX  XX    |  |     X       |
|    XXXXXX    |  |    X X      |   Point size of the type
|   XX    XX   |  |    XXX      |
|   XX    XX   |  |   X   X     |       |
|  XX      XX  |  |   X   X     |       |
|  XX      XX  |  |             |       |
|              |  |             |       |
+--------------+  +-------------+  <----+

Observe que as duas letras acima são de tamanhos diferentes, mas a caixa delimitadora é a mesma. Como tal, em termos de pontos, ambas as fontes têm o mesmo tamanho.

Hoje em dia, não fazemos muito tipo de chumbo e madeira e a maioria é digital. No entanto, o conceito de dimensionamento de pontos ainda existe, pois existe uma caixa virtual com a mesma altura para cada letra em que o tipo é colocado. Novamente, é essa caixa virtual que define o tamanho do ponto, em vez das medidas físicas das próprias letras. O tamanho real das formas da letra geralmente é menor que o tamanho do ponto (mas também pode ser maior).

Medir o tipo em pixels não funciona por causa disso, no entanto, você pode 'definir' o tipo em pixels em CSS e similares. O navegador faz uma tradução da melhor maneira possível entre o tamanho de px declarado. Mas é sempre uma estimativa confusa.

Por fim, não há uma maneira precisa de obter duas formas de letra exatamente do mesmo tamanho, sem olhar para elas visualmente e alterar o tamanho de cada uma delas até que você as veja sendo do mesmo tamanho.

O "tamanho da fonte" de uma fonte refere-se à "altura em" da fonte, que não é necessariamente a mesma que a altura de caracteres específicos na fonte.

Normalmente, a altura eme de uma fonte adere à mesma idéia básica - ela será aproximadamente definida como a distância do descendente mais baixo (como a parte inferior da letra g) ao ascendente mais alto (como o topo da letra h):

Como você pode ver, nenhuma das letras individuais cobre todo esse período.

Com fontes digitais, a "altura em" de uma fonte é uma escolha feita pelo designer da fonte e não precisa estar em conformidade com esta convenção: um designer de tipo digital pode escolher qualquer base para seu tamanho. No entanto, as fontes ainda tendem a aderir, pelo menos aproximadamente, ao tipo de convenção descrito acima. Antigamente, quando o tipo consistia em blocos de metal, a "altura em" era a altura de um desses blocos, que precisava ser alta o suficiente não apenas para qualquer caractere naquele tipo de letra, mas também para qualquer ascendente, descendente e acento.

Agora, muitos tipos de letra modernos também incluem acentos em letras maiúsculas (como Ć) - esses acentos se estendem para fora do ascendente tipográfico tradicional e, portanto, esses (e possivelmente outros caracteres especiais) ficam fora do topo do "em". Por razões históricas, não ajustamos o tamanho do em para permitir isso, mantemos o tamanho do em e apenas o prolongamos - qualquer tipógrafo que use esses acentos precisará garantir que haja espaço para eles se estenderem, embora geralmente o o espaço entre linhas é adequado no texto do corpo.

A diferença de linha no texto do corpo é um espaço deixado entre o descendente de uma linha de texto e a ascensão da linha abaixo dela - ou seja, o "tamanho da fonte" não inclui essa medição de diferença de linha. Pode ser influenciado pelo campo CSS line-height, onde1.4significa que a folga da linha é 0,4 vezes a altura eme e, portanto, uma linha inteira do texto do corpo ocupará 1,4 vezes a altura em, incluindo a folga da linha. Em outras aplicações, a diferença de linha pode ser especificada de maneira diferente: os processadores de texto geralmente especificam em termos de um múltiplo de espaçamento de linha "único", mas, diferentemente do CSS, o espaçamento "único" geralmente não significa que não há lacuna de linha, mas alguma linha "padrão" gap, em que o aplicativo tenta criar um padrão com base nos metadados no arquivo de fonte. Existem vários padrões para especificar métricas na fonte (por exemplo, no Truetype, existem diferentes padrões para Mac e Windows / OS2), portanto a diferença de linha padrão pode variar entre aplicativos e sistemas operacionais.

Agora, mesmo se um designer faz seguem uma convenção previsível para a sua altura em, isso ainda não lhe dizer o tamanho de letras maiúsculas (cap-altura) ou o tamanho de, digamos, um o(x-altura ou linha média) como estas podem variar livremente entre as fontes em relação à altura do ascendente. Dentro de uma família de fontes, elas geralmente serão consistentes. Por exemplo, Times New Roman Negrito e Times New Roman Regular terão o mesmo tamanho de caractere para o mesmo tamanho de em, que deve incluir ascendentes, descendentes, altura da tampa e altura x.

Tente digitar o caractere da barra vertical ('|') e meça isso. Se eu dupliquei sua situação corretamente e seu antialiasing não está desfocando muito, deve ser 22px.

22px representa a altura do bloco do tipo. Mas cada personagem preenche o bloco de maneira diferente. Um 'g' ou 'q' ocupará a região inferior desse 22px, enquanto letras maiúsculas e minúsculas como 'b' ou 'd' ocuparão as partes superiores. '|' é um dos únicos (se não o único) caractere que preencherá totalmente o espaço de 22 px.

Não sei como comparar com as configurações de CSS, mas isso explica como o Photoshop interpreta a altura do texto.

Você tem certeza de que sua fonte é medida em pixels? Na maioria das vezes, as fontes são medidas em pontos. Um ponto é 1/72 de polegada. Portanto, uma fonte de 40 pt tem 40/72 "ou 5/9" de altura. O ponto principal é que essa é a dimensão do topo dos ascendentes em letras altas até a parte inferior dos descendentes em letras que ficam abaixo da linha de base. É por isso que a altura x é às vezes usada, como mencionado acima. Essa é a altura das letras minúsculas que não ficam para cima ou para baixo.

De qualquer forma, as medições nunca são exatas, infelizmente. Você precisará apenas medir e calcular (e / ou tentativa e erro) para realizar o que está tentando.