Crear una fuente de color Micro­soft (CPAL/‌COLR)

El enfoque de Microsoft para fuentes de color emplea dos tablas OpenType adicionales, CPAL y COLR. CPAL describe una paleta de colores, y COLR define cómo se usan los colores de CPAL y por qué glifo. Técnicamente, lo que parecen ser muchos colores en un solo glifo, en realidad son múltiples glifos apilados uno encima del otro, cada uno de los cuales aparece en un color individual. Pero no te preocupes, Glyphs se encargará de todas esas cosas técnicas.

Configurar una paleta de colores

Comienza agregando un parámetro personalizado llamado Paletas de color en Archivo > Información de la fuente > Fuente. Para empezar, agregaremos una paleta con tres colores. La primera paleta, Paleta 0, ya está allí, por lo que todo lo que necesitas hacer es cliquear en el botón más (+) en la esquina inferior izquierda hasta que veas tres muestras de color. Al hacer clic en una muestra, aparecerá el selector de color de macOS. Para este ejemplo, agregaré estos tres colores:

Puedes elegir cualquier color de cualquier combinación de colores e incluso puedes aplicar transparencia. Eventualmente, se almacenará como RGBA (rojo, verde, azul, alfa) en el archivo de fuente. El alfa significa opacidad, por lo que también puedes tener colores transparentes. Ten en cuenta que los números 0, 1 y 2 se han asignado a los tres colores que acabamos de crear. Ten eso en mente para más adelante.

Una vez que hayas terminado, confirma la ventana de diálogo haciendo clic en el botón Aceptar. Si todo está bien, la línea de parámetros personalizados mostrará la cantidad de paletas y colores:

Crear el glifo de respaldo

Hasta aquí todo va bien. Sin embargo, hay un problema. Las fuentes de color Microsoft, como la que estamos a punto de crear ahora, se están generalizando cada vez más, pero aún no son compatibles universalmente. Entonces, para cualquier software que aún no se ajuste a esto, necesitamos un glifo tradicional en blanco y negro que aparecerá según sea necesario. A esto lo llamamos un glifo de respaldo.

Resulta que el glifo de respaldo ya está configurado: todo lo que se encuentre en la capa del máster (la capa con el nombre de máster, comúnmente llamado ‘Regular’) se considera respaldo. Entonces, por ejemplo, en el máster regular de la i mayúscula, podemos dibujar nuestro rectángulo sans-serif entre la altura de la mayúsculas y la línea de base. Los pequeños símbolos de diamantes muestran que los nodos están exactamente en las líneas métricas:

Agregar las capas de color

Ahora, en la paleta Capas en la barra lateral (Cmd-Opt-P), crea un duplicado del máster Regular. Hazlo haciendo clic en el botón más (+) y aparecerá una capa de respaldo con el nombre de la fecha y hora actuales. En la paleta Capas, haz clic derecho en esa capa y elige el tipo de capa Paleta de colores:

El nombre de la capa cambia automáticamente y aparece un círculo de color junto al nombre de la capa, que indica el color de la paleta para la capa. Para elegir el color de la capa, simplemente haz clic en el círculo de color y elige de la ventana emergente:

Ya que estamos en eso: el color marcado con un asterisco es el color del usuario, es decir, el color que el usuario puede elegir en la aplicación en la que usa la fuente.

Puedes agregar otros dos colores duplicando la capa de color que acabamos de crear. Pero esta vez, ya no necesitas configurar el tipo de capa, solo elige un color diferente para cada una:

Ten en cuenta que las capas se muestran en orden cronológico: eso significa que la primera capa se dibujará primero, luego la segunda capa se dibujará encima de la primera y así sucesivamente. En efecto, la capa inferior es la primera y la capa superior es la última. Eso también significa que puedes tener varias capas que comparten el mismo color; de lo contrario, no podrías apilar dibujos más complejos.

Ahora, todo lo que tenemos que hacer es dibujar nuestras capas. Dejaré la capa Color 0 como está, y haré que las capas Color 1 y Color 2 sean el lado y la parte inferior de una i mayúscula tridimensional:

Ten en cuenta que la vista previa del texto estará en colores siempre que se seleccione una capa de color. Si seleccionas una capa del máster (Regular en este ejemplo), la vista previa será de la fuente de repaldo en blanco y negro.

Exportar y probar tu fuente de color

¡Ahora queremos probar nuestra fuente CPAL/COLR! Sé que todo lo que podemos escribir hasta ahora es IIIIII, pero eso es lo suficientemente bueno para crear poesía concreta de vanguardia que existe por ahí.

Independientemente de lo que queramos escribir con ella, tendremos que crear una instancia en Archivo > Información de la fuente > Exportaciones haciendo clic en el botón más (+) en la esquina inferior izquierda y eligiendo Agregar instancia en el menú que aparece:

Dale a tu instancia un Nombre del estilo sensato, por ejemplo, refiriéndose al tono básico de tus formas coloreadas:

No importa qué formato elijas, ya sea CFF/OTF, TTF, WOFF o WOFF 2. Dado que todos ellos están basados en OpenType, Glyphs podrá insertar las tablas necesarias para su visualización. Debido a que las tablas CPAL y COLR son una tecnología bastante reciente, algunas aplicaciones solo mostrarán la fuente de respaldo.

Sin embargo, la mayoría de los sistemas y aplicaciones ya son compatibles con CPAL/COLR, y todos los principales navegadores ahora son compatibles con CPAL/COLR en sus versiones actuales:

• Internet Explorer (desde Windows 8.1)
• Firefox (desde la versión 26)
• Microsoft Edge (desde la versión 38 en Windows 10)
• Safari (desde macOS 10.13 High Sierra)
• Chrome (desde la versión 70)
• Android WebView (desde la actualización 71)
• Opera (desde la actualización 58)

Los dos mayores inconvenientes:

• Safari queda fuera de juego en versiones antiguas de macOS hasta 10.12 Sierra inclusive.
• Chrome muestra recortes en los límites horizontales y verticales de la capa de respaldo. Para resolver este problema, debes asegurarte de que tu capa de respaldo sea la más gruesa, es decir, que desborde a las demás, tanto horizontal como verticalmente.

Entonces, lo más probable es que desees probar tus fuentes de color como fuentes web. Si lo haces, puedes usar los scripts de mekkablue Test > Webfont Test HTML para crear un HTML de prueba rápido junto a tus exportaciones de fuentes web más recientes.

Genial, así que ahora para todas esas otras letras además de la mayúscula I...

Paletas alternativas

Puedes exportar múltiples variantes de tu fuente de color y tener diferentes paletas de colores para cada una de ellas. Para que eso suceda, primero asegúrate de tener varias paletas configuradas en el parámetro personalizado Paletas de colores que ya has configurado en Archivo> Información de la fuente> Másteres. Puedes agregar paletas haciendo clic en la rueda dentada y luego seleccionando Añadir paleta:

¿Notas los números en la parte superior de las columnas? En la captura de pantalla anterior, por ejemplo, hay Paleta 0 y Paleta 1. Estos son números de índice y son importantes para el siguiente paso. Ahora, confirma la ventana de diálogo Paletas de colores.

En Archivo > Información de la fuente > Exportaciones, haz lo siguiente:

1. Duplica la instancia de fuente de color que ya tienes: selecciónala en la barra lateral, copia y pega. También puedes presionar Opt-arrástrandola en la barra lateral.
2. Cambia el nombre del estilo de la instancia a algo que tenga sentido. Tiene que ser diferente para la otra instancia que ya tienes.
3. En el campo Parámetros personalizados, agrega un parámetro llamado Paleta de color para CPAL. Como valor, elige el número de índice de la paleta que deseas aplicar. En nuestro ejemplo, queremos la segunda paleta, que tiene el número de índice uno:

   

4. Ahora vuelve a exportar con Archivo > Exportar (Cmd-E), y esta vez, Glyphs exportará ambas variantes:

Eso es bastante genial.

Exportar la fuente solo en blanco y negro

¿Qué sucede si solo queremos una fuente simple en blanco y negro, sin nada de color? En otras palabras, exportarás la fuente de reserva pura sin las tablas CPAL y COLR. Pues, podemos decirle a Glyphs que suprima la exportación de las dos tablas de colores con un parámetro personalizado llamado Exportar tabla COLR en una instancia en Archivo > Información de la fuente > Exportaciones, y desactiva su casilla de verificación de valor, así:

Entonces, se evitará la creación de tablas CPAL y COLR en la instancia respectiva, y obtendrás una fuente simplona, aburrida, de plano y fondo. ¡Bu!

Scripts útiles

En Ventana > Gestor de plugins > Scripts, encontrarás algunas colecciones de scripts que contienen scripts que pueden ayudarte en tu flujo de trabajo de CPAL/COLR. Los scripts de mekkablue tienen algunos scripts en Scripts > mekkablue > Color Fonts:

• Add All Missing Color Layers to Selected Glyphs (Añadir todas las capas de color faltantes a los glifos seleccionados) agregará un duplicado de la capa de respaldo para cada color (CPAL/COLR) definido en el parámetro Paletas de colores, para cada glifo seleccionado. Solo agrega colores que aún faltan en el glifo. Útil para obtener rápidamente todas las capas que necesitas.
• Convert Layerfont to CPAL+COLR Font (Convertir fuente multicapa a fuente CPAL+COLR) convierte una fuente de color multicapa en una fuente de un único máster con capas CPAL y COLR en cada glifo. Tomará el primer máster de la fuente multicapa como respaldo.
• Delete Non-Color Layers in Selected Glyphs (Eliminar capas sin color en glifos seleccionados) elimina todas las subcapas en todos los glifos que no son capas CPAL/COLR.
• Merge Suffixed Glyphs into Color Layers (Combinar glifos con sufijos en capas de color) mueve, por ejemplo los glifos x.shadow, x.body y x.front en tres capas CPAL separadas del glifo x:

  

En los scripts de Henrique Beier de Harbor Type, encontrarás un script llamado Copy Master into Sublayer. Copia un máster en una subcapa de otro máster para los glifos seleccionados. Útil para una conversión más controlada de una fuente multicapa en una configuración CPAL/COLR.

EJEMPLO DE FUENTE: URLOP DE MIKOŁAJ GRABOWSKI
Actualización 26/03/2018: se agregó una lista de navegadores compatibles, parámetro de Paleta de colores, enlace al tutorial SVG.
Actualización 14/04/2018: se actualizó el título del tutorial.
Actualización 11/06/2018: se actualizó el soporte de aplicaciones y navegadores, sección mejorada 'Diferentes paletas para instancias'.
Actualización 20/08/2021:
Update 2021-08-20: actualización para Glyphs 3, sección agregada sobre scripts útiles y versiones anteriores para Glyphs 2.
Traducción al español de Sol Matas.