4 pasos para usar fuentes variables

Sep 16, 2025

Cómo

Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.

[dieciséis] (Crédito de la imagen: Futuro)

Las fuentes variables permiten a los diseñadores de fuentes definir variaciones de tipo dentro de la fuente en sí, lo que permite que un archivo de fuente actúe como múltiples fuentes. Las fuentes estándar se agrupan a las familias de fuentes que contienen varios archivos de fuente separados, cada uno de los cuales representa un estilo diferente, por ejemplo, un peso ligero o un peso audaz. Las fuentes variables contienen toda esta misma información en un solo archivo de fuente.

Uso de Fuente Sans Pro como ejemplo, la versión variable de la fuente totaliza aproximadamente 394kb y viene en una amplia variedad de pesos. Si tuviéramos que usar estos pesos de fuente individualmente como archivos de fuente estándar, son, en promedio, 234KB cada uno, lo que resulta en un tamaño de archivo combinado de aproximadamente 1856kb. Por supuesto, este cálculo asume que todos los pesos de la fuente existen individualmente como fuente estándar, que no. (Aunque si está buscando solo fuentes regulares, eche un vistazo a nuestro puesto en el mejores fuentes gratis disponible.)

Si eliminamos las fuentes que no existen como una fuente estándar, el tamaño de archivo combinado sigue siendo casi tres veces el tamaño de la fuente de la variable y con significativamente menos estilos. Incluso si solo quiso las versiones audaces y regulares, comunes en muchos proyectos web, dos versiones de la fuente estándar Sans Pro siguen siendo más grandes que una sola fuente variable. Lo que esto demuestra es que con fuentes variables tenemos el potencial de hacer ahorros masivos en ancho de banda sin comprometer nuestros diseños y creatividad.

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font.

Las fuentes variables funcionan mediante la interpolación de las variaciones maestras a lo largo de un eje, esencialmente construyendo nuevos puntos nuevos. Esto significa que podría establecer pesos de fuente en puntos arbitrarios a lo largo del eje que presenta un número mucho mayor de estilos y variaciones. Además, se debe a que las fuentes variables se pueden interpolar que podemos animar entre cada variación, lo que permite a las transiciones suaves decir un peso delgado a un peso audaz, algo que nunca hemos podido lograr antes.

Lo que hace que las fuentes variables aún más emocionantes es que los diseñadores no están restringidos a un solo eje. Las fuentes variables pueden contener muchos ejes diferentes que representan un rango de estilos diferentes. Esto podría incluir un tamaño óptico, óptico, condensado, en cursiva, o otras opciones más creativas o personalizadas.

¿Quieres colocar tus fuentes en un nuevo sitio web? Para los recursos de diseño web, diríjase a nuestro mejor. Creador de sitios web Roundup y recoger de la parte superior Alojamiento web servicios. O para una actualización de almacenamiento, echa un vistazo a estos almacenamiento en la nube Opciones.

01. Comprender ejes en fuentes variables.

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right.

El uso de fuentes variables en nuestro CSS es muy similar a la forma en que normalmente usaríamos fuentes en la web: usando el @ font-cara en la regla . Sin embargo, primero debemos entender los diferentes tipos de ejes dentro de una fuente variable, ya que esto determina qué propiedades CSS hicimos uso.

Hay dos tipos de ejes en una fuente variable: un eje registrado y un eje personalizado. Un eje registrado se refiere a un eje que es lo suficientemente común como para que valga la pena estandarizar. Actualmente hay cinco ejes registrados; El peso, el ancho, el inclinación, el tamaño óptico y óptico y estos a menudo se asignan a las propiedades de CSS existentes, como el peso de la fuente.

Los ejes personalizados están definidos por los diseñadores de TypeFace, pueden ser cualquier tipo de variación y solo requieren un identificador de cuatro letras dentro del archivo de fuente, que puede ser referido en CSS.

02. Use un eje registrado.

A range of variable font weights along an axis from light (200) to black (900).

Cuando se trata de un eje registrado, queremos asegurarnos de que estemos utilizando cualquier propiedad CSS asociada, por ejemplo, de peso de fuentes o estilo de fuente.

Podemos configurar nuestras fuentes usando el @ font-cara en la regla Como normalmente lo haríamos; El cambio está en la forma en que definimos las variaciones para los descriptores como el peso de fuentes, el estiramiento de fuentes y el estilo de fuente. Anteriormente habríamos establecido un peso de fuentes de 200 y definíamos esto como la versión ligera de la fuente, luego configuraríamos otro bloque de cara de fuente para la versión en negrita y la versión regular hasta que teníamos todos los pesos que fueron necesarios para el diseño. Con fuentes variables, solo necesitamos un solo bloque de cara de fuente. Entonces, en lugar de usar múltiples instancias, especificamos un rango de valores que corresponden a los valores mínimos y máximos que se definen en el eje de fuentes.

 @ font-face {
Fuente-familia: "Fuente SANS variable";
SRC: URL ("fuente-sans-variable.woff") Formato ("Goff-Variations");
Peso de fuentes: 200 700;
}

En este ejemplo, establecemos un peso de fuente de 200 a 700. Una vez que se define nuestro rango, podemos elegir cualquier número dentro de ese rango como nuestro peso de fuente, por ejemplo, 658. Importante si establece su rango de peso de fuente como 200 a 700 y Luego, intente definir un peso de 900, incluso si la fuente tiene un peso 900 definido en su eje, no podrá usarlo. La gama define a qué tiene acceso en su CSS.

03. Configurar ejes personalizados

Dado que no existirá las propiedades CSS preexistentes cuando se use un eje personalizado, debemos hacer uso de una nueva propiedad CSS llamada Fuente-Variation-Configuración. Esto nos permitirá definir tantos ejes nombrados y personalizados como necesitamos.

 H1 {
Fuente-familia: 'Mi fuente de variable';
Configuración de la variación de fuentes: 'WGHT' 375, 'INLI' 88;
}

En el ejemplo aquí, WGHT se refiere al eje de peso registrado e INLI se refiere a un eje personalizado llamado en línea, cada uno con un valor número asociado correspondiente a un punto a lo largo del eje de la variación. Si bien puede hacer referencia a un eje registrado como un valor para las configuraciones de variación de fuentes, se recomienda utilizar sus propiedades CSS asignadas.

Para garantizar el apoyo en los navegadores más antiguos, podemos usar fuentes de deformación para los navegadores no compatibles haciendo uso de la detección de características CSS.

 H1 {
  Fuente-familia: "Source Sans", Sans-Serif;
  Peso de fuente: 700;
}

@Supports (Fuente-Variación-Configuración: Normal) {
h1 {
 Fuente-familia: "Decovar";
 Fuente-Variación-Configuración: "Inli" 88;
 }
}

Al verificar el soporte de configuración de la variación de fuentes, podemos incluir nuestros estilos de fuente variable dentro del bloque CSS de soportes, asegurando que solo se usarán en los navegadores que puedan admitir fuentes variables, con nuestras fuentes estándar utilizadas en los navegadores no compatibles.

04. Combine las fuentes de JavaScript y variables.

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts.

Podemos hacer uso de los eventos de JavaScript para situaciones en las que queremos un control más ajustado o para cambiar la fuente según los eventos en los que no podemos acceder con CSS solo. Un ejemplo simple coincidiría con nuestro peso de fuente al tamaño de nuestra ventana de visita, a medida que la vista se vuelve más pequeña, el peso de la fuente se vuelve más pesado.

Para crear la escala de fluidos, debemos alinear dos conjuntos de valores y unidades: el peso de la fuente y el tamaño de la vista. Podemos acceder al ancho de la ventana correcta usando window.innerwidth y cree una nueva escala basada en porcentaje convirtiéndola a un rango de 0-0.99. Al incluir los tamaños de visor mínimo y máximo, podemos controlar el rango del efecto.

 var visursepscale =
(Window.InnerWidth - MinWinDowsize) / (MaxwinDowsize - MinWinDowsize);

Luego determinamos el peso de la fuente según nuestro tamaño de vista.

 var fonthightscale = viewportscale * (Minfontweight - MaxFontweight) + MaxFontweight;

Usando las propiedades personalizadas de CSS, podemos usar nuestro valor de JavaScript para actualizar el peso de la fuente en nuestro CSS.

 P.style.setProperty ("- peso", escala de fonthight);

Cuando esto se combina en una función y se adjunta al oyente de eventos de cambio de tamaño, podemos actualizar el peso de la fuente según el nuevo tamaño de la ventana.

Con este enfoque básico, podemos modificar nuestra tipografía basada en todo tipo de eventos y experiencias. Donde la ventana gráfica es amplia podemos tener más detalles; A la inversa, cuando es más pequeño y en un espacio más confinado, podríamos analizar la reducción del ancho de la fuente o aumentar el peso, brindando un mejor control de nuestro contenido y la tipografía en términos de legibilidad, facilidad de uso y diseño.

Usted puede Ver el código para esto en CodeEpen.

Este artículo fue publicado originalmente en el número 318 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Suscríbete a la red aquí .

Descubre más sobre las fuentes variables en Generar CSS

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September.

En su charla, en Generar CSS, la Conferencia de CSS enfocada para diseñadores web que se lleva a cabo el 26 de septiembre de 2019 en Rich Mix, Londres, Bianca Berning explorará cómo las fuentes variables pueden crear nuevas oportunidades para la palabra escrita dentro de los medios tradicionales, así como nuevos, inmersivos. Experiencias, como AR, VR y realidad mixta.

Si quieres atrapar esto y otras grandes conversaciones, vale la pena cortar tus boletos ahora. Si toma la suya antes de las 5 p.m. UTC el 15 de agosto, puede ahorrar £ 50, pagar solo £ 199 + IVA. Compra tu boleto ahora !

Artículos relacionados:

3 maneras en que la tecnología está cambiando tipo
Comience con fuentes variables en CSS
Transforme su tipo en línea con fuentes variables

4 pasos para usar fuentes variables

01. Comprender ejes en fuentes variables.

02. Use un eje registrado.

03. Configurar ejes personalizados

04. Combine las fuentes de JavaScript y variables.

Descubre más sobre las fuentes variables en Generar CSS

Cómo - Artículos más populares

Cómo implementar modos de luz u oscuros en CSS

Crea animaciones de UI Slick

Cómo transmitir sonido en una pintura

Cómo pintar runas brillantes mágicas

Haz un compuesto en Photoshop

Cómo crear un cabello de estilo manga en movimiento

Crea una perspectiva por deformar tus texturas en Photoshop

Crea texturas listas para el juego utilizando el pintor de sustancias

Categorías