Fuentes variables con ejes poco habituales
Fuentes variables experimentales y expresivas con ejes personalizados: suavidad, rebote, informalidad, transformación, rotación, grado y más.
Push the slider
El formato de fuente variable permite que cualquier propiedad de un diseño se convierta en un eje. Cinco están registrados y son comunes: peso, ancho, inclinación, cursiva y tamaño óptico. Más allá de esos, un diseñador puede inventar un eje para lo que la tipografía pueda variar de forma significativa y darle una etiqueta de cuatro letras en mayúsculas. Esa libertad ha producido en los últimos años tipografías muy ingeniosas.
Los ejes personalizados se reparten en unos pocos grupos. Los paramétricos controlan una característica medible, como el grosor de los trazos finos o la altura de las minúsculas, y son herramientas para el ajuste tipográfico fino. El grado cambia lo pesado que parece el texto sin modificar su ancho, de modo que las líneas no se reajustan, lo que resulta útil en el modo oscuro. Los expresivos cambian la personalidad de las letras: esquinas más suaves, un temblor informal, un rebote a lo largo de la línea de base, remates parecidos a serifas. Y algunos ejes son puro concepto, y atan la forma de las letras a datos o las giran en el espacio.
En CSS, todo eje personalizado se fija con font-variation-settings, usando su etiqueta y un número. Como son continuos, los ejes pueden animarse o vincularse al desplazamiento y a la entrada del usuario. Las notas siguientes nombran los ejes propios de cada fuente tal como constan.
-
Recursive
Five axes in one file: proportional to monospace, linear to casual, upright to cursive.
-
Fraunces
Ejes Softness y Wonky junto con peso y tamaño óptico.
-
Roboto Flex
13 ejes, incluidos controles paramétricos para el grosor de los trazos y la altura de las letras.
-
Google Sans Flex
Seis ejes: peso, ancho, tamaño óptico, grado, redondez e inclinación.
-
Commissioner
Flare and Volume axes grow serif-like endings on a humanist sans.
-
Geologica
Cursive and Sharpness axes beside weight and slant.
-
Shantell Sans
Bounce, Informality and Spacing axes on a marker-style handwriting font.
-
Nunito Sans
Un eje de altura de minúscula junto a peso, ancho y tamaño óptico.
-
Science Gothic
A custom contrast axis thins the horizontal strokes, beside weight, width and slant.
-
Signika
A Grade axis, from -30 to 0, slightly thins the strokes for light-on-dark text, beside weight.
-
Kumbh Sans
A parametric axis changes the thickness of the thin strokes alone, beside weight.
-
Akshar
Weight and contrast axes in a condensed sans for Latin and Devanagari.
-
AR One Sans
A resolution axis for augmented reality displays that keeps letter widths, so text does not reflow, beside weight.
-
Honk
Morph shifts the blocky letter shapes and Shadow Length extends a shadow behind them; there is no weight axis.
-
Kablammo
A Morph axis makes its doodle-covered capitals shift and dance.
-
Tilt Neon
Two axes rotate its neon-tube letters up to 45 degrees in X and Y.
Las muestras cargan un subconjunto latino básico de cada familia. Todas las familias de esta página tienen licencia abierta; su página indica las condiciones y ofrece los archivos originales.
Preguntas sobre fuentes variables con ejes poco habituales
¿Cómo uso un eje personalizado en CSS?
Escribe font-variation-settings con la etiqueta del eje entre comillas y un valor, por ejemplo "SOFT" 100. Las etiquetas personalizadas distinguen entre mayúsculas y minúsculas y se escriben en mayúsculas.
¿Se pueden animar los ejes de las fuentes variables?
Sí. Los valores de los ejes pueden hacer transiciones o animarse en CSS y controlarse con JavaScript, ya que son números continuos.
¿Para qué sirve un eje de grado?
Hace que el texto parezca más ligero o más pesado sin cambiar el ancho de las letras, así que la maqueta no se desplaza. Los diseñadores lo usan para compensar los fondos oscuros o pantallas distintas.