Una fuente variable es un único archivo que puede almacenar un rango continuo de variaciones de estilos de fuentes (con distinto peso, anchura o tamaño).
Las fuentes variables incluyen nuevas estructuras de datos incorporadas en la especificación OpenType 1.8. Dichas estructuras permiten empaquetar dos o más estilos de una familia de fuentes en un solo archivo.
Una fuente variable contiene un único conjunto de contornos, a partir del cual los conjuntos de datos pueden generar un número casi ilimitado de instancias. Para ello, se define un conjunto de variaciones de contorno dentro de la fuente, conformando así un espacio de diseño de uno o varios ejes en cuyo marco se pueden interpolar muchas instancias de fuentes.
Para ver las fuentes variables en Monotype Fonts, haz clic en el menú Browse (Explorar) y, a continuación, selecciona la página Fonts. Después, ve a la sección Filters (Filtros), despliega Variable fonts (Fuentes variables) y haz clic en la opción Only show variable fonts (Mostrar solo fuentes variables).
Nota: Todas las fuentes variables disponibles en Monotype Fonts llevan la etiqueta 
.
Diferencias entre fuentes estáticas y variables
En la siguiente tabla se indican las diferencias entre las fuentes estáticas y las variables:
| Fuente estática | Fuente variable |
Definición | Tiene estilos fijos y un archivo diferente para cada variación. | Permite almacenar muchas variaciones de un solo tipo de letra en un solo archivo. |
Tiene un archivo diferente por variación | Sí | No |
Mejora el rendimiento de los sitios web | No | Sí |
Ofrece flexibilidad de diseño | No | Sí |
Admite transiciones de CSS | No | Sí |
Compresión | No | Sí |
Tipografía adaptativa | No | Sí |
Distribución fácil | No | Sí |
Tipografía accesible | No | Sí |
Número de estilos incluidos | Uno solo | Más de uno |
Compatibilidad con navegadores | Sí | No compatible con todos los navegadores |
Disponibilidad de efectos de texto dinámicos | No | Sí |
Beneficios de las fuentes variables
Las fuentes variables ofrecen numerosos beneficios; por ejemplo:
Compresión
El tamaño de una fuente variable es menor que la suma de los tamaños de las fuentes tipográficas individuales que representan el mismo rango de estilos que esta. Por ejemplo, el tamaño total de dos fuentes estáticas usadas por separado en un proyecto será mayor que el tamaño de una sola fuente variable que incluya ambas fuentes tipográficas. Cuantos más estilos se añaden a una fuente variable, mayor es el ahorro.
Mejora el rendimiento de los sitios web
Un sitio web puede cargar un solo archivo de fuente variable y ajustar las variaciones en caso necesario. Esto mejora la velocidad de carga y el rendimiento del sitio web.
Distribución fácil
Efectos de texto dinámicos
Las fuentes variables pueden incorporar animaciones o transiciones de CSS, así como efectos de texto dinámicos para cambiar la anchura, el peso, la inclinación u otros atributos de la fuente con el tiempo.
Mayor variabilidad
Se puede empaquetar una amplia gama de estilos en un solo archivo de fuente. La especificación OpenType 1.9 define etiquetas para cinco ejes:
Peso
Anchura
Tamaños ópticos
Cursiva (frente a redonda)
Inclinación (frente a redonda)
No obstante, la especificación de fuentes OpenType permite crear todas las variaciones imaginables sobre la base de los ejes privados definidos por el usuario o usuaria.
Monotype ofrece muchas familias tipográficas que incluyen diversos pesos y anchuras, como Helvetica Now, Cotford, Kairos Sans y Futura Now.
Tipografía adaptativa
Las fuentes variables ofrecen tipografías adaptativas y permiten ajustar su aplicación. Se puede adaptar la anchura, el contraste y otras variables para optimizar la legibilidad en un dispositivo concreto. Es como definir los bordes de los caracteres, solo que es posible hacerlo de una forma más precisa que con un filtro que afecta por igual al eje X como al Y.
Nota: En tipografía, la definición de bordes se refiere al proceso de ajuste del espaciado, las curvas y los ángulos de una letra con el objetivo de alcanzar una legibilidad y una armonía visual óptimas.
Ofrece eficiencia creativa
Las fuentes variables son flexibles y eficientes, y poseen potencial creativo. Por ello, son un recurso muy interesante para los equipos de diseño.
Tipografía accesible
Las fuentes variables permiten ofrecer una experiencia mejor gracias a que sus posibles variaciones se adaptan a quien las lee y a su entorno.
Limitaciones de las fuentes variables
Una fuente variable puede tener las siguientes limitaciones en función del contexto en el que se use:
Las fuentes variables son formatos comprimidos que incluyen más de un estilo. Sin embargo, si solo te interesa usar dos o tres pesos de una amplia familia de variables, puede que no te merezca la pena la reducción en tamaño. Por tanto, aunque las fuentes variables pueden hacer que los tamaños de archivo disminuyan, también pueden hacer que incrementen al incluir muchas variaciones innecesarias.
No todas las fuentes se ofrecen en formato variable.
Las fuentes más recientes se suelen diseñar como fuentes interpolables, fáciles de desarrollar a su vez como fuentes variables. Las fuentes más antiguas elaboradas por separado mediante diseños estáticos pueden tener una variabilidad estructural mayor en cuanto a un eje y no se pueden desarrollar fácilmente como fuentes interpolables.
Por ejemplo, la fuente Times New Roman no sería una buena candidata, puesto que los cambios de dirección de los acentos y en la forma y la alineación de los remates de las letras minúsculas generan interpolaciones extrañas.
Solo existen algunas familias de fuentes en todo el mundo cuyo estilo recto se ha diseñado como interpolable con la cursiva correspondiente. También hay muchas fuentes oblicuas o inclinadas que pueden funcionar, pero esa variabilidad entre los extremos añade valor de cara a la clientela.
No todos los navegadores admiten las fuentes variables.
Consulta la sección sobre la compatibilidad con navegadores para conocer los detalles.
Ajustar las variaciones de una fuente tipográfica incluida en el archivo de fuente variable puede ser complejo y requiere conocimientos profundos sobre CSS y el diseño de fuentes.
Compatibilidad de las fuentes variables con navegadores
Nuestros archivos de fuentes WOFF y WOFF2 son compatibles con todos los navegadores modernos. Distintos navegadores o versiones pueden admitir formatos diferentes.
Navegadores compatibles con WOFF
Internet Explorer 9 y posteriores
Edge 12 y posteriores
Firefox 3.6 y posteriores
Chrome 5 y posteriores
Safari 5.1 y posteriores
Opera 11.5 y posteriores
iOS Safari 5 y posteriores
Android 4.4 y posteriores
Blackberry 7 y posteriores
Opera Mobile 12 y posteriores
Chrome Android 70 y posteriores
Firefox Android 63 y posteriores
Internet Explorer Mobile 10 y posteriores
UC para Android 11.8 y posteriores
Samsung Internet 4 y posteriores
QQ 1.2 y posteriores
Baidu 7.12 y posteriores
Navegadores compatibles con WOFF2
Edge 14 y posteriores
Firefox 39 y posteriores
Chrome 36 y posteriores
Safari 12 y posteriores
Opera 23 y posteriores
iOS Safari 10 y posteriores
Android 67 y posteriores
Opera Mobile 46 y posteriores
Chrome Android 70 y posteriores
Firefox Android 63 y posteriores
Samsung Internet 4 y posteriores
QQ 1.2 y posteriores
Baidu 7.12 y posteriores
Descarga de fuentes variables
Sigue estos pasos para descargar fuentes variables de la plataforma Monotype Fonts:
Haz clic en el icono Sync & Download options (Opciones de sincronización y descarga) de la fuente variable que quieras.
Abre la pestaña Download options (Opciones de descarga).
Selecciona el formato de archivo (como CFF o TTF) que quieras descargar.
Selecciona los pesos y estilos de fuente que quieras descargar o haz clic en Download family (Descargar familia) para descargar toda la familia.
Instalación de fuentes variables
Mac
Sigue estos pasos para instalar una fuente en Mac:
Haz doble clic en el archivo .zip descargado para extraer el contenido.
Elige una de las dos formas siguientes para instalar la fuente en Mac.
Para activar una fuente, arrastra los archivos de la fuente sobre la carpeta «Fonts» (Fuentes) de la carpeta «Library» (Biblioteca): Macintosh HD/Library/Fonts. Otra opción es usar el atajo del teclado Cmd + Mayús + G.
Usa Font Book (Catálogo Tipográfico), la aplicación de gestión de fuentes de macOS para instalar las fuentes.
Haz doble clic en la fuente y Font Book (Catálogo Tipográfico) se abrirá en una ventana.
Haz clic en Install Fonts (Instalar fuente) para instalar las fuentes.
Consulta la sección de soporte del sitio web de Apple, http://support.apple.com/kb/HT2509, para obtener más información.
Para acceder a las fuentes que acabas de instalar, reinicia las aplicaciones que estuvieran abiertas.
Windows
Windows XP o posteriores:
Si haces clic con el botón derecho en el archivo .zip y seleccionas Extract All (Extraer todo), se creará una carpeta nueva que contendrá las fuentes en la ubicación que hayas elegido.
En cualquier otra versión de Windows:
Ve a «Local Disk (C:)» (Disco local [C:]) › «Windows» › «Fonts» (Fuentes). Localiza la carpeta que has descomprimido del archivo .zip descargado y arrastra los archivos de la fuente a la carpeta «Fonts» (Fuentes).
Windows 7 y posteriores:
Haz clic con el botón derecho en los archivos de fuente extraídos y selecciona Install (Instalar) o Install for All Users (Instalar para todos los usuarios).
Para acceder a las fuentes que acabas de instalar, reinicia las aplicaciones que estuvieran abiertas.
Sincronización de fuentes variables
La sincronización de fuentes implica transferir las fuentes desde el panel de control del navegador hasta la aplicación de escritorio Monotype.
Cuando las fuentes y las familias de fuentes se sincronizan con la aplicación de escritorio Monotype, se puede acceder a ellas automáticamente en la mayoría de las aplicaciones creativas. Los usuarios no tienen que descargar archivos de fuentes individuales.
La sincronización es el método principal para acceder a las fuentes a través de Monotype Fonts.
Sigue estos pasos para sincronizar las fuentes variables con la aplicación de escritorio Monotype:
Haz clic en el icono Sync & Download options (Opciones de sincronización y descarga) para sincronizar la fuente variable que quieras.
En la pestaña Sync to Monotype App (Sincronizar con la app Monotype), selecciona el formato de archivo (como CFF o TTF) que quieras.
Sincroniza los pesos y estilos de fuente que quieras o haz clic en Sync family (Sincronizar familia) para sincronizar toda la familia.
Desincronización de fuentes variables
Sigue estos pasos para desincronizar una fuente variable sincronizada:
Haz clic en el icono Sync & Download options (Opciones de sincronización y descarga) de la fuente variable sincronizada.
En la pestaña Sync to Monotype App (Sincronizar con la app Monotype), haz clic en Unsync (Desincronizar).
Uso de fuentes variables
Hoy en día, las fuentes variables comerciales disponibles se crean en formato TTF. Se puede solicitar el conjunto de fuentes estáticas correspondiente como parte del pedido de fuentes variables. Ambos tipos se pueden instalar de forma simultánea.
Las fuentes variables pueden ser más útiles para los equipos de diseño y del sitio web, puesto que ofrecen tamaños de archivo reducidos en comparación con las familias de fuentes estáticas. Esto es particularmente interesante para las aplicaciones web. El tamaño del archivo dependerá del diseño y del número de estilos que incluya. En general, la ventaja que supone su tamaño reducido es mayor cuanto más numerosos sean los estilos que contiene la familia. Las fuentes variables también dotan de más flexibilidad al equipo de diseño de interfaces.