Variable Fonts Playground

Una fuente variable concentra todos sus pesos, anchos y estilos en un único archivo. Esa es la historia de rendimiento. La historia de diseño es lo que ocurre cuando empiezas a moverte por ese espacio.

Las fuentes variables funcionan a través de ejes: rangos numéricos continuos que controlan desde el peso hasta el tamaño óptico. Un titular puede expandirse en desktop y comprimirse en móvil sin cambiar de archivo ni provocar layout shifts. Los ejes personalizados van más lejos: Wonk, Casual, Softness son controles que no tenían equivalente en CSS antes de que existieran las fuentes variables.

El playground pone esos ejes bajo tus manos. Mueve los sliders y observa cómo responden las letras en tiempo real. Aplica los presets animados para ver cómo una sola tipografía cambia de personalidad a lo largo de su espacio de diseño. Copia el CSS con font-variation-settings listo para pegar.

Roboto Flex, Recursive, Fraunces y Bricolage Grotesque fueron elegidas porque hacen algo que una fuente estática no puede.