Fuentes variables, ¿compensa su rendimiento?
Las fuentes variables son conocidas porque mejoran el rendimiento de un sitio Web y porque disponen de una buena flexibilidad en el diseño. Se desarrollaron con el esfuerzo conjunto de las cuatro empresas de tecnología más importantes involucradas en el diseño de tipografías: Apple, Google, Microsoft y Adobe.
La nueva especificación OpenType permite que un diseñador de tipografías incorpore múltiples fuentes dentro de una familia en un solo recurso de fuente, yendo más allá de los estilos preestablecidos básicos (negrita, cursiva…) y posibilitando generar los llamados ejes de diseño.
¿Qué son los ejes de diseño?
La especificación OpenType 1.8 define cinco etiquetas de eje, que nos permiten interpolar la fuente hasta 64.000 variaciones:
- peso
- ancho
- tamaño óptico
- inclinación
- itálica
Además, los diseñadores de tipografías también pueden definir ejes personalizados junto con sus propias etiquetas de cuatro caracteres en la tabla «nombre» del archivo de fuentes.
Qué impacto tienen las fuentes variables en el rendimiento
Con las fuentes variables tendremos control absoluto sobre la tipografía, podremos personalizarla sin limitaciones y encontrar cualquier peso de fuente que necesitemos para nuestra Web.
Nota: El peso de una tipografía es el grosor que existe en sus trazos que puede ser mayor o menor, aumentando o disminuyendo la sensación de “pesadez”. Por ejemplo, una tipografía light (ligera) tiene mucho menos peso que una bold (o negrita).
A diferencia de las fuentes estáticas, que requieren archivos diferentes para cada variación, las fuentes variables mejoran el rendimiento porque utilizan solo un archivo en una sola solicitud HTTP. Por tanto, el rendimiento dependerá de dos métricas: el número de solicitudes HTTP y el tamaño de los archivos de las fuentes.
¿Qué formato de archivo usan las fuentes variables?
El poder incluir variaciones se introdujo en la versión 1.8 de OpenType, que es una extensión del formato de fuente TrueType, por lo que las fuentes variables estaban disponibles como archivos .otf o .ttf. Sin embargo, hoy en día las fuentes variables se empaquetan como fuentes WOFF2 (actualización recomendada de WOFF), que son las fuentes OTF o TTF, pero con una compresión. WOFF fue el resultado de la colaboración de la Fundación Mozilla, Microsoft y Opera Software.
Agregar fuentes variables a una página
Por ejemplo, podemos agregar la fuente variable FF Meta con la siguiente regla CSS:
@font-face {
font-family: 'FF Meta VF';
src: url('MetaVariableDemo-Set.woff2') format('woff2');
}
Añadir variaciones de fuente con CSS
Podemos añadir variaciones de fuente con la propiedad CSS font-variation-settings, una propiedad de bajo nivel que permite establecer un valor para cada eje. Un ejemplo CSS en el que queremos una variación en los ejes wght y wdth, para la fuente variable Avenir Next y utilizando la propiedad font-variation-settings, quedaría en algo como esto:
body {
font-family: 'Avenir Next Variable';
color: rgb(0, 0, 0);
font-size: 148px;
font-variation-settings: 'wght' 631.164, 'wdth' 88.6799;
}
Compatibilidad de los navegadores
Podéis ver aquí una tabla, actualizada a 21-04-2021, que enumera la compatibilidad con fuentes variables en varios sistemas operativos, navegadores y otro software, con enlaces a la referencia de la fuente original.
Conclusión
Con las fuentes variables, además de que se unifican criterios entre diseñadores y desarrolladores, donde más se nota su ventaja es en el rendimiento de las interfaces. Antes el servidor tenía que cargar varios ficheros con sus correspondientes peticiones individuales y ahora con una sola petición, en la que se solicita un único archivo, el rendimiento de la Web se ve beneficiado sustancialmente.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.