Cuándo sale a cuenta una fuente variable

“Un archivo en lugar de seis” es cierto y es una comparación tramposa, porque el archivo variable no pesa lo que una estática: pesa entre dos y tres veces más. El punto de equilibrio está en dos o tres pesos, y la mayoría de los proyectos que adoptan una fuente variable acaban usando exactamente dos. Esta lección es la cuenta que hay que hacer antes, con los números y con el comando que casi nadie ejecuta.

De qué está hecho el archivo

Una fuente variable contiene todo lo que contiene una estática —contornos, tabla de caracteres, kerning, hinting— y además:

• fvar, la definición de los ejes y de las instancias nombradas.
• gvar, los deltas de cada punto de cada contorno por cada eje. Esta es, con diferencia, la tabla grande.
• HVAR y MVAR, las variaciones de las métricas horizontales y generales.
• Variaciones de las tablas de posicionamiento, para que el kerning siga siendo correcto en cada instancia.

gvar crece con el número de ejes y con el número de másters. Un eje de peso con tres másters añade bastante; tres ejes con másters en las esquinas del espacio añaden mucho más, porque los deltas se combinan.

Los órdenes de magnitud, con un subconjunto latino y en woff2:

El punto de equilibrio

Con esos rangos, la cuenta es directa. Tomando 20 KB por estática y 45 KB por variable de un eje:

Y ahora la parte que estropea la cuenta bonita: la cursiva es otro archivo. Una familia variable completa son dos archivos, redonda y cursiva. Rehaciendo la tabla con cursivas:

Con dos pesos y cursivas, las estáticas ganan. Es exactamente la configuración más frecuente en un sitio de contenido, y es la razón por la que la respuesta correcta a “¿usamos variable?” tantas veces es que no.

Los casos donde la variable gana sin discusión son tres: muchos pesos, animar un eje —imposible con estáticas— y necesitar anchura u óptico, que las estáticas no ofrecen a menos que compres cortes condensados aparte.

Recortar el espacio de diseño

Aquí está la herramienta que cambia la cuenta y que casi nadie usa: una fuente variable se puede recortar antes de servirla. El instanciador de fonttools fija ejes o limita rangos y reescribe el archivo con los deltas que sobran eliminados.

# limitar el eje de peso al rango que de verdad usas
python3 -m fontTools.varLib.instancer texto-var.ttf \
  wght=300:700 \
  -o texto-300-700.ttf

# fijar un eje en un valor y eliminarlo del archivo
python3 -m fontTools.varLib.instancer texto-var.ttf \
  wght=300:700 opsz=16 wdth=100 \
  -o texto-recortada.ttf

La sintaxis distingue dos operaciones. wght=300:700 limita el eje: sigue siendo variable, con menos recorrido y menos deltas. opsz=16 fija el eje: deja de ser variable, se aplica ese valor y la tabla de variaciones correspondiente desaparece.

El ahorro típico de recortar un eje que no usabas está entre el 20% y el 40% del archivo. Es un comando, se ejecuta una vez en la construcción, y después hay que volver a subconjuntar y convertir a woff2:

pyftsubset texto-recortada.ttf \
  --unicodes="U+0000-00FF,U+2000-206F,U+20AC" \
  --layout-features="kern,liga,clig,calt,ccmp,mark,mkmk" \
  --flavor=woff2 \
  --output-file=texto.woff2

El orden importa: primero instanciar, después subconjuntar, y la conversión a woff2 al final.

La tabla de decisión

Y por encima de la tabla, la disciplina que la sustituye: mídelo tú. Genera los dos juegos con el mismo subconjunto y las mismas características de OpenType, y compara los tamaños reales. Cinco minutos de trabajo dan un número exacto para tu fuente concreta, y las tablas generales, esta incluida, dejan de hacer falta.