Tipografía cinética: cómo hacer que el texto se mueva con intención

Uno de los encargos que más disfrutamos el año pasado fue una pieza de 30 segundos para un evento de una cooperativa de aceite. No había imágenes de rodaje aprovechables y el plazo era corto. Teníamos una locución grabada por el presidente de la cooperativa, con su acento y sus pausas, y un texto de apenas cincuenta palabras. Decidimos que las propias palabras fueran la imagen: aparecían al ritmo de su voz, «tierra» se asentaba despacio en la parte baja del encuadre, «paciencia» se escribía letra a letra, «cosecha» llegaba con un pequeño golpe de la percusión. La gente en la sala se quedó en silencio hasta el final. Nadie echó de menos un solo plano de olivos.

Eso es la tipografía cinética: texto que se mueve para decir algo más de lo que dicen las palabras. Cuando está bien hecha, el espectador lee y siente a la vez. El ritmo, el tamaño, la dirección y la velocidad de cada palabra añaden tono, énfasis y emoción, igual que la entonación en una voz.

En esta guía repasamos de dónde viene, cuáles son sus principios (sobre todo los de legibilidad, que son los que más se olvidan), qué técnicas funcionan, cómo se produce y cómo llevarla a redes sociales y a la web.

01De los títulos de crédito a las redes sociales

La tipografía en movimiento tiene una historia larga en el cine. Saul Bass convirtió los títulos de crédito en piezas de diseño con películas como Con la muerte en los talones (1959), donde los nombres se deslizaban por las líneas de una fachada de cristal. Décadas después, Kyle Cooper renovó el género con los títulos de Seven (1995), hechos de letras temblorosas y rayadas a mano que transmitían inquietud antes de que empezara la película.

Con la llegada del vídeo digital y de herramientas como After Effects, la animación de texto salió del cine y llegó a los anuncios, los vídeos explicativos, los videoclips con letra y, más tarde, a las redes sociales. Hoy es una de las formas más comunes del motion graphics: rápida de producir, muy eficaz en móvil y con un enorme margen para expresar la personalidad de una marca.

02Leer antes que impresionar: la regla de oro

La tipografía cinética tiene una tensión interna. Por un lado, el movimiento atrae y emociona. Por otro, el texto tiene que leerse, y leer requiere que las letras estén quietas el tiempo suficiente. Cuando el movimiento gana a la lectura, el espectador se pierde el mensaje y se queda con una sensación de prisa.

Clave: en tipografía cinética el movimiento sirve a la lectura; cada palabra entra, se queda quieta el tiempo justo para leerse y después se va.

Tiempos de lectura orientativos

No hay una norma universal, pero estas son las referencias con las que trabajamos en el estudio como punto de partida:

Estos tiempos cuentan desde que el texto termina de entrar hasta que empieza a salir. Las animaciones de entrada y salida van aparte, y conviene que sean breves (en torno a 8 a 15 fotogramas a 25 fps) para no robar tiempo de lectura.

Lo que ayuda a leer

• →Pocas palabras por plano. Mejor tres planos de tres palabras que uno de nueve.
• →Movimiento que termina. El texto entra con energía y se asienta; se lee cuando está quieto.
• →Un solo foco cada vez. Si dos frases se mueven a la vez, el ojo no sabe cuál leer.
• →Contraste suficiente. Sobre fondos cambiantes, una tipografía con peso, un color sólido o una caja sutil detrás.
• →Orden de lectura natural. De izquierda a derecha y de arriba abajo, salvo que se rompa con intención.

03Ritmo: sincronizar con la voz y con la música

Lo que convierte un texto animado en tipografía cinética de verdad es el ritmo. Las palabras no aparecen cuando le viene bien al diseñador, sino cuando lo pide el sonido.

Con locución

Cuando hay voz, cada palabra o grupo de palabras aparece en el momento en que se pronuncia, o un instante antes. El énfasis de la voz se traduce en énfasis visual: la palabra que el locutor subraya es la que crece, cambia de peso o de color. Por eso trabajamos con la locución ya grabada y marcamos en la línea de tiempo dónde empieza cada sílaba importante. Si la voz no está bien grabada o el ritmo es irregular, todo el trabajo de animación lo nota; lo contamos en la guía de sonido en vídeo.

Con música

Sin voz, la música marca el pulso. Las palabras pueden entrar en los tiempos fuertes del compás, los cambios de frase musical pueden coincidir con cambios de bloque de texto, y un silencio en la música es un buen momento para dejar una palabra sola en pantalla. Marcar los golpes de la música en la línea de tiempo antes de animar ahorra muchas horas.

El silencio también cuenta

Una pieza con texto entrando sin pausa cansa. Dejar respiraciones, momentos en los que la pantalla se queda con una sola palabra o incluso vacía, da peso a lo que viene después. Igual que en música, el contraste entre densidad y vacío es lo que crea emoción.

04Técnicas de animación de texto que funcionan

El repertorio es enorme, pero la mayoría de piezas se construyen con un puñado de técnicas bien combinadas.

Entradas y salidas

• →Revelado con máscara. La palabra aparece desde detrás de una línea invisible, como si saliera de una ranura. Es elegante y muy legible.
• →Letra a letra. Cada carácter aparece con un pequeño desfase. Funciona para palabras importantes, no para frases largas.
• →Escala y peso. La palabra crece o gana peso mientras entra, ideal para énfasis.
• →Espaciado (tracking). Las letras se acercan o se separan; da una sensación cinematográfica en títulos.
• →Desplazamiento cinético. Las palabras empujan a las anteriores fuera del encuadre, creando continuidad entre frases.

Composición en movimiento

El texto no tiene por qué estar siempre centrado. La tipografía cinética permite construir composiciones donde las palabras se colocan en distintos tamaños, orientaciones y posiciones, como un cartel que se arma ante los ojos del espectador. Esa composición puede rotar, la cámara puede desplazarse entre frases o el texto puede ocupar todo el encuadre. La clave está en que la jerarquía siga siendo clara en cada momento.

Tipografía variable

Las fuentes variables contienen dentro de un solo archivo un rango continuo de pesos, anchos u otros ejes de diseño. En animación permiten transiciones fluidas, por ejemplo una palabra que pasa de fina a muy gruesa mientras se pronuncia. En After Effects se animan desde las propiedades de la fuente, y en la web, como veremos, con CSS.

Movimiento con física

Los movimientos que mejor funcionan imitan la física: aceleraciones suaves, frenadas con un pequeño rebote, inercia. Los principios de animación de Disney, como la anticipación, el asentamiento o la aceleración y desaceleración, se aplican a las letras tanto como a un personaje. Una palabra que entra a velocidad constante y se detiene en seco parece mecánica; una que frena con suavidad parece viva.

05Cómo se produce una pieza de tipografía cinética

El proceso que seguimos en el estudio es corto pero ordenado, y la mayor parte del acierto está en las primeras fases.

1. 01Texto cerrado. El copy se escribe pensando en pantalla: frases cortas, palabras con fuerza, una idea por bloque.
2. 02Sonido de referencia. Locución grabada o música elegida. Sin ese ritmo, la animación se hace a ciegas.
3. 03Partitura de texto. Dividimos el texto en bloques y marcamos en la línea de tiempo dónde entra y sale cada uno, y qué palabras llevan énfasis.
4. 04Fotogramas clave de estilo. Diseñamos tres o cuatro composiciones estáticas que definen tipografía, color, jerarquía y tamaño. Se aprueban antes de animar.
5. 05Animación por bloques. Primero el ritmo general, con movimientos simples; después se pulen curvas, desfases y transiciones.
6. 06Revisión de lectura. Vemos la pieza a velocidad real con alguien que no conozca el texto. Si se pierde una frase, alargamos su tiempo o la simplificamos.
7. 07Versiones y formatos. Horizontal, vertical y cuadrada, ajustando la composición a cada uno.

Herramientas

After Effects es la herramienta principal, gracias a sus animadores de texto y selectores de rango, que permiten animar propiedades letra a letra, palabra a palabra o línea a línea con un solo control. Para texto en volumen se usa Cinema 4D o Blender. Cavalry y Jitter son alternativas más recientes para piezas ágiles, y en la web se trabaja con CSS y librerías como GSAP.

La tipografía y su licencia

La elección de la fuente define la mitad del carácter de la pieza. Las tipografías de la identidad de marca son el punto de partida natural; si quieres profundizar en cómo se elige y qué licencias implica, lo explicamos en la guía sobre cómo elegir la tipografía corporativa. En vídeo conviene comprobar que la licencia cubre el uso audiovisual y, si se va a emitir en televisión o usar en publicidad pagada, que no requiere una ampliación.

06Tipografía cinética en redes y en la web

En redes sociales

Las redes son el hábitat natural de la tipografía cinética, porque el texto transmite el mensaje aunque el vídeo se vea en silencio. Para que funcione en móvil:

• →Cuerpos de letra grandes, pensando en una pantalla de unas seis pulgadas.
• →Una idea por pantalla y frases muy cortas.
• →Zonas seguras respetadas: los botones laterales y la descripción inferior tapan parte del vídeo vertical.
• →Un primer segundo con una palabra potente que invite a quedarse.

En la web

En una web, lo ideal es animar texto real, no un vídeo con texto, para que se pueda leer, seleccionar, traducir y que los buscadores y lectores de pantalla lo entiendan. Con CSS se pueden animar fuentes variables de forma muy ligera:

.titular-cinetico {
  font-family: "Fuente Variable", sans-serif;
  font-variation-settings: "wght" 300;
  animation: ganar-peso 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes ganar-peso {
  from { font-variation-settings: "wght" 300; letter-spacing: 0.08em; opacity: 0; }
  to { font-variation-settings: "wght" 800; letter-spacing: 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .titular-cinetico { animation: none; font-variation-settings: "wght" 800; }
}

El titular entra ligero y espaciado y se asienta con peso, y quien ha pedido movimiento reducido lo ve directamente en su estado final. Animar el peso de una fuente obliga al navegador a recalcular el texto, así que conviene reservarlo para titulares concretos y no para párrafos enteros.

07Palabras con carácter

La tipografía cinética es, en el fondo, una forma de dar voz al texto. Cada marca puede encontrar su manera de mover las palabras: pausada o vibrante, geométrica o caligráfica, contenida o exuberante. Cuando esa manera sale de su identidad y se aplica con coherencia, el movimiento se convierte en parte de cómo la marca habla.

En SIMA creamos piezas de tipografía cinética dentro de nuestra producción audiovisual, desde anuncios y vídeos para redes hasta cabeceras y titulares animados para la web. Si tienes un mensaje que quieres que se lea y se sienta, escríbenos y le damos movimiento juntos.