Fuentes variables y WordPress

Uno de los conceptos que más se están escuchando últimamente en el diseño web es el de fuentes variables. Si has asistido a algún evento WordPress recientemente, también en nuestro entorno es uno de los temas que generan más interés.

De hecho, recientemente Ana Cirujano ha presentado ponencias para explicar las fuentes variables y sus posibilidades, y puedes ver ya algún vídeo suyo como el siguiente, o su ponencia en WordCamp Europe 2019.

Pero no quiero ir tan rápido, así que empecemos por el principio.

¿Qué son las fuentes variables?

Hay muchas definiciones, pero antes debes tener claro un concepto básico sobre lo que estamos hablando, y no me pongo académico, es que te hará falta para entender los conceptos de los que vamos a tratar.

Tipografía y fuente

Aunque se suelen usar de modo indistinto cuando hablamos de tipos de letra (otro término para ayudar a la confusión), en realidad tipografía y fuente son términos bien distintos.

La tipografía se refiere a toda una familia de diseños de letras, como por ejemplo la tipografía Montserrat, muy común estos días.

Por otra parte, la fuente es cada uno de los archivos de esa familia, de la tipografía. Por seguir con la tipografía Montserrat, fuentes de esta familia serían «Monserrat Bold«, «Monserrat Regular» o «Monserrat Italic«.

Para no enrollarme, y resumiendo …

Una tipografía es lo que ves, una fuente es lo que usas Clic para tuitear

¿Y entonces qué es una fuente variable?

Las fuentes variables son fuentes únicas que pueden modificarse mediante CSS según 5 criterios o ejes diferentes. Cada eje controla una faceta particular de la apariencia de la fuente y tiene una etiqueta CSS correspondiente.

  • Peso (wght en CSS)
  • Inclinación (slnt en CSS)
  • Cursiva (ital en CSS)
  • Tamaño óptico (opsz en CSS)
  • Ancho (wght en CSS)

Y luego hay un eje personalizado llamado Grado, representado por GRAD (en mayúsculas) en CSS.

Al combinar todos esos ejes diferentes, puedes hacer que cualquier tipografía haga casi lo que quieras, incluso animaciones.

En el siguiente vídeo puedes ver como modificamos 3 de estos ejes en una fuente variable:

Tú mismo puedes hacer pruebas en la web de v-fonts.

Esta tecnología permite que una sola fuente se comporte como múltiples fuentes.

Se hace definiendo las variaciones dentro de la fuente. Estas variaciones provienen del hecho de que cada carácter sólo tiene un contorno. Los puntos que construyen este esquema tienen instrucciones sobre cómo deben comportarse.

No es necesario definir múltiples pesos de fuentes porque pueden interpolarse entre definiciones muy gruesas y muy finas. Esto también permite generar estilos intermedios, por ejemplo, semi-negrita y negrita.

Estas variaciones pueden actuar en uno o más ejes de la fuente. En la imagen de abajo, tienes un ejemplo de esta interpolación de contorno en la letra A.

El «eje de variación»

La madre del cordero de todo esto de las fuentes variables es el llamado «eje de variación«, que que describe el rango permitido de ese aspecto particular del diseño tipográfico.

De este modo, el «eje de peso» describe cuán ligeras o negritas pueden ser las figuras; el «eje de anchura» describe cuán estrechas o anchas pueden ser; el «eje cursiva» describe si hay formas cursivas y pueden activarse o desactivarse a voluntad, etc.

Ten en cuenta que un eje puede ser un rango o una opción binaria (El peso puede oscilar entre 1-999, mientras que la cursiva puede ser simplemente 0 o 1 – apagado o encendido).

Se pueden hacer usos realmente creativos con variaciones del ejes personalizados.

Al final, esta frase define muy bien lo que es una fuente variable:

Una fuente variable es una única fuente que se comporta como si fueran muchas fuentes #VariableFonts Clic para tuitear

Fuentes variables y optimización web

En el pasado, una tipografía se creaba como un número de fuentes individuales, y cada fuente representaba una combinación específica de ancho/peso/estilo.

Por lo tanto, tendrías archivos separados para «Montserrat Regular«,»Montserrat Bold» y «Montserrat Bold Italic«,  lo que significa que podrías terminar con 20 ó 30 archivos de fuentes diferentes para representar un tipo de letra completo (podría ser varias veces mayor si un tipo de letra grande también tiene diferentes anchos).

En tal caso, para utilizar un tipo de letra para un uso típico en una web para el cuerpo de un texto, se necesitarían al menos cuatro archivos: regular, cursiva, negrita, negrita y cursiva negrita.

Si quisieras añadir más pesos, como uno más ligero para los subtítulos o uno más pesado para dar más énfasis, eso significaría varios archivos más.

Esto resulta en más peticiones HTTP, y más datos que se descargan (generalmente alrededor de 20k o más por archivo).

Con una fuente variable, todas esas permutaciones pueden estar contenidas en un solo archivo.

Ese archivo podría ser más grande que una sola fuente, pero en la mayoría de los casos más pequeño, o más o menos del mismo tamaño que los 4 que puede cargar para el cuerpo del texto, y solo me estoy refiriendo a cuando hagan falta solamente 4 archivos.

La ventaja de elegir la fuente variable es que tienes acceso a toda la gama de pesos, anchos y estilos disponibles, en lugar de tener que limitarse a los pocos que antes habría cargado por separado.

Esto permite técnicas tipográficas comunes, como el ajuste de diferentes encabezados de tamaño en diferentes pesos para una mejor legibilidad en cada tamaño, o el uso de un ancho ligeramente más estrecho para pantallas densas en datos.

A modo de comparación, es típico en un sistema tipográfico que una revista utilice de 10 a 15 o más combinaciones diferentes de peso y ancho en toda la publicación, lo que ofrece una gama mucho más amplia de estilos que los típicos actualmente en la web (o incluso prácticos por razones de rendimiento únicamente).

Pero es que el rendimiento es una ventaja clave de las fuentes variables.

El archivo de la fuente AvenirNext_Variable.ttf, por ejemplo, solo pesa 89kB, pero crea un rango completo de pesos.

Una fuente estándar comparable puede que tenga un archivo más pequeño pero solo aplicaría un peso y estilo. Luego, para añadir más opciones, habría que incorporar más archivos, lo que aumentaría el peso de la página considerablemente.

Pero es que podemos ir aún más allá.

Cuando hablamos de formatos de fuentes hablamos de archivos WOFF2, que son en esencia archivos TTF con una compresión adicional.

Los archivos WOFF2 son más pequeños porque tienen algoritmos personalizados de pre-proceso y compresión, con los que se puede conseguir una reducción de -30% frente a otros formatos.

Google ofrece una herramienta de línea de comandos para comprimir nuestro archivo, convirtiéndolo al formato woff2. En un sistema UNIX, como el de la mayoría de nuestros servidores, podríamos usar estos comandos así:

Para, después de instalar, comprimir nuestra fuente variable así:

Y terminamos con un archivo de 42kb, que redujo a la mitad el tamaño del archivo.

Para usar este archivo, sólo necesitamos modificar el archivo de origen y su formato para adaptarlo a este nuevo archivo:

Con lo que ahora tendríamos un solo archivo de 42Kb que puede usarse en todos los pesos de la fuente en nuestra web.

¿Y cómo las uso en WordPress?

Parámetros de la metafuente de Knuth

Por si no te has dado cuenta, si sabes un poco de CSS y aplicas los conceptos introducidos por el eje de variaciones y los parámetros de las fuentes variables puedes desde ya usar fuentes variables en tu WordPress.

Resumiendo, el proceso podría ser así:

Instala las fuentes variables

Lo primero es instalar la fuente en tu web. Puedes usar un plugin como Use Any Font y subirlo directamente, o si usas temas como Divi, hacerlo desde su propia interfaz.

Luego enlazas a la fuente en tu código usando @font-face, o a la antigua usanza.

Independientemente del método que elijas, una vez la tengas en tu sitio, usarlas es bastante fácil.

Personaliza tu CSS

Como las fuentes variables están basadas en CSS, lo mejor es que vayas a donde quiera que hayas añadido tu CSS personalizado.

Ya sea en un archivo custom.css, una hoja de estilo stylesheet.css de un tema hijo, en el CSS adicional de tu personalizador de WordPress, o donde sea (algunos temas incluyen una zona para personalizar códigos).

Introducirás un código como este (con el nombre de las fuentes variables que estés usando):

Utiliza el CSS para controlar las fuentes variables. Usando los ejes reservados puedes usar las propiedades font-style, font-weight, font-stretch y font-optical-sizing (y si usas los ejes personalizados tienes que usar la propiedad font-variation-setting) para ajustar el eje, como ya hemos visto antes.

Añade tu estilo

Ahora es el momento de darle estilo de alguna manera. Puedes hacer lo que quieras, y el estilo se puede aplicar a cualquier clase o ID.

Puedes hacer que se aplique a todo el cuerpo o al h1, h2, h3 o incluso a p. Tú eliges. Son fuentes variables a fin de cuentas.

Hay dos maneras de abordar este tema. La primera es en una única y eficiente línea de CSS usando font-variation-settings:

También puedes añadirlas con otro CSS, como float, o z-axis o cualquier otra cosa.

También puedes introducir los ejes en líneas individuales:

Con ambos métodos consigues lo mismo.

Guardas los cambios y ya estás usando fuentes variables en tu WordPress.

¿Son las fuentes variables compatibles con cualquier navegador?

Actualmente Safari y Chrome son compatibles totalmente, y en breve Edge y Firefox.

En cualquier caso, a la hora de diseñar con fuentes variables puedes forzar la compatibilidad usando @supports en tu CSS, como en este ejemplo:

¿Tienen futuro las fuentes variables?

Las fuentes variables tienen un gran futuro por delante.

Creo que la tecnología pasará por una fase adolescente en la que todo el mundo probará las fuentes variables más artísticas para hacer animaciones chulas y experimentar, pero finalmente madurará hasta convertirse en algo de uso global y eficiente.

La idea detrás de la tecnología es genial. Sólo espero que la gente no haga todo lo posible para crear fuentes de tipo «navaja suiza» que potencialmente puedan hacer «todo bien» pero «nada genial«, y casi convertirse en algo donde todo sea variable y se pueda crear cualquier tipografía con una sola.

Las fuentes pueden terminar sin tener personalidades claras, dejando la tarea de crear una tipografía que funcione para el diseñador y no para el tipógrafo.

¿Dónde puedo aprender más y descargar fuentes variables?

Si quieres aprender más sobre fuentes variables te recomiendo estas diapositivas de Ana:

Además de estas interesantes webs en las que seguir aprendiendo o descargar fuentes:

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(8 votos, promedio: 5)
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad
Ir al contenido