Ir al contenido principal
Fuentes variables

Conoce las fuentes variables en general y las de Monotype en particular, y descubre cómo usarlas en tus proyectos

Supriya Bisht avatar
Escrito por Supriya Bisht
Actualizado hace más de 3 meses

Una fuente variable es un único archivo que puede almacenar un rango continuo de variaciones de estilos de fuentes (como distintos pesos, anchuras o tamaños).

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ú Explorar y, a continuación, selecciona la página Fonts. Después, ve a la sección Filters (Filtros), despliega Fuentes variables y haz clic en la opción 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

No

Mejora el rendimiento de los sitios web

No

Ofrece flexibilidad de diseño

No

Admite transiciones de CSS

No

Compresión

No

Tipografía adaptativa

No

Distribución fácil

No

Tipografía accesible

No

Número de estilos incluidos

Uno solo

Más de uno

Compatibilidad con navegadores

Compatible con la mayoría de los navegadores web

Nota: Haz clic aquí para consultar los navegadores web compatibles con fuentes variables.

Disponibilidad de efectos de texto dinámicos

No


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 tres fuentes estáticas o más usadas por separado en un proyecto puede ser mayor que el tamaño de una sola fuente variable que incluya esas fuentes por separado. 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 puede mejorar 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.

  • 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.

  • 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 espacio de diseño de la fuente variable.


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:

  1. Haz clic en el icono Sync & Download options (Opciones de sincronización y descarga) de la fuente variable que quieras.

  2. Abre la pestaña Download options (Opciones de descarga).

  3. Selecciona el formato de archivo (como CFF o TTF) que quieras descargar.

  4. 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:

  1. Haz doble clic en el archivo .zip descargado para extraer el contenido.

  2. Elige una de las dos formas siguientes para instalar la fuente en Mac.

  3. 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.

  4. Usa Font Book (Catálogo Tipográfico), la aplicación de gestión de fuentes de macOS para instalar las fuentes.

  5. Haz doble clic en la fuente y Font Book (Catálogo Tipográfico) se abrirá en una ventana.

  6. 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.

  7. 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:

  1. 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).

  2. 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:

  1. Haz clic en el icono Sync & Download options (Opciones de sincronización y descarga) para sincronizar la fuente variable que quieras.

  2. En la pestaña Sync to Monotype App (Sincronizar con la app Monotype), selecciona el formato de archivo (como CFF o TTF) que quieras.

  3. 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:

  1. Haz clic en el icono Sync & Download options (Opciones de sincronización y descarga) de la fuente variable sincronizada.

  2. 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.


Lecturas recomendadas

¿Ha quedado contestada tu pregunta?