Tipografía cinética: cómo el texto se convirtió en el protagonista de la web
Fuentes variables, animación ligada al scroll y tamaños escalados al viewport permiten que el texto sostenga una página que antes necesitaba fotografía. Más ligero, más rápido, más accesible — y fácil de estropear.
Written and reviewed by Artem Palamarchuk, Founder of BLEX STUDIO.
La tipografía dejó de ser el papel secundario
Durante veinte años la sección hero fue una fotografía con palabras encima. La imagen hacía el trabajo emocional; el texto lo explicaba. Esa relación se ha invertido. En una porción creciente de sitios bien hechos, la tipografía *es* la imagen —escalada al viewport, reaccionando al scroll, cambiando de peso y anchura en tiempo real— y la fotografía ha pasado a ser prueba de apoyo.
No es solo un giro estético. Es una de esas raras tendencias en las que la opción de moda es también la técnicamente superior: el texto pesa kilobytes donde la imagen pesa megabytes, lo leen lectores de pantalla y máquinas, no se pixela y se adapta a cualquier pantalla sin una cadena de recursos aparte.
Qué hace que la tipografía sea "cinética"
Fuentes variables. Un solo archivo con un rango continuo de pesos, anchuras y tamaños ópticos. Una petición sustituye a seis archivos y los ejes se pueden animar con suavidad.
Tamaño escalado al viewport. `clamp()` con unidades `vw` permite que un titular llene la pantalla a cualquier ancho sin una pila de breakpoints.
Animación ligada al scroll. Las animaciones CSS ligadas al scroll atan las transformaciones a la posición nativamente, sin un listener de JavaScript recalculando cada frame.
Contraste tipográfico como estructura. Una display grande junto a metadatos en monoespaciada da jerarquía sin un solo elemento decorativo.
¿Las fuentes variables mejoran el rendimiento?
Normalmente sí: un archivo variable sustituye de cuatro a seis pesos estáticos. La ganancia desaparece si cargas la variable *y* mantienes las estáticas.
¿El texto animado perjudica al SEO?
No, si es texto real en el HTML. Los buscadores leen el marcado, no la animación. El texto renderizado en imágenes o canvas sí es invisible.
¿Es accesible la tipografía cinética?
Puede serlo, y a menudo lo es más que el diseño cargado de imágenes al que sustituye. Innegociables: respetar `prefers-reduced-motion` y no animar nunca el texto corrido.
¿Y los navegadores antiguos?
Las fuentes variables y `clamp()` tienen buen soporte. Las animaciones ligadas al scroll son más nuevas: trátalas como mejora progresiva.
¿Cuántas tipografías debe usar un sitio?
Dos, en la práctica: una display con personalidad y una neutra para el cuerpo, más una monoespaciada para metadatos si la marca lo pide.
¿Puedo usar Google Fonts?
Sí, y alojarlas tú suele ser más rápido y evita una conexión de terceros. Descarga la variable, haz subconjunto y sírvela desde tu dominio.