Hinting: te explicamos qué es y para qué sirve

Kerning, tracking, hinting… la tipografía está llena de palabrotas acabadas en ing cuyo significado no siempre está claro. Comenzaremos por el más desconocido de todos: el hinting, una tecnología diseñada para que los tipos se vean lo mejor posible en pantalla.

hinting

En tipografía digital todo lo que vemos está formado por píxeles. A veces son tan pequeños que no los notamos, pero SIEMPRE están ahí. El problema es que nadie diseña ya las tipografías directamente en formato mapa de bits (imagina la locura de trabajo: cada carácter dibujado en cada tamaño posible, píxel a píxel y uno por uno) sino que se utilizan métodos de dibujo vectorial que permiten el escalado de las formas y contraformas a cualquier tamaño.

El problema de esta manera de trabajar es que hay que traducir constantemente de vectores a píxeles, pues tanto las pantallas como las impresoras no hablan en otro idioma, y ya sabes lo que pasa con las traducciones… que se pierde información por el camino. En el proceso de rastreo (rasterizing), que es como se llama esta traducción, pueden aparecer los siguientes problemas:

  1. Desaparición de algún elemento, sobre todo los nexos entre astas y algunos remates:

    En esta hache las astas verticales no llegan a ocupar el 50% de varios píxeles, por lo que el sistema no los pinta de negro

    En esta hache las astas verticales no llegan a ocupar el 50% de varios píxeles, por lo que el sistema no los pinta de negro

  2. Pérdida de simetría:

    Este punto debería ser simétrico, pero uno de los píxeles que deberían pintarse de negro no contiene más de un 50% de la figura dentro y deforma el resultado

    Este punto debería ser simétrico, pero uno de los píxeles que deberían pintarse de negro no contiene más de un 50% de la figura dentro y deforma el resultado

  3. Diagonales irregulares:

    Aquí vemos perfectamente como, por un pelo, el 4º píxel de la 3ª fila se pinta de negro y deforma la diagonal

    Aquí vemos perfectamente como, por un pelo, el 4º píxel de la 3ª fila se pinta de negro y deforma la diagonal

  4. Desequilibrio en el grosor de astas o en los contrapunzones internos:

    En esta eme, las 3 astas verticales deberían tener un píxel de grosor, y los dos contragrafismos internos deberían tener un ancho de 3 píxeles

    En esta eme, las 3 astas verticales deberían tener un píxel de grosor, y los dos contragrafismos internos deberían tener un ancho de 3 píxeles

  5. Exageración de los ajustes ópticos, como la diferencia de grosores en las astas de caja alta y baja, o la diferencia de altura entre figuras de forma rectangular, triangular y circular:
    Estas dos haches deberían tener el mismo grosor de astas verticales (de 1 píxel), pero la ligera variación entre mayúsculas y minúsculas se exagera mucho a este tamaño

    Estas dos haches deberían tener el mismo grosor de astas verticales (de 1 píxel), pero la ligera variación entre mayúsculas y minúsculas se exagera mucho a este tamaño

     

Si se deformaran los perfiles (vectores) conseguiríamos que las letras se vieran bien en baja resolución pero al ampliarlas… imagina el desastre. A finales de los 80 los ingenieros de Adobe y Apple comenzaron una carrera por desarrollar un sistema que fuera capaz de arreglar los errores en baja resolución manteniendo la calidad en alta resolución.

Solución: el hinting
Si has ido alguna vez a una feria, me imagino que habrás visto —incluso probado— la atracción del tiro al blanco: te dan una escopeta de perdigones y tienes que acertar en un determinado objetivo para conseguir el premio. El problema es el mismo que acabamos de explicar: la escopeta tiene la mirilla torcida, de modo que el tiro siempre se va a la izquierda o a la derecha. La solución es sencilla, primero detectas la desviación y luego ajustas el disparo hacia el lado contrario, para enfado del feriante, que tiene que darte el osito de peluche para tu pareja.

Hinting PostScript
Adobe hizo algo parecido con su formato tipográfico PostScript Type 1, que se apoyaba en un programa de rastreo inteligente llamado ATM (Adobe Type Manager) capaz de deformar la rejilla de píxeles (grid warping, técnica patentada por Bitstream) siguiendo ciertas instrucciones (hints) insertadas en el código de la póliza o fuente (font). Básicamente las instrucciones daban medidas generales de las astas y los remates, para que el ATM pudiera hacer unas filas de píxeles más grandes o más pequeñas; así se solucionaban los problemas 1, 4 y 5. El sistema, sin embargo, no era lo suficientemente inteligente para solucionar los problemas con las diagonales y la simetría.

Técnica de Grid Warping o deformación de la rejilla: los píxeles crecen o disminuyen cuando se coloca la letra encima para que el resultado sea óptimo

Técnica de Grid Warping o deformación de la rejilla: los píxeles crecen o disminuyen cuando se coloca la letra encima para que el resultado sea óptimo

En Manual de Tipografía Digital, de la editorial Campgràfic, se explica el sistema y la historia con más detalles, tanto a nivel teórico como práctico, para que puedas implementar el hinting en tus propias tipografías. A pesar de ser contenido muy técnico, procuran tratarlo con una pizca de humor.

Si imaginamos que la fundición y el intérprete PostScript son personas como nosotros, su diálogo sería algo así como:

—Fuente (F): Oye, te paso la n de la Univers, tiene estas coordenadas.
—Intérprete (I): Vale, ¿a qué tamaño lo quieres?¿y a qué resolución?
—F: Cuerpo 12, a 72 ppp (píxeles por pulgada)
—I: Eso significa un PPC (píxeles por cuadratín) de 12 píxeles ¿cuántas UC (unidades de cuadratín) tiene?
—F: 1.000, como siempre
—I: De acuerdo, ¿alguna instrucción en especial?
—F: Sí, el grosor de las astas principal es de 100 UC
—I: Muy bien, como el factor de escalado es 0,0012 (PPC/UC) las astas medirán 1,2 píxeles, redondeado a 1, aunque el dibujo diga otra cosa (un asta mide 97 UC y la otra 105 UC)
—F: Gracias
—I: A mandar, para eso estamos

El hinting PostScript está presente también en parte del proceso de instrucción de las fuentes TrueType y por extensión en OpenType. Casi podemos pensar en él como un hinting básico.

Hinting TrueType
Volvamos al ejemplo del tiro al blanco con la escopeta trucada: imagina que eres tan manitas que te las ingenias para inventar un enderezador temporal de mirillas torcidas, y cada vez que vas a la feria con ese cacharro, eres capaz de arreglar el problema de la escopeta durante unos minutos, el tiempo suficiente para darle a todos los objetivos aprovechando que la mirilla está correctamente alineada. Luego ésta vuelve a su estado anterior. Eso es exactamente lo que hizo Sampo Kaasila, ingeniero de Apple: modificar la posición de los puntos de control del perfil original para adaptarse mejor a la rejilla. Esta técnica, predominante hoy en día, se llama migración del punto de control (control point migration), que permite el ajuste a la rejilla o grid fitting.

Técnica de Grid Fitting (ajuste a la rejilla) que se produce gracias a la deformación de una copia temporal de la letra (perfil acomodado)

Técnica de Grid Fitting (ajuste a la rejilla) que se produce gracias a la deformación de una copia temporal de la letra (perfil acomodado)

Kaasila decidió reunir en un sólo programa los dos sistemas de instrucciones existentes, permitiendo que la rejilla se ajuste a algunas partes de los caracteres y al mismo tiempo que el perfil se acomode a la rejilla, permitiendo controlar las astas diagonales, gran punto flaco de las instrucciones de los tipos PostScript. En resumen, podemos decir que TrueType aúna los dos sistemas de instrucción existentes: el ajuste a la rejilla y el perfil acomodado. Volvamos al ejemplo de mi libro, esta vez con protagonista TrueType:

Si imaginamos que la fundición y el intérprete son personas como nosotros, su diálogo sería algo así como:

—Fuente (F): Oye, te paso la n de la Univers, tiene estas coordenadas.
—Intérprete (I): Vale, ¿a qué tamaño lo quieres?¿y a qué resolución?
—F: Cuerpo 12, a 72 ppp.
—I: Eso significa un PPC de 12 píxeles ¿cuántas UC tiene?
—F: 2048.
—I: Muy bien, ve preparando el perfil acomodado para la rejilla de 12 píxeles que te he dicho, cuando lo tengas deformado me lo mandas.
—F: Vale, siempre igual, tengo que hacerlo todo yo sola.
—I: Si tienes alguna queja, habla con Bill o con Steve…
—F: No hace falta, aquí la tienes, deformada.
—I: Gracias, voy a rellenarla ahora mismo.
—F: Bueno hasta la próxima, y recuerda, si encuentras algún agujero lo rellenas.
—I: No te preocupes, lo haré gustoso; hasta otra.

El hinting TrueType puede ser extremadamente complejo y costoso —se rumorea que Microsoft gastó en el hinting de la Arial 1 millón de dólares— porque puedes llegar al extremo de dar instrucciones carácter por carácter para los tamaños más pequeños, moviendo píxel a píxel el resultado. Como dice Jelle Bosma, de Monotype, el hinting TrueType es como jugar al Tetris… siempre puedes mejorar tu puntuación, ¡pero nunca puedes ganar!.

  • Ignacio SP

    Súper completo y buen artículo!