Necesitará: FontCreator (Windows o macOS) y dos fuentes estáticas terminadas y compatibles de la misma familia, por ejemplo una Regular y una Bold.
Una fuente variable es un único archivo que contiene uno o varios ejes (por ejemplo, grosor o anchura) que permiten usar, mediante interpolación, un rango continuo de variaciones de estilo. Este tutorial muestra cómo construir una fuente variable en el editor de fuentes de FontCreator a partir de dos fuentes no variables existentes, previsualizar la interpolación, corregir la compatibilidad y exportar named instances. La página sirve además de punto de partida para los demás tutoriales sobre fuentes variables: vea el mapa al final.
La idea de las fuentes variables existe desde hace décadas, pero no se incorporó a la especificación OpenType hasta 2016. FontCreator puede exportar una fuente variable y también cada estilo predefinido (named instance) con un solo clic, de modo que creará fuentes más rápido.
Damos por hecho que ya ha creado una versión Regular y otra Bold de una familia. Para empezar, abra ambas en FontCreator.
Eje Weight
Como vamos a combinar dos fuentes de distinto grosor, necesitamos un eje Weight.
- Active el estilo Regular.
- Abra el panel Propiedades de la fuente.
- Vaya a la pestaña Axes.
- Haga clic en el icono [+] de la barra de herramientas y elija Weight.
El panel Propiedades de la fuente en la pestaña Axes, añadiendo un eje Weight con el icono [+].
Master Bold
En el panel Propiedades de la fuente, seleccione la pestaña Masters. Haga clic en el icono [+] y elija la fuente Bold. Así se copian todos los contornos de glifo de la fuente Bold en esta como segundo master.
Actualice ahora la Ubicación del Eje de ambos masters. Seleccione el master Regular y fije la ubicación en 400. Seleccione el master Bold y fíjelo en 700.
En este punto ya tiene una fuente variable. Bien hecho.
> Nota: probablemente observe que, en el panel vista general de fuente, varios glifos muestran de repente un encabezado rojo. Eso marca los glifos con problemas de compatibilidad: la interpolación fallará en ellos hasta que se corrijan. Lo vemos más abajo, en Problemas de compatibilidad.
Primera impresión: previsualice la interpolación
¿Siente curiosidad por el resultado? Nosotros también.
Para usar el eje Weight, abra el panel Variaciones. Si no está visible, elija View → Panels en el menú principal y compruebe que Variaciones está marcado, o pulse Ctrl+F7 para mostrarlo u ocultarlo.
El panel Variaciones permite previsualizar cualquier posición entre sus masters. Arrastre el control Weight y los contornos se interpolan automáticamente.
Otro panel resulta útil aquí: Masters y Capas. Si no está visible, elija View → Panels → Masters y Capas o pulse Ctrl+F6. Este panel permite cambiar entre los masters disponibles, algo importante porque las capas de contorno de un glifo siempre pertenecen a un master. Si quiere ajustar el contorno Regular, seleccione primero el master Regular.
El panel Variaciones con el control Weight a media carrera, mostrando un glifo interpolado entre Regular y Bold.
Probar la fuente web
Jugar con el control Weight está bien, pero ¿funciona fuera de FontCreator?
En el menú principal, elija Font → Probar fuente web (o pulse Ctrl+F5). FontCreator exporta la fuente variable junto con una página web y la abre en su navegador predeterminado, para que confirme que la interpolación funciona en un entorno real.
Problemas de compatibilidad
La interpolación solo funciona si las capas de contorno son compatibles. Para cada glifo, las capas deben tener el mismo número de contornos, en el mismo orden, con el mismo número de puntos. En los glifos compuestos, los miembros deben coincidir.
Para que FontCreator corrija los problemas básicos:
- Seleccione todos los glifos en el panel vista general de fuente.
- Haga clic en el botón Fix en la parte superior del panel Masters y Capas.
Es probable que algunos glifos sigan teniendo problemas. Ajuste esos contornos a mano:
- Haga doble clic en un glifo para abrirlo en un panel Glyph. El panel Masters y Capas muestra entonces pistas sobre el tipo de problema de compatibilidad.
- Active el botón Show compatibility issues (también en el panel Masters y Capas) para ver exactamente qué hay que corregir.
Un glifo abierto en el panel Glyph con Show compatibility issues activado y el panel Masters y Capas enumerando la discrepancia.
Hay que resolver todos los problemas de compatibilidad; de lo contrario, su fuente tendrá glifos que no interpolan correctamente. Corregir la compatibilidad con cuidado es la clave de una fuente variable que funcione: hay un tutorial dedicado, vea el mapa más abajo.
Instancias con nombre
Para aprovechar al máximo su fuente variable, incluya named instances. Ofrecen a las aplicaciones compatibles estilos familiares como Regular, Medium y Bold. Para un uso fiable en aplicaciones sin soporte de fuentes variables, exporte las instancias que necesite como fuentes estáticas independientes.
Vaya a la pestaña Instances del panel Propiedades de la fuente. Actualice la ubicación de eje de la instancia Default (400) y añada después instancias con los grosores 500, 600 y 700, cada una con un Style Name único.
Aunque no es necesario para la fuente variable en sí, indique también valores correctos de Clase de Peso y Clase de Ancho. Importan si exporta estas instancias como fuentes no variables, así que las consigue casi gratis.
Valores de eje
Otra cosa que conviene hacer: dé nombre a posiciones concretas de un eje (o a una combinación de ejes). Añada valores de eje que coincidan con las ubicaciones de sus named instances, es decir 400, 500, 600 y 700. Marque además Elidable axis value name para el valor Regular (400), ya que representa el grosor normal.
Exportar la fuente variable
Cuando los masters sean compatibles y las instancias estén definidas, exporte la fuente. Abra Configuración de exportación de fuentes, ponga Export en Variable font y elija su Formato de contorno: para la mayor compatibilidad, contornos TrueType. Elija CFF2 solo si quiere expresamente contornos PostScript/cúbicos y su software de destino admite CFF2. Exporte y pruebe el archivo en sus aplicaciones de destino y, como antes, use Probar fuente web para una comprobación rápida en el navegador.
> Consejo: vuelva a ejecutar Probar fuente web después de cada ronda de correcciones de compatibilidad. Es la forma más rápida de detectar un glifo que interpola bien en la vista previa de FontCreator pero falla en un motor de representación real.
Solución de problemas
| Síntoma | Causa probable | Solución |
|---|---|---|
| Encabezado rojo en glifos de vista general de fuente | Las capas de contorno no son compatibles | Seleccione todos los glifos, haga clic en Fix y corrija el resto a mano |
| El control de Variaciones no hace nada | El panel Variaciones está oculto o no se ha añadido un segundo master | Muestre el panel Variaciones (Ctrl+F7) y compruebe el master Bold y su ubicación de eje |
| Un glifo se deforma a media carrera del control | El orden o el número de puntos difiere entre los masters | Abra el glifo, active Show compatibility issues y haga coincidir los contornos |
| Faltan las named instances en otros programas | Las instancias no están definidas o las ubicaciones de eje son incorrectas | Añada instancias en la pestaña Instances con las ubicaciones de eje correctas |
Preguntas frecuentes
¿Necesito fuentes separadas para empezar o puedo dibujar los masters en un archivo? Ambas opciones valen. Este tutorial combina dos fuentes estáticas existentes; también puede añadir ejes y masters dentro de un solo archivo y dibujar cada master directamente.
¿Qué significa «compatible» para la interpolación? Los masters de cada glifo deben compartir el mismo número de contornos, el mismo orden de contornos y el mismo número de puntos (y miembros coincidentes en los compuestos). Si no, ese glifo no puede interpolar.
¿Contornos CFF2 o TrueType para una fuente variable? Para una compatibilidad amplia, elija contornos TrueType. CFF2 es la opción cúbica/PostScript compacta, pero exige software compatible con CFF2 y resulta menos adecuada si necesita soporte antiguo o más amplio.
¿Por qué añadir named instances si la fuente es variable? Las aplicaciones compatibles muestran las named instances como estilos familiares: Regular, Medium y Bold. El software sin soporte usa solo la instancia predeterminada, así que exporte los estilos que necesite como fuentes estáticas independientes para un uso fiable en programas antiguos.
¿Cómo previsualizo un grosor antes de exportar? Use el control Weight del panel Variaciones y elija Font → Probar fuente web (Ctrl+F5) para confirmar que funciona en un navegador.
Qué leer a continuación
Esta página es el punto de partida de las fuentes variables en FontCreator. Desde aquí:
- Corregir la compatibilidad entre masters — resuelva los glifos de encabezado rojo para que todos interpolen limpiamente. Empiece aquí si Fix no lo resolvió todo.
- Named instances y exportación estática — defina instancias y expórtelas como fuentes estáticas independientes para usos antiguos.
- Subconjuntos de fuentes variables — entregue un archivo más pequeño recortando glifos y rangos de eje que no necesite.
- Cambiar glifos con feature variations — sustituya formas de glifo en puntos concretos de un eje (por ejemplo, una coma más gruesa en los grosores altos).
- Kerning contextual variable — haga que el propio kerning varíe por todo el espacio de diseño.
