Para que exatamente o tamanho da fonte é traduzido?


81

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?


em fonte, temos uma terminologia de altura x, você está falando o mesmo?
8111 Jack

5
Se você estiver digitando um documento, normalmente é usado um tamanho de fonte 12. O que os 12 significam?
Pearsonartphoto

12 = tipo 12pt (normalmente)
DA01 11/11

Respostas:


67

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.


49

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.


No seu computador, você calcula pontos em pixels como este PX = Points * SystemDPI / 72. DPI em um mundo de vídeo (monitor) é um valor arbitrário puro introduzido pela Apple em 1984. Os dispositivos de vídeo usam apenas pixels; O DPI não existe no mundo de vídeo / imagem. As fontes modernas são baseadas neste conceito em que 1 ponto, 1/72 é definido como 1/72 de polegada.

5
@AbdiasSoftware Sim, foi calculado em média 1 ponto para 1/72 de polegada e o primeiro Mac teve uma tela de 72 ppi. Mas não tenho certeza do que isso tem a ver com a pergunta ou a resposta que eu dei. O fato é que as fontes, sejam elas digitais ou analógicas, têm uma caixa delimitadora e essa caixa delimitadora é a que tamanho se refere.
DA01

41

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.


2
Sim - existem convenções (como elas estão na parte inferior de 'g' até a parte superior de 'h'), mas ainda há variação, e os formatos de fonte não mantêm os designers dessas convenções.
thomasrutter

7

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.


1
Além disso, você pode definir duas fontes com o mesmo tamanho e verá frequentemente que as formas de letra não são. Eles simplesmente têm o mesmo tamanho de 'bloco'.
DA01 10/08/12

3
O tubo nem sempre preenche o espaço total alocado. É apenas uma preferência do designer de tipos. Ele geralmente corresponde ao topo dos ascendentes e ao fundo dos descendentes, mas mesmo assim, o espaço alocado para os personagens ainda pode ser muito maior.
DA01 14/08/12

2
O caractere da barra vertical nem sempre é igual ao tamanho em (por exemplo, "altura total") da fonte, não. De fato, geralmente será menor.
thomasrutter

2
Os caracteres de desenho de caixa vertical devem, teoricamente, cobrir toda a altura em (e provavelmente a sobrepor uma pequena quantidade). Mas poucas fontes incluem esses caracteres. A barra vertical normal ( |) NÃO costuma ser igual ao tamanho em. Isso nem faz isso nas fontes principais da Microsoft (Arial, Geórgia, etc.).
thomasrutter

2
O caractere da barra vertical não preenche toda a altura. Acentos para caracteres maiúsculos, por exemplo, "Á" são posicionados mais alto. Compare-se: "Á" "|"
znq

0

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.


Mas os pontos são relevantes apenas para o tipo físico (impresso, esculpido, gravado etc.).
e100 10/10

Não totalmente correto. O tipo não é medido da parte superior dos descendentes até a parte inferior dos descendentes, mas é medido por uma caixa delimitadora que pode ou não se correlacionar com a altura do ascendente / descendente. Isso remonta aos dias do tipo chumbo e madeira, onde o tipo foi colocado em um bloco. Foi a altura desse bloco que determinou o tamanho do tipo como rotulado. Como tal, duas fontes, ambas definidas em 12 pontos, podem ter tamanhos muito diferentes em comparação. (Eu não vou entrar no fato de que 1pt não é tradicionalmente = 1/72 de polegada ...;) #
DA01 10/10
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.