¿A qué se traduce exactamente el tamaño de la fuente?

Tengo una fuente de 40 píxeles que intento traducir en imágenes personalizadas. Estoy tratando de hacer coincidir exactamente el tamaño de la imagen, pero tengo algunos problemas para obtener exactamente el tamaño correcto. Básicamente, todo se reduce a esto. Cuando una fuente dice que es X píxeles, ¿qué significa esto físicamente?

Esta es una excelente pregunta, que tiene una respuesta bastante insatisfactoria.

El tamaño del tipo, ya sea especificado en píxeles, puntos (1/72 ") o milímetros, es la altura de un cuadrado cuadrado, un cuadro invisible que generalmente es un poco más grande que la distancia desde el ascendente más alto hasta el descendente más bajo.

Dado que esta es una medida algo arbitraria que

• depende del diseño técnico exacto de la fuente
• no se puede medir con precisión a partir de una muestra impresa o rasterizada

no es muy significativo o útil, excepto como una aproximación.

En su caso, calcule qué tamaño necesita especificar en Photoshop para que coincida con la representación del navegador mediante experimentación. Debería encontrar que esta es una proporción constante para cualquier fuente, pero no esperaría que este sea el caso si cambia el navegador o el sistema operativo.

Tiempo ASCII! Imagina que los dos cuadros a continuación son piezas de tipo plomo de 1900 más o menos. En aquel entonces, los tipos de letra se fundían en plomo (o enrutados en madera). Para que el tipo se establezca en un bloqueo de impresión, tuvieron que conectarse a bloques sólidos. De aquí proviene la dimensión del tipo (en puntos):

+--------------+  +-------------+  <----+
|              |  |             |       |
|      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  |  |             |       |
|              |  |             |       |
+--------------+  +-------------+  <----+

Tenga en cuenta que las dos letras anteriores son de diferentes tamaños, pero su cuadro delimitador es el mismo. Como tal, en términos de puntos, ambas fuentes tienen el mismo tamaño.

Hoy en día, no fabricamos mucho tipo de plomo y madera y la mayor parte es digital. Sin embargo, el concepto del tamaño del punto todavía existe en que hay un cuadro virtual que tiene la misma altura para cada letra en la que se coloca el tipo. Nuevamente, es este cuadro virtual el que define el tamaño en puntos en lugar de las medidas físicas de las formas de las letras. El tamaño real de las formas de las letras suele ser más pequeño que el tamaño en puntos (pero también puede ser más grande).

La medición del tipo en píxeles no funciona debido a eso, sin embargo, puede 'establecer' el tipo en píxeles en CSS y similares. El navegador realiza una traducción lo mejor que puede entre el tamaño de px declarado. Pero siempre es una estimación difusa.

En última instancia, no hay una forma precisa de obtener dos tipos de letra de tipo de letra exactamente del mismo tamaño antes de mirarlos visualmente y cambiar el tamaño de cada uno hasta que los vea como del mismo tamaño.

El "tamaño de fuente" de una fuente se refiere a la "altura em" de la fuente, que no es necesariamente la misma que la altura de caracteres particulares en la fuente.

Por lo general, la altura em de una fuente se adhiere a la misma idea básica: se establecerá aproximadamente a la distancia desde el descendente más bajo (como la parte inferior de la letra g) hasta el ascendente más alto (como la parte superior de la letra h):

Como puede ver, ninguna de las letras individuales cubre todo ese lapso.

Con las fuentes digitales, la "altura de em" de una fuente es una elección realizada por el diseñador de la fuente, y no tiene que ajustarse a esta convención en absoluto: un diseñador de tipografía digital puede elegir cualquier base para su tamaño de em. Sin embargo, las fuentes todavía tienden a adherirse, al menos aproximadamente, al tipo de convención descrita anteriormente. En los viejos tiempos, cuando el tipo consistía en bloques de metal, la "altura em" era la altura de uno de esos bloques, que tenía que ser lo suficientemente alta no solo para cualquier personaje en ese tipo de letra sino también para cualquier ascendente, descendente y acentos.

Ahora, muchos tipos de letra modernos incluyen acentos en letras mayúsculas (como Ć): estos acentos se extienden fuera del ascendente tipográfico tradicional y, por lo tanto, estos (y posiblemente otros caracteres especiales) quedan fuera de la parte superior del "em". Por razones históricas, no ajustamos el tamaño del em para permitirlos, mantenemos el tamaño del em y simplemente lo extendemos; cualquier tipógrafo que use dichos acentos deberá asegurarse de que haya espacio para que se extiendan, aunque generalmente el espacio entre líneas es adecuado en el texto del cuerpo.

El espacio de línea en el texto del cuerpo es un espacio que queda entre el descendiente de una línea de texto y el ascendente de la línea debajo de él, es decir, el "tamaño de fuente" no incluye esta medición de espacio de línea. Puede estar influenciado por el campo CSS line-height, donde1.4significa que el espacio entre líneas es 0.4 veces la altura del em, y por lo tanto una línea completa de texto del cuerpo ocupará 1.4 veces la altura del em incluyendo el espacio entre líneas. En otras aplicaciones, el espacio de línea se puede especificar de manera diferente: los procesadores de texto a menudo especifican en términos de un múltiplo del espaciado de línea "único", pero a diferencia del CSS, generalmente el espaciado "único" no significa que no hay un espacio de línea, sino alguna línea "predeterminada" gap, donde la aplicación intenta obtener un valor predeterminado basado en metadatos en el archivo de fuente. Existen múltiples estándares para especificar métricas en la fuente (por ejemplo, en Truetype, hay diferentes estándares para Mac y Windows / OS2), por lo que el intervalo de línea predeterminado puede variar entre las aplicaciones y los sistemas operativos.

Ahora, incluso si un diseñador hace seguir una convención predecible para su altura em, esto todavía no te dice el tamaño de letras mayúsculas (cap-altura) o el tamaño de, digamos, una o(x-altura o línea media) ya que estos pueden variar libremente entre tipos de letra en relación con la altura del ascendente. Sin embargo, dentro de una familia de fuentes, generalmente serán consistentes. Entonces, por ejemplo, Times New Roman Bold y Times New Roman Regular tendrán los mismos tamaños de caracteres para el mismo tamaño de em, que debe incluir ascendentes, descendentes, altura de la tapa y altura x.

Intente escribir el carácter de barra vertical ('|') y mida eso. Si dupliqué tu situación correctamente y tu antialiasing no lo está desenfocando demasiado, debería ser 22px.

22px representa la altura del bloque de tipo. Pero cada personaje llena el bloque de manera diferente. Una 'g' o 'q' ocupará la región inferior de esa 22px, mientras que las letras mayúsculas y minúsculas como 'b' o 'd' ocuparán las partes superiores. '|' es uno de los únicos (si no el único) personaje que ocupará por completo el espacio de 22 píxeles.

No sé cómo comparar con la configuración de CSS, pero eso explica cómo Photoshop interpreta la altura del texto.

¿Estás seguro de que tu fuente se mide en píxeles? La mayoría de las veces las fuentes se miden en puntos. Un punto es 1/72 de pulgada. Por lo tanto, una fuente de 40 pt tiene 40/72 "o 5/9" de alto. La patada es que esa es la dimensión desde la parte superior de los ascendentes en letras altas hasta la parte inferior de los descendientes en las letras que cuelgan debajo de la línea de base. Es por eso que a veces se usa la altura x, como se mencionó anteriormente. Esa es la altura de las letras minúsculas que no se pegan hacia arriba o hacia abajo.

De cualquier manera, las medidas nunca son exactas de todos modos, desafortunadamente. Solo tendrá que medir y calcular (y / o prueba y error) para lograr lo que está intentando.