ManzDev
Perfil de Manz Dashboard de actividad
HTML5 Etiquetas HTML
CSS CSS vanilla
PostCSS Transformador CSS
Javascript Javascript ES2020+
NPM Node Package Manager
WebComponents Componentes web
Terminal Terminal de GNU/Linux
VueJS Framework VueJS 3
Automatizadores Empaquetadores Javascript
Dibujando con CSS ¡Dibujos hechos con sólo CSS!
Experimentos con Javascript ¡Experimentos con Javascript!

Fuentes variables CSS

Hasta ahora, es posible que sólo hayas utilizado fuentes estáticas (tipografías que tienen un peso y un estilo concreto), ya que son las que tradicionalmente se han utilizado en CSS. Sin embargo, existe también una categoría alternativa llamada fuentes variables, que posee ciertas diferencias y son mucho más prácticas e interesantes en ciertos casos. Veamos las características de cada uno de estos grupos para aclarar conceptos.

Fuentes estáticas

Las fuentes estáticas se dividen en diferentes ficheros según sus pesos y/o estilos. Por ejemplo, la tipografía Open Sans dispone de 10 ficheros con diferentes pesos: 300, 400, 600, 700 y 800 (para el estilo normal) y otros 5 ficheros con los mismos pesos mencionados pero para los estilos en cursiva (italic). En las fuentes estáticas los pesos suelen variar de 100 en 100.

Si en una web utilizamos fuentes estáticas, lo habituales es escoger los pesos concretos que vamos a utilizar. Por ejemplo, cargar en la web los ficheros open-sans-300.woff2, open-sans-300-italic.woff2 y open-sans-400.woff2. Con esto podríamos utilizar Open Sans con los pesos 300, 300 en cursiva y 400, concretamente. El tamaño aproximado de las 3 tipografías podría ser unos 150KB (50KB cada fichero).

Fuentes variables

Por contraposición, las fuentes variables se aglutinan generalmente en un solo fichero, conteniendo estilos y diferentes pesos, pudiendo variarlos dinámicamente y con gran precisión a través de propiedades de CSS. El fichero será más pesado que uno de los anteriores, pero muy probablemente más ligero que 3 o 4 ficheros (combinación más que habitual cuando trabajamos con fuentes estáticas).

Si utilizamos fuentes variables en una web, podríamos cargar la tipografía open-sans-vf.woff2. Con esta tipografía podríamos usar Open Sans con pesos entre el rango 100 y 900 (incluyendo valores específicos como 105 o 112). El fichero de la tipografía podría ocupar unos 130KB.

Esto hace que, si queremos utilizar una tipografía con diferentes pesos específicos (titular, párrafos, botones, etc...), sea mucho más práctico utilizar una tipografía variable que una tipografía estática, además de tener mucha más flexibilidad y variedad de pesos.

A continuación puedes observar un ejemplo de cada una, utilizando la tipografía Monserrat, tanto en su versión estática como en su versión variable:

Fuente estática

400
  • Tipografía: Montserrat
  • Pesos cargados: 300, 400, 500, 600, 700 y 800.
  • Tamaño total: 77KB x 6 = 462KB

Fuente variable

400
  • Tipografía: Montserrat VF
  • Rango de pesos: 100-900.
  • Tamaño total: 120KB

Propiedades de fuentes variables

Al utilizar tipografías o fuentes variables podemos seguir trabajando con la mayoría de las propiedades CSS de fuentes que usamos habitualmente, sin embargo, algunas cosas cambian ligeramente. Veamos que propiedades pueden ser necesarias para trabajar fuentes variables:

Propiedad CSS Descripción Equivalencia
font-weight Indica el peso que debe tener el texto. 'wght'
font-stretch Indica el ancho de cada letra del texto. 'wdth'
font-style Indica la inclinación (slant) o la activación de la cursiva (italic). 'slnt' ó 'ital'
font-optical-sizing Indica si el texto debe estar optimizado para diferentes tamaños. 'opsz'
font-variation-settings Propiedad a bajo nivel de las características de fuentes variables. -

Las propiedades CSS anteriores (salvo la última) son las propiedades CSS que se suelen utilizar para ajustar temas relacionados con los estilos y características de las tipografías. Sin embargo, cuando trabajamos con fuentes variables, muchos navegadores puede que no soporten adecuadamente estas propiedades o características relacionadas con fuentes variables. En ese caso, podemos recurrir a una propiedad a bajo nivel llamada font-variation-settings, la cuál funcionará si las anteriores no son soportadas.

Cargar fuentes variables

Para cargar tipografías variables personalizadas, podemos utilizar la regla @font-face como aprendimos en temas anteriores. Sin embargo, existen algunas diferencias al utilizar tipografías variables:

@font-face {
  font-family: "Montserrat";
  src:
    url(montserrat-vf.woff2) format("woff2" supports variations),
    url(montserrat-vf.woff2) format("woff2-variations");  /* Obsoleta */
  font-weight: 100 900;
  font-stretch: 50% 200%;
}

En primer lugar, observa que indicamos la tipografía variable (montserrat-vf.woff2), indicando el formato "woff2" supports variations y el formato woff2-variations. La primera de ellas es la sintaxis definitiva que se va a utilizar en CSS, la segunda, una sintaxis anterior que se ha marcado como obsoleta, pero que algunos navegadores puede que sea la única sintaxis que soporten de momento.

Un poco más abajo, observamos que utilizamos las propiedades font-weight y font-stretch, pero con dos valores en lugar de uno. En las tipografías variables, en lugar de utilizar un valor establecemos un rango. De esta forma, estamos permitiendo pesos entre 100 y 900 y ancho de letra entre 50% y 200%. Los valores fuera de estos rangos, se establecerán en el valor más cercano permitido.

Podría interesar hacer una carga mixta, en la que se cargue una tipografía variable sólo si la soporta el navegador (si conoce la propiedad font-variation-settings), y en caso contrario, una tipografía estática normal. Si eso es lo que queremos, podemos utilizar el siguiente fragmento de código, donde se utiliza la regla @supports para ello:

@font-face {
  font-family: "Montserrat";
  src:
    url(montserrat-400.woff2) format("woff2"),
    url(montserrat-400.woff2) format("woff"),
    url(montserrat-400.ttf) format("truetype"),
  font-weight: 400;
}

@supports (font-variation-settings: normal) {
  @font-face {
    font-family: "Montserrat";
    src:
      url(montserrat-vf.woff2) format("woff2" supports variations),
      url(montserrat-vf.woff2) format("woff2-variations");  /* Obsoleta */
    font-weight: 100 900;
    font-stretch: 50% 200%;
  }
}

Observa que lo que hemos hecho es establecer una tipografía estática en el CSS común superior, que inmediatamente será reemplazada por el que está contenido en la regla @supports si el navegador soporta tipografías variables. De esta forma no habrá conflicto con las propiedades font-weight o similares, que toman dos parámetros en el caso de fuentes variables.

Propiedades específicas

Podemos utilizar las siguientes propiedades para modificar el peso de la tipografía, el ancho de la letra, la modalidad de cursiva o slant o el ajuste óptico, que es un modo de ciertas tipografías en el que si estableces tamaños muy pequeños, los trazos y serifas de la tipografía se muestran de forma más gruesa para que se puedan ver correctamente.

Propiedades CSS Valores Descripción
font-weight 400 | peso Indica el peso a utilizar: 400, 100, 800...
font-stretch 100% | porcentaje Indica el ancho de letra. Rango entre 50% ~ 200%.
font-style normal | italic | oblique Indica si usar cursiva (italic) o cursiva artificial (oblique).
font-style oblique 14deg | oblique ángulo Inclinación deseada de la cursiva artificial.
font-optical-sizing auto | none Indica si se optimizarán trazos para mejorar visibilidad.

Pero como comentabamos antes, es posible que algunas de estas propiedades CSS no funcionen correctamente aún en navegadores, por lo que podemos utilizar la propiedad de bajo nivel font-variation-settings, la cuál nos permite configurar a nuestro gusto una o todas las opciones anteriores de una sola vez.

La propiedad font-variation-settings

Esta propiedad de bajo nivel permite indicar una o varias características especiales de una tipografía variable. La sintaxis que se utiliza se basa en indicar la característica a configurar (una cadena de texto de 4 letras), seguida de un valor asociado a dicha característica:

Propiedad CSS Valor Descripción
font-variation-settings 'feat' valor Activa la característica feat con el valor indicado.
font-variation-settings 'feat1' valor1, 'feat2' valor2, ... Activa varias características a la vez.

Este ejemplo se traduciría a código como veremos a continuación, utilizando la característica wght (weight) con peso 500:

.element {
  font-family: "Montserrat", serif;
  font-variation-settings: 'wght' 500;
}

Puedes utilizar la página Wakamai Fondue para arrastrar una tipografía y examinar de que características dispone. Por ejemplo, si arrastramos la tipografía Montserrat VF vemos que nos da datos como los siguientes:

Si nos fijamos un poco más abajo, hay un apartado llamado Variable donde aparecen las características que posee la tipografía. Depende de cada tipografía que características tenga. A continuación podemos ver una tabla con algunas de las características que podemos encontrar y cuál es su nombre de 4 letras para indicar en la propiedad font-variation-settings:

Nombre Propiedad específica Propiedad a bajo nivel
wght font-weight font-variation-settings: 'wght' 400
wdth font-stretch font-variation-settings: 'wdth' 100%
slnt font-style: oblique 14deg font-variation-settings: 'slnt' 14deg
ital font-style: italic font-variation-settings: 'ital' 1
opsz font-optical-sizing: auto font-variation-settings: 'opsz' 1

Observa que las caracteristicas a bajo nivel se identifican siempre con una palabra clave de 4 letras (wght, wdth, etc...) que generalmente es una abreviatura de la característica en sí. Luego, se le asocia un valor que depende de la característica. Pueden ser valores como tamaños, porcentajes, unidades o valores 1 o 0 para activar o desactivar respectivamente.

Ten en cuenta que la propiedad font-variation-settings establece todas las características de una sola vez. Si volvemos a escribir la propiedad con otra característica, sobreescribirá la anterior. Para evitar esto, podemos utilizar CSS Custom Properties separando por comas múltiples características:

.element {
  --font-weight: 400;
  --font-stretch: 100%;

  font-family: "Montserrat", sans-serif;
  font-variation-settings:
    'wght' var(--font-weight),
    'wdth' var(--font-stretch);
}

En este ejemplo establecemos las «variables» --font-weight y --font-stretch en la propiedad font-variation-settings. Si en algún momento queremos modificarlas, no hace falta modificar la propiedad, sino directamente la variable CSS.

En la página V-Fonts y en GitHub puedes encontrar multitud de fuentes variables para utilizar en tus diseños. Recuerda investigar bien la tipografía en la página del autor, ya que muchas tipografías son gratuitas, pero muchas otras son de pago y debes tener una licencia.

Manz
Publicado por Manz

Docente, divulgador informático y Streamer de código. Amante del CSS y de la plataforma web en general. Autor de Emezeta.com tiempo atrás. Ha trabajado como profesor en la Universidad de La Laguna y es director del curso de Programación web FullStack y FrontEnd de EOI en Tenerife. En sus ratos libres, busca GIF de gatos en Internet.