¿Cómo funcionan las fuentes? ¿Cómo lo hacen para que se vean exactamente igual en todos los monitores?

Hablemos un poco sobre las imágenes primero. Tenemos dos tipos, imágenes ráster y vectoriales.

Las imágenes de trama son imágenes de computadora como las imaginamos tradicionalmente. Abre MS Paint, dibuja algo y guárdelo como un archivo de imagen. Este archivo contiene información sobre el color de cada píxel en la imagen. Como habrás notado, la mayoría de las fotos en Internet y tu teléfono no son escalables. Esta es la desventaja de los gráficos de trama: la imagen se dibuja píxel por píxel y no en formas, lo que necesariamente significa que no hay escalabilidad.

Los gráficos vectoriales, por otro lado, no ven la imagen como una matriz de píxeles, sino en forma de formas. No dibuja la imagen en sí, dibuja los contornos utilizando líneas y curvas, y las imágenes vectoriales describen estas curvas matemáticamente, no en relación con los píxeles. Las imágenes vectoriales son como ecuaciones matemáticas gigantes que describen los contornos de las imágenes y, por lo tanto, las imágenes vectoriales son escalables.

La mayoría de las fuentes de computadora que usamos ahora son escalables porque son fuentes de contorno. En las fuentes de contorno, cada glifo es una imagen vectorial. El archivo de fuente conoce la forma de cada personaje, por así decirlo. Sin embargo, esto significa que los caracteres solo se recuerdan y se ‘dibujan’ sobre la marcha a medida que escribe y se vuelve a dibujar cuando cambia el tamaño de la fuente. Este es el inconveniente de los gráficos vectoriales: es computacionalmente mucho más pesado que los gráficos de trama. Y dibujar los caracteres es donde entran los motores de renderización y rasterización de fuentes.

Los monitores solo se pueden mostrar a nivel de píxel. Si el contorno del personaje pasa a través del píxel con cierto tamaño de fuente, eso es un problema. Los monitores CRT tenían algo de antialiasing natural en comparación con los LCD que producen imágenes más nítidas. Pero antes de la tecnología antialiasing, las curvas en un esquema de caracteres se procesarían irregularmente. Antialiasing utiliza grises alrededor de los bordes dentados para suavizar las curvas. Otra tecnología reciente es la representación de subpíxeles. Un ejemplo común de esto es ClearType de Microsoft, que utiliza los subpíxeles RGB para proporcionar, en cierto sentido, potencia de resolución adicional, aunque los caracteres aún se representan en el nivel de píxeles.

La rasterización de fuentes también depende del formato del archivo. TrueType (TTF) permite sugerencias extensas, es decir, instrucciones para el motor de renderizado sobre cómo renderizar curvas en esa fuente en particular. Sugerencia en OpenType (OTF) es más básico. Se supone que el motor es inteligente. Las sugerencias requieren experiencia y el rasterizador de Microsoft tiende a depender de las sugerencias, lo que hace que las fuentes no sugeridas se vean pobres en comparación. Mac ignora las insinuaciones por otro lado. Adobe utiliza su propio renderizador CoolType para que los documentos tengan el mismo aspecto en todos los sistemas operativos. También he encontrado a menudo que las fuentes gratuitas obtenidas de esos terrenos de descarga de fuentes como DaFont a menudo se ven mejor cuando se descargan en OTF, al menos en Windows.

Las fuentes se ven bastante similares en todas partes porque los vectores son geniales de esa manera. Solo necesitas recordar la forma. Las fuentes no se ven exactamente iguales porque hay limitaciones en el hardware y hay variedad en soluciones de software para esas limitaciones.

¿Tienes un lapiz? Bien, sostén ese lápiz a la luz de tu oficina. Ahora, saca ese lápiz a la luz del sol; nota alguna diferencia? Ahora lleva el lápiz a casa y míralo en tu cocina, tu habitación, en el sótano debajo de las escaleras con las luces apagadas. ¿Se veía diferente el lápiz, cambió de color, se cayó el borrador o se cayó el plomo (suponiendo que no lo haya dañado en todos sus viajes)?

Si respondió que no, eso se debe a que el lápiz se creó independientemente del entorno en el que se ve, por lo que sus propiedades no se ven afectadas por la luz, la geografía o el tiempo (con la excepción del uso).

Así también con una fuente, o más exactamente un tipo de letra. Se componen de curvas y líneas de Bézier que son puntos matemáticos en un área espacial dada (está bien, eso puede no ser exactamente técnicamente correcto, pero al menos está lo suficientemente cerca como para demostrar mi punto) que son más o menos universales para cualquier plataforma de computadora. Por lo tanto, técnicamente funcionarán de la misma manera, independientemente de la máquina en la que se encuentre.

La diferencia en un tipo de letra de una máquina a otra no es la fuente, sino el monitor: ¿es LED o CRT? ¿Es alta definición o no? ¿Está calibrado en color o en punto blanco? Este tipo de cosas afectará la representación visual de un tipo de letra, pero no la composición innata del mismo. La única forma de cambiar el aspecto de un tipo de letra es cambiar los puntos y líneas reales que componen los caracteres individuales.

¿Cómo funcionan las fuentes? ¿Cómo lo hacen para que se vean exactamente igual en todos los monitores?

La pregunta contiene una suposición que no podría estar más lejos de la realidad: en realidad, las fuentes no se ven iguales en todos los monitores.

La visualización de fuentes es una interacción entre:

  • los contornos de la fuente
  • resolución del monitor (las pantallas de resolución más alta en mi hogar tienen al menos 4 veces la densidad de píxeles de la más baja).
  • tecnología de visualización del monitor (LCD, CRT, etc.)
  • motor de representación de fuentes (generalmente a nivel del sistema operativo)
  • posible selección de usuario de qué motor de renderizado se usa, o configuraciones para ese motor (ejemplo: ajuste ClearType, o incluso decidir si se usa o no)
  • código de sugerencia de fuente en la fuente (si el motor de representación lo usa)
  • Solo averiguar qué motor de renderizado está obteniendo puede ser complicado. Ejecuto una Mac con varias máquinas virtuales de Windows. En una aplicación determinada, podría obtener la representación de fuentes de cualquiera de varias fuentes:

    • Representación nativa de Mac OS en muchas aplicaciones
    • Representación de fuentes de Adobe en aplicaciones Acrobat y Creative Cloud (igual en Mac y Windows, sin embargo)
    • Windows 7 Microsoft ClearType con anti-alias basado en colores de subpíxeles
    • Windows 10 ClearType con anti-aliasing en escala de grises

    ¡Oh, espera, también tenemos Amazon Kindles y Kindle Fires en nuestro hogar! No creo que sus motores de representación sean de conocimiento público, pero el hecho de que FireOS es un Linux modificado es bien conocido. Lo que significa que su representación casi nunca es una de las mencionadas anteriormente por Apple, Adobe o Microsoft. La tableta Fire y los ePaper Kindles también podrían estar usando diferentes motores de renderizado entre sí.

    En Windows, en algunas circunstancias también podría obtener diferentes versiones de la representación del sistema de Windows (con o sin ClearType, o con diferentes versiones o configuraciones en ClearType) en diferentes navegadores, incluso en el mismo sistema operativo. No he prestado mucha atención a esto en los últimos años, pero solía ser una cosa.

    Entonces, no, las fuentes en mi hogar definitivamente no se ven iguales en todos los monitores y dispositivos.