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

[Canonical HTML page](https://gradiently.design/es/guide/variable-font-animation)

El texto en movimiento atrae la atención más rápido que casi nada en una pantalla, y pierde al lector igual de rápido si se mueve demasiado. Así se conservan el movimiento y el significado.

## The short version

- La tipografía cinética es texto que se mueve, cambia o se transforma con el tiempo para transmitir significado, ritmo o énfasis.
- La tipografía cinética legible mantiene cada palabra quieta el tiempo suficiente para leerla y mueve una sola cosa a la vez.
- Las fuentes variables permiten animar el peso, la anchura o la inclinación con suavidad en la web, porque los ejes se interpolan en lugar de saltar entre archivos.
- Animar el peso cambia la anchura de una palabra, así que fija una caja o elige una fuente cuyas anchuras no varíen entre pesos.
- Los sitios web deben respetar el ajuste prefers-reduced-motion y detener o simplificar la animación del texto para quien pide menos movimiento.

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.

| Tipo | Qué se mueve | Ideal para |
| --- | --- | --- |
| Entrada | Las palabras llegan subiendo, saltando, barriendo o escribiéndose | Titulares, subtítulos, fotogramas de story |
| Rítmica | Las palabras aparecen al compás del habla o la música | Vídeos de letras, citas, locuciones |
| Transformadora | Una palabra cambia de peso, anchura, tamaño o inclinación | Énfasis, logotipos, interfaces |
| Espacial | Las palabras recorren la escena o la rodean | Secuencias de títulos, películas de marca |
| Ambiental | El texto se queda quieto mientras se mueve el fondo | Carteles, bucles, publicaciones sociales tranquilas |

Cinco familias de tipografía cinética. La mayoría de las piezas reales usan una o dos; probar las cinco en un mismo vídeo es donde muere la legibilidad.

## 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.

### Evita

- Palabras que se mueven mientras se supone que las lees
- Cada palabra animada de una forma distinta
- Letras que giran, se voltean o se desenfocan al llegar
- Cortes más rápidos de lo que se pueden leer las palabras
- Un movimiento que no tiene nada que ver con el significado

### Haz

- Entra, se asienta, se mantiene y sale
- Un solo estilo de entrada para toda la pieza
- Trayectorias cortas y sencillas: arriba, dentro, a través
- Mantén cada línea el tiempo suficiente para leerla dos veces
- Haz que el movimiento haga eco de la palabra: «lento» llega despacio

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.

| Palabras en pantalla | Pausa tras asentarse | Uso habitual |
| --- | --- | --- |
| 1 a 2 | Unos 1,5 segundos | Una palabra de impacto, una cifra |
| 3 a 5 | Unos 2 a 2,5 segundos | Un titular |
| 6 a 10 | Unos 3 a 4 segundos | Un subtítulo o una línea de cita |
| Más de 10 | Divídelo | Dos líneas, dos tiempos |

Puntos de partida, no leyes. Los espectadores que leen en un segundo idioma, o en una pantalla pequeña, necesitan más tiempo.

## 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.

Un fotograma vertical de story con la palabra Lento en tipografía grande

Primer tiempo: una sola palabra aterriza y se mantiene. El espectador la lee al instante.

El siguiente fotograma vertical con la línea completa Domingos lentos desde las nueve y una pequeña sobreetiqueta encima

Segundo tiempo: el resto de la línea se le une. La primera palabra era el gancho; este fotograma es el mensaje.

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. **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. **Elige un solo lenguaje de movimiento** Subir, saltar, barrer o máquina de escribir, usado con coherencia. [Animaciones de texto para redes](https://gradiently.design/es/guide/text-animation-ideas) las compara.
4. **Ajusta la aceleración** Las palabras deben frenar al llegar, para que parezcan colocadas y no soltadas. [Easing](https://gradiently.design/es/guide/easing) explica las curvas.
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](https://gradiently.design/es/guide/variable-fonts) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) enumera los ejes estándar.

```css
/* 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; }
}
```

Animar font-weight en una fuente variable se interpola con suavidad. El min-width evita que la línea se recoloque al ensancharse la palabra.

> **El peso cambia la anchura** En la mayoría de las fuentes, las letras más gruesas son más anchas, así que una palabra animada empuja a sus vecinas. Dale una caja fija, anima una sola palabra en su propia línea o elige una fuente diseñada con las mismas anchuras en todos los pesos.

Respeta a quienes han pedido a su dispositivo menos movimiento. La media query `prefers-reduced-motion` es la forma de hacerlo; [movimiento reducido](https://gradiently.design/es/guide/reduced-motion) 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](https://gradiently.design/es/guide/animated-social-posts) y, para los subtítulos, [subtítulos de vídeo](https://gradiently.design/es/guide/video-captions-design).

## FAQ

### ¿Qué es la tipografía cinética?

Texto que se mueve o se transforma con el tiempo, por ejemplo al deslizarse, cambiar de escala o de peso, para transmitir significado, ritmo o énfasis en vídeo, cine o interfaces.

### ¿Cómo se mantiene legible la tipografía cinética?

Deja que cada línea se asiente y se mantenga el tiempo suficiente para leerla dos veces, mueve una sola cosa a la vez y usa un único estilo de movimiento en toda la pieza.

### ¿Se pueden animar fuentes variables en CSS?

Sí. Anima font-weight, font-stretch o font-variation-settings en una fuente variable y el navegador interpola con suavidad entre valores.

### ¿Cuál es un ejemplo famoso de tipografía cinética?

Los títulos de crédito de Saul Bass para Con la muerte en los talones (1959), donde los nombres se deslizan por la cuadrícula de la fachada de un edificio, son un ejemplo temprano muy citado.

### ¿Deben las animaciones de texto respetar el ajuste de movimiento reducido?

Sí. En la web, usa la media query prefers-reduced-motion para detener o simplificar la animación del texto para quienes han pedido menos movimiento.