Subtítulos sobre la imagen, sin franja gris

Un vídeo 9:16 es una pantalla de móvil, y en el móvil los subtítulos viven abajo. Justo ahí es donde las páginas que grabamos están más cargadas: botones, avisos de cookies, pies fijos. Así que habíamos construido un escenario: la grabación terminaba encima de una franja y las palabras iban en ella, lejos de la página.

La franja mostraba nuestro brillo de marca sobre un fondo casi negro. Hacía legible cada subtítulo, en cada web. También ponía una losa oscura bajo cada plano, y esa losa era lo primero que se veía, antes que el propio producto.

Queríamos las dos cosas: palabras siempre legibles y una imagen que perteneciera por completo a la web grabada.

El 2 de noviembre sustituimos el brillo oscuro por la imagen de la escena, desenfocada en campos suaves de color, igual que nuestras tarjetas diseñadas ya usan una página de fondo. La paleta de la web seguía así bajo el vídeo en vez de cortarse en un borde negro.

Una página clara nos enseñó el siguiente paso. Detrás del plano de reservas de una tienda de bicis, el fondo desenfocado era la cuadrícula blanca de la tienda, y unos subtítulos blancos necesitan algo más oscuro que el blanco detrás. Así que la franja recibió su propia sombra: transparente sobre la imagen y luego un tono plano de 0,55 desde el borde inferior del escenario.

Ese valor no es cuestión de gusto. Es la sombra que mantiene un texto blanco con un contraste de 4,5 a 1 sobre blanco puro, el umbral de accesibilidad habitual, y una prueba lo recalcula cada vez.

Legible todavía no era bonito. Al ver los vídeos uno junto a otro a la mañana siguiente, el encargo que nos hicimos fue breve: nada de gris detrás de los subtítulos, subtítulos perfectos. Ese mismo día llegaron dos cambios.

Primero se fue la placa redondeada de nuestros subtítulos de la casa. Las palabras van ahora sobre el propio vídeo. Solo la palabra que se está diciendo conserva su pequeño resaltado con el color de la marca, porque es el único lugar donde el color ayuda a seguir la voz.

Después se fue el escenario. La imagen ya no se detiene sobre una franja: el vídeo llena todo el encuadre y los subtítulos van encima, como en los vídeos que la gente elige ver.

Sin franja, la legibilidad tiene que venir de las letras y de un toque ligero sobre la imagen:

• palabras blancas en negrita con un contorno oscuro fino y una sombra ceñida, para que cada letra lleve su propio contraste;
• una sombra suave en la parte más baja del encuadre, un degradado y no un bloque;
• algo más de sombra detrás de un subtítulo que ha subido, nunca una losa;
• un borde más fino y más espacio entre palabras en nuestro estilo minimalista;
• un subtítulo que taparía un botón bajo de la página sube por encima, y la insignia de los vídeos gratuitos le deja sitio.

Un cambio pequeño lo hizo posible. Nuestro renderizador dibujaba siempre el mismo borde finísimo, pidiera lo que pidiera el estilo. Ahora lee el contorno y la sombra de cada estilo, y cada uno puede fijar su borde.

La misma revisión miró las tarjetas diseñadas que van entre las grabaciones. Nuestra biblioteca de plantillas incluye diseños temáticos: un telón de teatro, una gala de premios, una boda, una pantalla de juego, deporte, un capítulo de pódcast. Preciosos en el vídeo adecuado, desconcertantes en el tutorial de un taller.

Esas plantillas temáticas solo se ofrecen ahora cuando la página o el brief hablan de ese mundo. Un tutorial recibe tarjetas con aspecto de tutorial. Puedes recorrer la biblioteca en /animations.

Habíamos tratado legibilidad y estética como un trueque, y elegido la legibilidad con un bloque grande y seguro. La mejor respuesta era poner el contraste en las letras y no detrás de ellas.

Ahora una página de inicio blanca, un panel azul y una cabecera oscura conservan cada uno su imagen hasta el borde inferior del encuadre, y las palabras se leen en los tres. Así debe sentirse un vídeo vertical: la web a pantalla completa, con una voz que también puedes leer.