{"id":1049,"date":"2026-06-01T07:04:26","date_gmt":"2026-06-01T07:04:26","guid":{"rendered":"https:\/\/www.gloobs.com\/blog\/?p=1049"},"modified":"2026-06-09T15:03:07","modified_gmt":"2026-06-09T15:03:07","slug":"tipografia-cinetica-y-variable-fonts","status":"publish","type":"post","link":"https:\/\/www.gloobs.com\/blog\/tipografia-cinetica-y-variable-fonts\/","title":{"rendered":"Tipograf\u00eda cin\u00e9tica y variable fonts \u00bfc\u00f3mo dar vida a tu UI sin romperla?"},"content":{"rendered":"
\n
\n

Tipograf\u00eda cin\u00e9tica y variable fonts: c\u00f3mo dar vida a tu UI sin romperla<\/h1>\n

La tipograf\u00eda cin\u00e9tica y las variable fonts permiten que el texto se mueva, cambie de peso, se estire al hacer scroll, reaccione al hover y se adapte a cada pantalla sin perder legibilidad ni rendimiento. Bien usadas, convierten la tipograf\u00eda en una capa activa de la interfaz, no solo en contenido est\u00e1tico.<\/p>\n<\/header>\n

\n

Qu\u00e9 es la tipograf\u00eda cin\u00e9tica y qu\u00e9 aportan las variable fonts<\/h2>\n

La tipograf\u00eda cin\u00e9tica es el uso intencionado del movimiento<\/strong> aplicado al texto para reforzar ritmo, jerarqu\u00eda, atenci\u00f3n o narrativa visual. En web puede aparecer como entradas en scroll, cambios de peso, variaciones de anchura o sincronizaci\u00f3n del texto con la interacci\u00f3n.<\/p>\n

Las variable fonts, por su parte, condensan m\u00faltiples estilos dentro de un \u00fanico archivo tipogr\u00e1fico y permiten controlar ejes como peso, anchura, inclinaci\u00f3n u \u00f3ptico. Eso hace posible interpolar cambios finos desde CSS sin depender de cargar muchas variantes separadas.<\/p>\n

Si quieres una intro t\u00e9cnica y bien explicada, merece la pena echar un ojo a la gu\u00eda de Google Fonts<\/strong> \u201cIntroducing variable fonts\u201d y a la de Chrome\/Web.Dev<\/strong> \u201cIntroduction to variable fonts on the web\u201d, donde se ve claramente c\u00f3mo funcionan los ejes y qu\u00e9 soporte tienen hoy: Introducing variable fonts \u2013 Fonts Knowledge<\/a> y Introduction to variable fonts on the web<\/a>.<\/p>\n<\/section>\n

\n

Por qu\u00e9 esto importa en dise\u00f1o de interfaces<\/h2>\n

En una interfaz moderna, la tipograf\u00eda no solo comunica contenido: tambi\u00e9n puede comunicar comportamiento. Un cambio leve en el peso de una pesta\u00f1a activa, una expansi\u00f3n sutil de un titular o un ajuste del eje \u00f3ptico en mobile ayudan a reforzar jerarqu\u00eda sin llenar la UI de cajas, iconos o fondos extra.<\/p>\n

Adem\u00e1s, una variable font suele ser m\u00e1s eficiente que cargar varios archivos est\u00e1ticos si realmente necesitas distintos pesos y anchos en el sistema. No siempre pesa menos que una sola fuente, pero suele ser menor o equivalente al conjunto de m\u00faltiples cortes que cargar\u00edas por separado.<\/p>\n

Si quieres ir un paso m\u00e1s all\u00e1, el art\u00edculo \u201cVariable Fonts \u2013 practical guide\u201d de Webinale<\/strong> y tutoriales como \u201cVariable Fonts on the Web Using CSS\u201d de DigitalOcean<\/strong> ense\u00f1an patrones concretos de implementaci\u00f3n y rendimiento: Variable Fonts on the Web Using CSS<\/a>.<\/p>\n<\/section>\n

\n

Cu\u00e1ndo funciona y cu\u00e1ndo se convierte en humo<\/h2>\n

La tipograf\u00eda cin\u00e9tica funciona cuando el movimiento tiene una funci\u00f3n<\/strong>: se\u00f1alar foco, enfatizar una acci\u00f3n, marcar una transici\u00f3n de contexto o reforzar el tono de marca. Falla cuando convierte cada titular en una exhibici\u00f3n y obliga al usuario a esperar para poder leer.<\/p>\n

En producto digital, la regla sana es simple: el cuerpo del contenido debe permanecer estable y la animaci\u00f3n tipogr\u00e1fica debe reservarse para momentos cortos y estrat\u00e9gicos. Si el usuario nota antes el efecto que el mensaje, te has pasado.<\/strong><\/p>\n<\/section>\n

\n

C\u00f3mo aplicarlo paso a paso<\/h2>\n

1. Empieza por una fuente variable utilizable, no por una display extrema<\/h3>\n

Si quieres usar variable fonts en UI real, te interesa empezar con familias pensadas para lectura o interfaz, no con una experimental solo porque tenga muchos ejes raros. Sitios como v-fonts.com<\/a>,
\naxis-praxis.org<\/a> o recopilaciones como \u201cVariable Fonts on the Web\u201d de dev.to<\/strong> permiten probar ejes en vivo y ver qu\u00e9 da m\u00e1s juego en producto.<\/p>\n

2. Usa el eje de peso como primer gesto cin\u00e9tico<\/h3>\n

El eje wght<\/code> es la puerta de entrada m\u00e1s limpia. En vez de pasar un bot\u00f3n de gris a turquesa o de meterle glow, puedes hacer que el texto suba de 500 a 650 en hover o focus y as\u00ed dar feedback con m\u00e1s sutileza.<\/p>\n

\n
@font-face {\r\n  font-family: \"InterVariable\";\r\n  src: url(\"\/fonts\/InterVariable.woff2\") format(\"woff2-variations\");\r\n  font-weight: 100 900;\r\n}\r\n\r\n.button-label {\r\n  font-family: \"InterVariable\", sans-serif;\r\n  font-weight: 520;\r\n  transition: font-weight .18s ease;\r\n}\r\n\r\n.button:hover .button-label,\r\n.button:focus-visible .button-label {\r\n  font-weight: 680;\r\n}<\/code><\/pre>\n<\/div>\n
Este patr\u00f3n es especialmente \u00fatil en tabs activas, CTAs y encabezados de tarjetas, donde el texto es corto y el repaint resulta asumible.<\/p>\n
3. Introduce anchura solo si no rompes el layout<\/h3>\n
El eje wdth<\/code> permite condensar o expandir el texto, pero es mucho m\u00e1s delicado porque altera la ocupaci\u00f3n horizontal. En un hero o una palabra suelta puede quedar incre\u00edble; en una navegaci\u00f3n estrecha o un componente denso, puede romper l\u00edneas y provocar saltos.<\/p>\n
\n
.hero-title {\r\n  font-family: \"MyVariableFont\", sans-serif;\r\n  font-variation-settings: \"wght\" 720, \"wdth\" 92;\r\n  transition: font-variation-settings .35s ease;\r\n}\r\n\r\n.hero-title.is-inview {\r\n  font-variation-settings: \"wght\" 780, \"wdth\" 106;\r\n}<\/code><\/pre>\n<\/div>\n
Si lo aplicas, prueba versiones mobile reales y vigila mucho los reflows <\/strong>(un exceso de reflows causa parpadeos, animaciones lentas y un alto consumo de CPU). Un gesto peque\u00f1o suele funcionar mejor que una transformaci\u00f3n espectacular.<\/p>\n
4. Aprovecha el eje \u00f3ptico cuando la fuente lo tenga<\/h3>\n
El eje opsz<\/code> o el uso de font-optical-sizing: auto<\/code> ayuda a que la fuente responda mejor seg\u00fan el tama\u00f1o. En cuerpos peque\u00f1os mejora legibilidad, y en tama\u00f1os grandes te da un acabado m\u00e1s fino para titulares o claims.<\/p>\n
\n
.article-copy {\r\n  font-family: \"Amstelvar\", serif;\r\n  font-optical-sizing: auto;\r\n}<\/code><\/pre>\n<\/div>\n
Esto es especialmente interesante si dise\u00f1as sistemas donde una misma familia debe funcionar en 14 px, 18 px y 56 px sin perder calidad visual.<\/p>\n
5. La animaci\u00f3n debe estar ligada a un evento claro<\/h3>\n
El mejor uso de tipograf\u00eda cin\u00e9tica en producto no es el loop infinito, sino el evento puntual: entra en viewport, recibe foco, cambia de estado, se activa una pesta\u00f1a, se confirma una acci\u00f3n. As\u00ed el movimiento se siente como feedback, no como decoraci\u00f3n persistente.<\/p>\n<\/section>\n
\n
Ejemplos de p\u00e1ginas externas para inspirarte<\/h2>\n
Si quieres ver referencias visuales, una buena forma de investigar es revisar colecciones de sitios donde la tipograf\u00eda es protagonista. En Awwwards tienes, por ejemplo, la colecci\u00f3n Typography in Web Design\u00a0<\/a>y la secci\u00f3n general de Typography Websites<\/a>, con proyectos donde la composici\u00f3n tipogr\u00e1fica manda. Un buen ejemplo lo tienes en sowieso.wero-wallet.eu<\/a> .<\/p>\n
Para ver movimiento aplicado a UI y microinteracciones, puedes mirar la colecci\u00f3n UI Animation and Microinteractions\u00a0<\/a>o simplemente explorar los \u201cWinning Websites\u201d filtrando por etiquetas de animaci\u00f3n: Winning websites<\/a>.
\nAh\u00ed ver\u00e1s mucho texto que se mueve, pero tambi\u00e9n cu\u00e1ndo paran para dejar leer.<\/p>\n
En el terreno de las variable fonts espec\u00edficamente, adem\u00e1s de v-fonts y Axis-Praxis, hay piezas como el recopilatorio \u201cVariable fonts explained: ultra-flexible type you can animate\u201d en Creative Bloq, donde recomiendan recursos y ejemplos de familias que realmente soportan animaciones ricas: Variable fonts explained<\/a>.<\/p>\n<\/section>\n
\n
Ejemplo pr\u00e1ctico aplicado a una landing<\/h2>\n
Imagina una landing de una herramienta creativa. En el hero, el H1 podr\u00eda entrar con un peque\u00f1o ajuste de anchura y peso al aparecer en viewport; el CTA principal podr\u00eda aumentar el peso del texto al hacer hover; y las tabs de funcionalidades podr\u00edan marcar el estado activo con una transici\u00f3n tipogr\u00e1fica en vez de una pastilla recargada de color.<\/p>\n
En mobile, esa misma l\u00f3gica deber\u00eda simplificarse: mantener el H1 est\u00e1tico o con una sola transici\u00f3n breve, evitar cambios de anchura agresivos y dejar la mayor parte del sistema estable. La gracia no est\u00e1 en animarlo todo, sino en elegir dos o tres momentos memorables.<\/p>\n<\/section>\n
\n
Rendimiento, accesibilidad y compatibilidad<\/h2>\n
El soporte de variable fonts es amplio en navegadores modernos, pero conviene revisar sistema operativo, navegador y tipo de fuente, especialmente si trabajas con familias menos comunes o ejes personalizados. MDN tiene una referencia muy clara de la propiedad
\nfont-variation-settings<\/code><\/a>
\ny de c\u00f3mo se combinan los distintos ejes en CSS.<\/p>\n
A nivel de rendimiento, animar peso o anchura puede implicar m\u00e1s repintado que una simple transformaci\u00f3n con transform<\/code> u opacity<\/code>. Por eso tiene m\u00e1s sentido reservarlo para titulares, labels o palabras sueltas, y no para p\u00e1rrafos largos ni animaciones constantes en grandes bloques de texto.<\/p>\n
En accesibilidad, la prioridad sigue siendo la misma: el texto debe poder leerse sin depender de la animaci\u00f3n. Adem\u00e1s, conviene respetar la preferencia de \u201creducir movimiento\u201d del sistema operativo y ofrecer una versi\u00f3n est\u00e1tica para usuarios sensibles al movimiento.<\/p>\n<\/section>\n
\n
Preguntas frecuentes<\/h2>\n
\u00bfTiene sentido usar tipograf\u00eda cin\u00e9tica en cualquier web?<\/h3>\n
No. Encaja mejor en landings, portfolios, editoriales, marcas creativas o productos que quieran trabajar mucho la identidad visual. En dashboards densos o contextos muy utilitarios, suele bastar con peque\u00f1os cambios de peso o estado sin necesidad de animaciones llamativas.<\/p>\n
\u00bfConviene usar siempre font-variation-settings?<\/h3>\n
No necesariamente. Cuando el eje puede controlarse con propiedades m\u00e1s est\u00e1ndar como font-weight<\/code> o font-stretch<\/code>, suele ser m\u00e1s limpio hacerlo as\u00ed. font-variation-settings<\/code> es \u00fatil cuando necesitas control de bajo nivel sobre ejes concretos o valores intermedios muy espec\u00edficos.<\/p>\n
\u00bfQu\u00e9 tipo de fuentes variables son m\u00e1s \u00fatiles para UI real?<\/h3>\n
Las que combinan buena legibilidad, rango de pesos consistente y comportamiento estable en tama\u00f1os peque\u00f1os y medianos. Es mejor priorizar familias pensadas para producto o lectura continua que una fuente ultra display que solo funciona en un hero puntual.<\/p>\n
\u00bfCu\u00e1l ser\u00eda una regla r\u00e1pida para no pasarme?<\/h3>\n
Si dudas, anima solo texto corto y liga el movimiento a una acci\u00f3n o transici\u00f3n concreta. Si el efecto sigue siendo interesante cuando lo reduces a la mitad, probablemente vas por buen camino.<\/p>\n<\/section>\n