Fuentes, tamaño de texto y contraste para carruseles

¿Qué tamaño de letra debe tener el texto de un carrusel?

Diseña para el móvil, no para tu monitor. Un móvil muestra una diapositiva de 1080 px con unos 360 puntos de ancho, un tercio de su anchura en píxeles (los móviles grandes la muestran algo más ancha). Así que cada tamaño que pones en la diapositiva acaba unas tres veces más pequeño en la pantalla donde la gente lo lee.

Las guías de diseño de Apple fijan el texto más pequeño en un iPhone en 11 puntos y el tamaño de lectura por defecto en 17 puntos. Multiplica por tres y tienes las cifras para una diapositiva de 1080 px: unos 33 px como mínimo para todo lo que la gente deba leer y unos 51 px para un texto del cuerpo cómodo. El verificador de PDF de LinkedIn gratuito de aiCarousels marca el texto de menos de unos 24 px como difícil de leer en el móvil: tómalo como el límite para etiquetas pequeñas, como el número de página o tu usuario, no como un tamaño para frases.

Tamaños de texto en una diapositiva de 1080 px y cómo se ven en el móvil

Tamaños de la diapositiva divididos entre tres: un móvil que muestra la diapositiva con 360 puntos de ancho. Los puntos de pantalla son la unidad de Apple, más o menos un píxel CSS cada uno; WCAG mide el texto grande en puntos de imprenta, y sus 18 pt equivalen a unos 24 de ellos. La última columna está dibujada a ese tamaño en pantalla. Tamaños de Apple: Human Interface Guidelines, Typography, y UI Design Dos and Don’ts.

¿Trabajas en un lienzo más grande? Escala igual: con 2160 px de ancho, duplica cada cifra. Una fuente fina o condensada necesita más que estos tamaños, no menos; las guías de Apple dicen que hay que ir a tamaños mayores cuando una fuente personalizada tiene un peso fino.

Los tamaños de carrusel habituales tienen todos 1080 px de ancho (1080 × 1350 para LinkedIn e Instagram 4:5, 1080 × 1440 para Instagram 3:4, 1080 × 1920 para TikTok), así que estos tamaños sirven en todas las plataformas. Los tamaños exactos de cada app están en tamaños de carrusel en cada plataforma.

¿Qué fuentes funcionan mejor en los carruseles?

La mejor fuente para un carrusel es la que nadie nota mientras lee. Unas cuantas reglas que valen en todas las plataformas:

• Con dos fuentes basta. Una para los titulares y otra para todo lo demás. Usa el tamaño y el peso para el resto de la jerarquía, no una tercera fuente.
• Deja que la fuente del titular ponga la personalidad. Una serif, una grotesca gruesa o una display condensada funcionan para unas pocas palabras grandes.
• Mantén sencilla la fuente del cuerpo. Letras abiertas, una altura de la x generosa (la altura de las minúsculas) y un peso regular sólido. La mayoría de las sans serif limpias cumplen.
• Evita los pesos finos y ligeros en tamaños pequeños. Las guías de Apple advierten que los pesos Ultralight, Thin y Light cuestan de ver, sobre todo cuando el texto es pequeño.
• Reserva las caligráficas y las mayúsculas para pocas palabras. Una fuente manuscrita o una línea en mayúsculas se lee más despacio que las minúsculas. Bien para un titular corto, agotador para un párrafo.
• Usa las mismas en todas las diapositivas, y en todos los carruseles. La gente aprende tu estilo, y un kit de marca guarda las fuentes y los colores para cada carrusel nuevo.

Combinaciones de fuentes que aguantan en el móvil

Combinaciones del generador de combinaciones de fuentes gratuito. Todas son Google Fonts, de uso comercial gratuito.

¿Cuánto contraste necesita el texto de un carrusel?

El contraste es la diferencia de luminosidad entre el texto y lo que tiene detrás, expresada como una proporción de 1:1 (ninguno) a 21:1 (negro sobre blanco). El estándar de accesibilidad de la web, WCAG 2.2, pide al menos 4,5:1 para el texto y 3:1 para el texto grande: 18 puntos, o 14 puntos en negrita. WCAG dice que lo mismo vale para las imágenes de texto, y cada diapositiva de un carrusel es una. Solo quedan exentos los logotipos y el texto incidental: palabras que son pura decoración o que forman parte de una foto por casualidad. El titular y el texto del cuerpo de una diapositiva no son ninguna de las dos cosas.

WCAG sitúa 18 puntos de imprenta en unos 24 px en pantalla, los 24 puntos de pantalla de la tabla de arriba. En una diapositiva que el móvil muestra a un tercio de su tamaño, eso son unos 72 px (o unos 56 px en negrita). Así que los titulares de ese tamaño pueden usar 3:1. Todo lo más pequeño, incluido tu texto del cuerpo, necesita 4,5:1.

Ejemplos de contraste con colores de carrusel

Proporciones calculadas con la fórmula de WCAG para estos colores exactos. El naranja muestra la solución habitual: mantén el color y cambia el texto que va encima.

• El texto sobre una foto cambia de contraste de una letra a otra. Pon las palabras sobre un panel sólido, u oscurece la foto que tienen detrás, y comprueba el punto más claro detrás del texto.
• Los colores de marca suelen fallar como color de texto. Úsalos para fondos, formas y una palabra de acento, y pon el texto en tu neutro oscuro o claro.
• Deja margen. 4,5:1 es el mínimo en una buena pantalla. La gente lee carruseles al sol, con el brillo bajado. Una proporción más alta no cuesta nada.

¿Cuánto texto debe ir en una diapositiva de carrusel?

Menos de lo que crees. Si las palabras no caben en los tamaños de arriba, la diapositiva lleva demasiado.

• Una idea por diapositiva. Un titular que dice lo importante y una o dos líneas que lo respaldan.
• Una portada corta. 12 palabras o menos es el objetivo con el que la comprobación Listo para publicar de aiCarousels mide la primera diapositiva.
• Divide, no encojas. Cuando una diapositiva parece un párrafo, conviértela en dos. La mayoría de las plataformas te dan espacio: Instagram admite hasta 20.
• Listas cortas. Pocos elementos por diapositiva, cada uno en una línea.

En aiCarousels puedes fijarlo antes de que se escriba nada: Más opciones › Palabras por diapositiva tiene Auto, Directo (las menos palabras), Equilibrado y Detallado. Mientras editas, el texto que no cabe a un tamaño legible recibe una etiqueta roja Demasiado largo para este cuadro en lugar de encogerse, y Acortar para que quepa lo recorta con tu tono. Eso es el ajuste inteligente del texto. O cambia la diapositiva a un diseño con más espacio: tus palabras se mueven con ella.

¿La negrita Unicode es mala para los lectores de pantalla?

Depende de dónde esté la negrita.

• En una diapositiva: la negrita es el peso bold de la propia fuente, dibujado en la imagen. Se ve igual para todo el que puede verla. Sin problema.
• En un pie de foto: la «negrita» que pegas desde un formateador de texto no es negrita en absoluto. Es otro conjunto de caracteres, los Mathematical Alphanumeric Symbols (de U+1D400 a U+1D7FF), pensados para las matemáticas. Unicode recomienda no usarlos en lugar del formato real. Los lectores de pantalla pueden saltárselos o leer algo como «mathematical sans-serif script t», como explica la organización benéfica Scope.

Así que limita las letras con estilo a unas pocas palabras, y nunca en un nombre, un hashtag o la frase que la gente tiene que entender. Cómo hacerlo en cada app está en negrita en LinkedIn y en el formateador de texto para Instagram.

¿Cambian las fuentes y los tamaños de texto en LinkedIn, Instagram y TikTok?

Los tamaños de arriba valen en todas partes, porque todas las diapositivas tienen 1080 px de ancho. Lo que cambia es lo que se pone encima:

• TikTok y las diapositivas 9:16: los botones de la app y el pie de foto tapan los bordes de la diapositiva. Mantén las palabras lejos de ellos. aiCarousels dibuja estas zonas cuando activas Mostrar zonas seguras.
• Instagram: el contador de diapositivas está arriba a la derecha y los puntos, debajo de la imagen. Deja margen en los bordes y escribe un texto alternativo para cada diapositiva.
• LinkedIn: el carrusel es un documento PDF. El tamaño de página, la portada y el propio PDF se explican en consejos y especificaciones de diseño para carruseles de LinkedIn.

Un ejemplo: un carrusel hecho con estas reglas

Seis diapositivas en 4:5. Titulares grandes, una línea de texto del cuerpo en cada una, oscuro sobre claro y una sola combinación de fuentes de la portada a la última diapositiva.

Cómo elegir fuentes, tamaño de texto y contraste en aiCarousels