Tipografía cinética: texto en movimiento que se lee

La tipografía cinética es texto que se mueve: palabras que se deslizan, cambian de escala o de peso, o aparecen al ritmo del sonido para transmitir significado, no solo para decorar. Sigue siendo legible cuando se cumplen tres reglas. Cada palabra permanece quieta el tiempo suficiente para leerse, solo se mueve una cosa a la vez y el movimiento coincide con lo que significan las palabras. Si las rompes, tienes un borrón bonito. Si las mantienes, el texto en movimiento es una de las herramientas más potentes que tienes para el vídeo social, las secuencias de títulos, los anuncios y las interfaces.

Qué es la tipografía cinética y de dónde viene

Los diseñadores de títulos de cine hacían moverse el texto mucho antes de que hubiera pantallas por todas partes. Los títulos de crédito de Saul Bass para Con la muerte en los talones (1959), de Alfred Hitchcock, hacían deslizarse los nombres por las líneas de la fachada de un edificio, y esa idea, un texto que se comporta como parte de la escena, sigue guiando el oficio. Hoy vive en vídeos de letras, explicativos, lanzamientos de producto, onboarding de apps y casi todos los vídeos sociales cortos con palabras.

Reglas para una tipografía cinética legible

Leer y seguir el movimiento compiten por la misma atención, así que una palabra que aún se mueve es una palabra que nadie ha leído todavía. Estas reglas salen de ese único límite y valen tanto si animas en un editor, en CSS o en una app de diseño.

La pausa es la parte que la gente se salta. Una regla práctica es aproximadamente un tercio de segundo por palabra, más un segundo, medido desde el momento en que la línea se ha asentado, no desde que empezó a moverse. Después, pruébalo con alguien que nunca haya visto el guion.

Haz el storyboard de las palabras antes de animar

La mayor parte de la tipografía cinética falla en el guion, no en la línea de tiempo. Divide el mensaje en tiempos, da a cada tiempo una sola idea y decide qué palabra de cada uno merece énfasis.

1. 1

   Escribe los tiempos

   Una línea por tiempo, idealmente de menos de seis palabras. Léelas en voz alta para encontrar las pausas naturales.

2. 2

   Marca el énfasis

   Elige una palabra por tiempo que sea más grande, más gruesa o más lenta. Si todo se enfatiza, nada destaca.

3. 3

   Elige un solo lenguaje de movimiento

   Subir, saltar, barrer o máquina de escribir, usado con coherencia. Animaciones de texto para redes las compara.

4. 4

   Ajusta la aceleración

   Las palabras deben frenar al llegar, para que parezcan colocadas y no soltadas. Easing explica las curvas.

5. 5

   Cronometra para el lector más lento

   Míralo a velocidad real y sin sonido. Si no puedes leer cada línea con comodidad, añade tiempo de pausa.

Animación de fuentes variables en CSS

Una fuente variable guarda en un solo archivo toda una gama de pesos, anchuras o inclinaciones, y el navegador puede moverse con suavidad por esos ejes. Eso hace barata en la web la tipografía que se transforma: una palabra puede engrosarse al pasar el cursor, o respirar despacio en un hero. La guía de MDN sobre fuentes variables enumera los ejes estándar.

/* Load a variable font with a weight range, for example Inter 100 to 900 */
.breathe {
  display: inline-block;
  min-width: 7ch; /* weight changes width: reserve the room */
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 300;
  animation: breathe 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

@keyframes breathe {
  to { font-weight: 800; }
}

@media (prefers-reduced-motion: reduce) {
  .breathe { animation: none; font-weight: 600; }
}

Respeta a quienes han pedido a su dispositivo menos movimiento. La media query prefers-reduced-motion es la forma de hacerlo; movimiento reducido explica qué conservar y qué desactivar.

Tipografía cinética para vídeo social

En redes, mucha gente ve los vídeos sin sonido, así que las palabras en movimiento llevan la historia. Mantén las líneas en el centro del encuadre, lejos de la interfaz de cada plataforma, y deja que un fondo potente haga el trabajo de marca mientras el texto se mueve. Un fondo a la deriva bajo palabras quietas o que llegan con suavidad suele ser más legible que palabras que cruzan volando un fondo estático.

Esa es la combinación para la que está hecho Gradiently. Un Mark puede moverse despacio detrás de las palabras mientras el texto usa una de cuatro animaciones, subir, saltar, barrer o máquina de escribir, y el Mark mantiene su zona más tranquila detrás de las líneas para que sigan legibles mientras todo se mueve. Con Pro, exportas el resultado como GIF, o como MP4 o WebM donde el navegador admita grabación. Para la parte del fondo, consulta publicaciones sociales animadas y, para los subtítulos, subtítulos de vídeo.