Hinting: hinting True­Type automático

Primero la parte aburrida. Si has pasado por esto antes, no dudes en pasar al siguiente título.

¿Qué es el hinting?

Existe un mito popular entre los diseñadores tipográficos de que el hinting se trata de ‘preservar las formas en la pantalla’. De hecho, es todo lo contrario. El hinting no conserva las formas, las distorsiona para que se ajusten mejor a la cuadrícula de píxeles de tu dispositivo de salida, normalmente, pero no necesariamente, una pantalla. La distorsión será mayor cuanto menor sea la resolución de tu dispositivo de salida. Pero esta puede ser eficaz hasta y más allá de un tamaño de 80 píxeles, lo que equivale a un tamaño de fuente de 19 puntos en una impresora de 300 ppp.

Además, el hinting solo funciona si el diseño de tu tipografía cumple ciertos requisitos. El hinting solo tiene sentido si tu fuente está diseñada para ser legible en tamaños pequeños y con un diseño tan ‘normal’ como sea posible. En otras palabras: si la legibilidad es más importante que la precisión de la forma. Las fuentes Display o decorativas, las fuentes cursivas, las fuentes grunge, las fuentes de iconos y similares están mejor sin hinting. Si estás haciendo unas de esas, olvídate del hinting por completo, omite este tutorial y lee entonces ‘Crear fuentes con contornos complejos’.

Para que el hinting funcione, tus trazados deben tener puntos extremos y características de diseño consistentes, como alturas y líneas de rebasamientos similares, anchos de astas lo más consistentes posible, etc. Así que pregúntate: ¿necesita tu diseño hinting alguno? Y en caso afirmativo, ¿tus trazados admiten hinting? Si tu respuesta es afirmativa, sigue leyendo.

Exportar con ttfautohint (hinting TrueType automático)

Para hacer uso del hinting automático de TrueType, simplemente puedes exportar tus fuentes con la opción Autohint activada y en el tipo de curva TrueType:

Eso es todo. Glyphs pasará la fuente al algoritmo ttfautohint, que a su vez analizará la estructura de tus formas y hará una estimación informada sobre las instrucciones que pondrá en tu fuente.

Por favor ten en cuenta:

• Al contrario de la situación que tenemos en el hinting de PostScript, el hinting automático de TrueType no es compatible con las intrucciones manuales de hinting TT, por lo que debes decidir cuál deseas. Cuando activas Autohint para una exportación TTF, se ignorarán las intrucciones de hinting manual. (Del mismo modo, si exportas sin Autohint, se ignorarán todas las configuraciones de hinting automático de TrueType).
• En su estado actual, ttfautohint (hinting automático de TrueType) no es compatible con la exportación de fuentes variables. Por lo tanto, todo lo que leas en este tutorial se aplica solo a exportaciones de fuentes TT estáticas.

Lo que sucede cuando exportas es que ttfautohint mide inteligentemente una cantidad de glifos clave en tu fuente e inserta hints TrueType (también conocidas como instrucciones) según sus hallazgos. Con un poco de suerte, tu TTF ya se ve bien en Windows. Vamos a averiguar.

Pruebas

Para probar los resultados del hinting, necesitarás Windows. Como usuario de Mac, es posible que desees buscar soluciones de virtualización como Parallels o VirtualBox.

La información del hinting incrustada en la fuente es, al menos en su mayor parte, ignorada en la Mac. Esto se debe a que macOS hace su propio hinting automático sobre la marcha cuando instalas la fuente. En pocas palabras, este es el temido caché de fuentes de macOS.

En su interpretación del hinting TT, otras plataformas son... digamos, bastante impredecibles. A veces lo toman tal como es, a veces lo interpretan parcialmente, a veces (como en Mac) lo reemplazan por hinting incorporado al sistema. A veces, esto cambia de una versión del sistema operativo a la siguiente. Si necesitas atender estas plataformas, intenta averiguar primero si el hinting TT tiene algún efecto en la representación de la pantalla y, en caso afirmativo, elabora un programa de pruebas.

Volvamos a nuestro querido Windows. Por lo general, hay dos configuraciones que querrás probar: Microsoft Word y un navegador web basado en Chromium como Microsoft Edge o Google Chrome. Esto se debe a que, de hecho, Word representa la tipografía de forma diferente al renderizador predeterminado integrado en Windows. Puedes ignorar uno u otro según el uso previsto que hagas tu (o tu cliente) de las fuentes.

Usar el zoom de la pantalla

Primero, configura el zoom de pantalla en Preferencias del sistema > Accesibilidad:

Es una buena idea configurar un gesto de desplazamiento o buenos atajos para ampliar rápidamente la imagen de píxeles para que puedas comprobar el resultado del hinting. Mientras estés en esta ventana, haz clic en Avanzado... y deshabilita Suavizar imágenes:

Lo que hace esta opción es desenfocar los píxeles. Y es una configuración predeterminada, ¿eh?. ¿Por qué alguien querría eso?, no lo sé. Ciertamente no lo necesitamos para verificar la representación del mapa de bits. Así que desmarca esa casilla de verificación y confirma el cuadro de diálogo y tus píxeles no se verán borrosos.

Sin Retina para Windows

Si tienes una pantalla Retina, asegúrate de que la resolución de la pantalla de Windows se mantenga baja. Después de todo, quieres ver los píxeles. El hinting no tendrá mucho efecto visible en las configuraciones de alta resolución. Quizás tu software de virtualización tenga una configuración que te permita estirar un píxel de Windows sobre 2×2 píxeles de Mac.

Documentos de prueba

Configura un documento de prueba en Word. El script de mekkablue Test > Copy Word Test Text pone un conjunto de caracteres completo para la fuente que se encuentra en primer plano del portapapeles, para que luego puedas ir y pegarla en un documento de Word vacío.

Configura un HTML de prueba para Edge o Chrome: puedes usar el script de mekkablue Test > Webfont Test HTML, crearás un HTML para la fuente actual en el último destino de exportación. O utiliza un sitio web de pruebas de fuentes como FontDrop de Viktor Nuebel. Haz zoom con el gesto de desplazamiento o acceso directo, para que puedas examinar la estructura de píxeles en todo su esplendor pixelado, y verás algo así:

Amplía, prueba en varios tamaños, mejor en una cascada de varios tamaños. Verifica la coherencia en el peso del asta y la consistencia en las alturas, como la línea de base, la altura de x, la altura de mayúsculas, etc. Posteriormente, concéntrate en grupos de glifos que deben aparecer consistentes entre sí, por ejemplo, todo en mayúsculas, todo en minúsculas, todos los números, todas las versalitas, lo que sea.

Si todo parece consistente, ya has terminado y puedes ir a almorzar e incluso omitir el resto de este tutorial. Bon appétit.

Si solo unos pocos glifos se ven afectados por inconsistencias como alturas bailando o astas irregulares, es probable que algo ande mal en los trazados. Verifica la dirección de trazos, los puntos extremos, si las coordenadas de los puntos están redondeadas y si los puntos que están cerca de las métricas verticales realmente se alinean con ellas o al menos tienen una linea de rebasamiento constante. Hay muchos plugins y scripts que te ayudan con eso.

Si muchos glifos se ven afectados, puede ser útil anular la configuración predeterminada de ttfautohint. Sigue leyendo.

Opciones de Autohint

Para cada instancia en Información de la fuente > Exportaciones, agrega un parámetro personalizado llamado TTFAutohint options. Ten en cuenta que puedes seleccionar varias instancias y agregar el parámetro de una sola vez para todas ellas:

Una vez que se agrega el parámetro personalizado, haz clic en su valor para abrir el cuadro de diálogo y revisa la configuración. Nuevamente, puedes editar por lotes las opciones en más de una instancia a la vez:

La siguiente lista contiene todas las opciones con un enlace directo a su respectiva documentación ttfautohint, y un breve resumen de esa documentación. Donde dice ‘Consejos’, agregué mis propias sugerencias para la configuración en cuestión.

• Hint Set Range: el rango de PPM para el que se optimizarán las instrucciones.

  Consejo: los rangos grandes pueden generar archivos de gran tamaño, así que mantenlos en los tamaños PPM más relevantes para las fuentes web. Por lo general, la optimización no tiene sentido por debajo de 12 PPM y por encima de 40 PPM. Las instrucciones de hinting se aplicarán más allá de ese rango (ver Hinting Limit a continuación), es solo que la optimización del mapa de bits se enfoca en estos tamaños.

• Default Script: sistema de escritura predeterminado para funciones OpenType.

  Consejo: ignora o elige el sistema de escritura principal para el que se desarrolló la fuente. Si tienes muchos glifos a los que se puede acceder a través de las funciones de OT, elige el sistema de escritura que represente la mayoría de ellos. El hinting será más consistente dentro de un sistema de escritura.

• Fallback Script: sistema de escritura predeterminado para glifos que no se pueden asignar a un sistema de escritura automáticamente.

  Consejo: es mejor elegir el sistema de escritura principal para el que está diseñada la fuente.

• Hinting Limit: el tamaño de PPM en el que se desactiva el hinting. El valor predeterminado es 200 píxeles, debe ser mayor que el máximo establecido dentro del rango del hinting. Los tamaños de píxel hasta este tamaño utilizan la configuración de hinting establecida para el valor máximo en Hint Set Range (ver más arriba).

  Consejo: elige un tamaño de fuente razonable hasta el cual se pueda esperar que la fuente se use en pantalla. Los valores inferiores a 100 también están bien. Considera agregar 1 PPM para mayor seguridad. Para cubrir tamaños de hasta 80, prueba con 81 si no obtienes el resultado deseado.

• Fallback Stem Width: el valor de ancho del asta para todos los sistemas de escritura que carecen de los caracteres estándar adecuados en la fuente. El valor está en unidades de fuente y debe ser un número entero positivo. El valor predeterminado está codificado en UPM×50÷2048 unidades. Para las fuentes de símbolos, también debes especificar un Fallback Script (ver más arriba).

  Consejo: configura cada instancia de forma individual (no lo configures por lotes). Mide horizontalmente el ancho de un glifo representativo del sistema de escritura, por ejemplo, el idotless en latín, e ingresa aquí el valor del ancho del asta. Al reducir o aumentar el Fallback Stem Width, puedes hacer que la apariencia general de tu fuente sea más oscura o más clara, respectivamente.

• x-Height Increase Limit: indica que a partir de este valor de tamaño de píxel hasta 6 PPM, es más probable que la altura de x se redondee hacia arriba. El valor predeterminado es 14 PPM. ‘Normalmente, ttfautohint redondea la altura de x a la grilla de píxeles, con una ligera preferencia por redondear hacia arriba. (…) Si es necesario usa este indicador para aumentar la legibilidad de los tamaños pequeños.’

  Consejo: deja el campo vacío al principio para mantener los valores predeterminados, y solo ajústalo si no estás satisfecho con la altura de x. Puedes establecerlo en 0 si deseas desactivar el redondeo de la altura de x.

• x-Height Snapping Exceptions: ‘lista de valores PPM separados por comas o rangos de valores en los que no se aplicará ajuste de la altura de x’, por ejemplo, ‘8, 10-13, 16’ desactiva el ajuste de altura de x para los tamaños 8, 10, 11, 12, 13 y 16. Una cadena vacía significa que no hay excepciones, y un simple guión (‘-’) deshabilita el ajuste para todos los tamaños.

  Consejo: deja el campo vacío al principio para mantener los valores predeterminados, y solo ajústalo si no estás satisfecho con la altura de x.

• Adjust Subglyphs (anteriormente conocido como Pre-Hinting): si está habilitado, ‘hace que el código de bytes original de una fuente se aplique a todos los glifos antes de que se reemplace con el código de bytes creado por ttfautohint. Esto solo tiene sentido si tu fuente ya tiene algunas instrucciones de hinting que modifican la forma incluso en tamaño EM (normalmente 2048px); en particular, algunas fuentes CJK necesitan esto porque el código de bytes se usa para escalar y cambiar subglifos (de ahí el nombre largo de la opción). Sin embargo, para la mayoría de las fuentes, este no es el caso.’

  Consejo: puedes ignorarlo. Puede causar distorsiones graves. Úsalo solo si sabes lo que estás haciendo y realmente estás trabajando en una fuente CJK.

• Dehint: deshabilita todo el hinting TT y, por lo tanto, anula todas las demás opciones. Sólo se debe utilizar para propósitos de pruebas.

  Consejo: solo ignora esta opción. Para ello, mejor usa la casilla de verificación Autohint en el cuadro de diálogo de exportación. Solo tiene sentido usar esta opción si tienes hinting manual TT en la fuente y deseas exportar sin ningún hinting. En ese caso, marca Dehint en el parámetro personalizado y Autohinting en el cuadro de diálogo de exportación.

• Detailed Info: si esta opción está habilitada, agrega la ‘versión de ttfautohint y de la línea de comando en la tabla name de la fuente (ID 5).’ Esta opción es ‘mutuamente excluyente’ con la opción No Autohint Info (ver más abajo). ‘Si no se establece ninguna, la cadena “ttfautohint (vNNN)” se agrega a la tabla name’, siendo NNN la versión ttfautohint.

  Consejo: ignora esta opción a menos que tengas un flujo de trabajo de posproducción que requiera esta configuración.

• Hint Composites: ‘por defecto, el hinting para los componentes de un glifo compuesto se realiza por separado. Si usas este indicador, el glifo compuesto en sí mismo obtiene las instrucciones de hinting (y las instrucciones de los componentes se ignoran). Usar este indicador, aumenta mucho el tamaño del código de bytes, sin embargo, quizás podrías generar mejores resultados de hinting; aunque por lo general, no es así.’

  Consejo: ignora esta opción. Esto fue pensado para configuraciones muy específicas y puede causar graves distorsiones en la mayoría de los renderizados, especialmente si no todos los componentes están a una escala del 100%.

• Ignore Restrictions: ‘por defecto, las fuentes que tienen el bit 1 establecido en el campo fsType de la tabla OS/2 se rechazan. Si tienes permiso del propietario legal de la fuente para modificarla, especifica esta opción de línea de comando.’

  Consejo: ignora la casilla de verificación. Probablemente nunca necesitarás esto en Glyphs.

• No Autohint Info: si está marcado, evita incluir la ‘versión de ttfautohint y la línea de comando en la tabla name de la fuente (ID 5).’

  Consejo: actívalo cuando envías fuentes para distribución.

• Symbol Font: ‘procesa una fuente que ttfautohint rechazaría porque no puede encontrar un solo carácter estándar para ninguno de los scripts compatibles. Para todos los sistema de escritura que carecen de los caracteres estándar adecuados, ttfautohint usa un valor predeterminado (hinting) para el ancho del asta estándar en lugar de derivarlo del conjunto de caracteres estándar de un sistema de escritura (...). Usa esta opción, generalmente en combinación con la opción Fallback Script y/o Fallback Stem Width, para realizar hinting en fuentes de símbolos o dingbats, o por ejemplo, en los glifos matemáticos.’

  Consejo: el doc lo dice todo. Usa esto solo para fuentes que no sean tipográficas. Y si ese es el caso, asegúrate de que Fallback Stem Width y Fallback Script también estén configurados.

• ttfa table: agrega una tabla OpenType ‘llamada TTFA al archivo final de la fuente que contiene todos los parámetros. En particular, enumera todas las instrucciones de control ttfautohint (que no se muestran en la información de la tabla name). Esta opción es principalmente para fines de archivo, de modo que toda la información utilizada para crear una fuente se almacena en la propia fuente. Ten en cuenta que dicha tabla TTFA es ignorada por todos los motores de renderizado TrueType. Las próximas versiones de interfaces ttfautohint podrán usar estos datos para que una fuente pueda procesarse en otro momento con exactamente los mismos parámetros, proporcionando así una consistente integración de la fuente para versiones futuras.’

  Consejo: ignora esta opción a menos que tengas un flujo de trabajo de posproducción que requiera esta configuración.

• Windows Compatibility: ‘esta opción hace que ttfautohint agregue dos zonas azules (blue zones) artificiales, posicionadas en los valores winAscent y winDescent (de la tabla OS/2 de la fuente). La idea es ayudar a ttfautohint para que los glifos que contienen hinting permanezcan dentro de esta franja horizontal, ya que Windows recorta todo lo que cae fuera.’ Usa esta opción si se produce un recorte en Microsoft Windows y no puedes ajustar winAscent y winDescent en su lugar (lo que normalmente sería la mejor opción). En combinación con ‘-’ como valor para xHeight Snapping Exceptions (ver más arriba) debería ‘suprimir cualquier extensión vertical’ y también ‘evitar cualquier recorte.’

  Consejo: siempre activado, a menos que tengas una configuración experimental en winAscent y winDescent. Pero espero que no.

• Horizontal Stem Width Mode: existen tres maneras posibles para calcular los anchos de las astas y las posiciones de las zonas de alineación:

  • natural: sin ajustes en los anchos de las astas, posicionamiento de zonas discretas. Sin distorsión de la forma de los glifos, poco contraste (es decir, mucho anti-aliasing). Conserva al máximo la forma, pero el texto será borroso. Lo mejor para altas resoluciones.
  • quantized: tanto los anchos de las astas como las posiciones de las zonas están ligeramente cuantificados para tomar valores discretos. Mayor distorsión de la forma de glifo y mayor contraste. Un buen punto medio.
  • strong: los anchos de las astas y las zonas azules (blue zones) se ajustan y colocan en valores de píxeles enteros tanto como sea posible. Alto contraste (es decir, poco anti-aliasing y píxeles muy nítidos), pero la distorsión de la forma de los glifos puede ser significativa. La representación nítida, casi en blanco y negro, del texto proporciona una buena legibilidad en pantallas de baja resolución.

  Estos tres algoritmos se asignan a tres posibles destinos de representación: Escala de grises (Microsoft Word y sistemas portátiles como dispositivos Android), GDI ClearType (versiones antiguas de Windows como XP) y DW ClearType (desde Windows 7).

  Consejo: elige quantized para escala de grises (Grayscale) y DW, y strong para GDI. Si tu cliente se queja de que la fuente parece demasiado pixelada, ve más suave: strong → quantized → natural. Si se quejan de que está demasiado borrosa, ve en la dirección opuesta y hazla más nítida: natural → quantized → strong.

Una nota: el término ‘Horizontal Stem Width’ puede ser confuso, porque lo que es horizontal no es el asta, sino el ancho. En otras palabras, es el ancho medido horizontalmente del asta vertical.

Y en caso de que te lo estés preguntando, DW significa DirectWrite, y GDI es la abreviatura de la buena y antigua interfaz de dispositivo gráfico de Microsoft Windows.

GASP

Hay una configuración más que puede influir en el renderizado de tu fuente TrueType: ‘GASP’, abreviatura de ‘Grid-fitting & Scan-conversion Procedure’ (procedimiento de ajuste a la cuadrícula y conversión de escaneo). En resumen, es un parámetro personalizado para toda la fuente que agregará una tabla GASP a tu archivo TTF.

Esencialmente, la fuente se renderizará de forma distinta en diferentes tamaños para mejorar su legibilidad. Se puede renderizar con o sin gridfitting (mayor ajuste a los bordes de los píxeles) y de forma simétrica o asimétrica (con más o menos antialiasing). O... en realidad no, porque un renderizador puede ignorar GASP por completo, ja, ja, ja. Así que no pierdas demasiado tiempo y esfuerzo en esta configuración, de lo contrario, se volverá en tu contra.

Por otro lado, todo lo que necesitas hacer para configurar GASP es definir dos tamaños de píxeles:

• Sin hinting y simétrico desde 0 hasta el primer tamaño (predeterminado 8 px): no se aplica ajuste de cuadrícula y el texto se procesa con antialiasing (suavizado) siempre que sea posible.
• Hinting y asimétrico entre el primer y el segundo tamaño (predeterminado 20 px): se aplica el ajuste de cuadrícula y el texto se muestra lo más nítido posible. En ClearType, el problema se maneja de forma asimétrica, es decir, se aplica un ajuste de cuadrícula vertical, mientras que horizontalmente, se usa el renderizado de subpíxeles.
• Hinting y simétrico por encima del segundo tamaño: se aplica el ajuste de cuadrícula y las formas se representan con antialiasing (suavizado).

Eso es todo.

Scripts y plugins útiles

En los scripts de mekkablue, encontrarás un par de scripts que harán que tu vida junto al hinting sea más fácil.

• Hinting > Set ttfautohint Options: te permite establecer por lotes los parámetros de TTFAutohint options para todas las instancias que ya tienen ese parámetro (ignorará las instancias que no lo tengan), incluida una forma inteligente de configurar por lotes los valores individuales de Fallback Stem Widths.
• Font Info > Clean Version String: entre otras cosas, se agregará la configuración No Autohint Info en todos los parámetros de TTFAutohint options.
• Hinting > Remove TT Hints: elimina todo el hinting manual TT para que puedas concentrarte en el hinting automático.
• Test > Copy Word Test Text: colocará todos los caracteres a los que puedes acceder en Microsoft Word en tu portapapeles, junto con párrafos adicionales para las funciones OT. Sin embargo, tendrás que aplicar las funciones tú mismo.
• Test > Webfont Test HTML: crea y abre un HTML en el destino de exportación más reciente de tus fuentes estáticas. Ejecuta esto inmediatamente después de exportar las fuentes.

Enlaces útiles

ttfautohint fue desarrollado por el músico y programador austriaco Werner Lemberg. Así que cuando lo busques en internet, no te asustes si encuentras más música que tipografía.

• Documentación sobre ttfautohint, parte del proyecto Freetype. Pon esto en tus favoritos.
• La charla de Werner sobre el hinting para la fuente Noto durante la conferencia TypeLabs en 2017
• Especificación OT para la tabla de gasp

FUENTE UTILIZADA EN LOS EJEMPLOS CORTESÍA DE RASMUS LUND MAHISEN.

Actualización 14-09-2022: se corrigió la ortografía de ‘ttfautohint’ (gracias Werner), se corrigió un pasaje sobre el hinting automático integrado en macOS (gracias Ned).
Traducción al español de Sol Matas.