Tipografía para publicaciones en redes sociales: la guía práctica

Usa una sans serif limpia, un titular de entre 72 y 110 px en un lienzo de 1080 px, texto de apoyo de 40 a 48 px y nada menor de unos 32 px. Esas cifras son una recomendación nuestra, construida a partir del mínimo de 11 pt de Apple para el texto de iOS y de cómo se reduce una imagen de 1080 px en la pantalla de un móvil.

En nuestra opinión, la mayoría de las publicaciones sociales se leen deslizando el pulgar, a la distancia del brazo, en uno o dos segundos. La tipografía tiene ahí una sola misión: reconocerse al instante. Esta guía es el centro de nuestro grupo de tipografía. Te da una escala tipográfica que puedes copiar, las cuentas que la respaldan y una prueba de lo que le pasa a un titular a tamaño real de móvil.

¿Qué tamaño tienen 1080 px en un móvil?

Un iPhone 16 tiene una pantalla de 2556 por 1179 píxeles. Una publicación de 1080 px de ancho que ocupe todo el ancho de la pantalla se muestra, por tanto, con aproximadamente el mismo número de píxeles que mide la pantalla de ancho, así que puedes pensar que un píxel del lienzo equivale más o menos a un píxel del dispositivo. Las directrices de Apple, sin embargo, están escritas en puntos, no en píxeles. Dividir el ancho de 1179 px entre 3 (nuestro supuesto de trabajo para la pantalla 3x) da una pantalla de unos 393 pt de ancho. En resumen: 1 pt = 3 px del dispositivo, así que 1 px del lienzo equivale a aproximadamente 1 px del dispositivo y 2,75 px del lienzo, a aproximadamente 1 pt.

La conversión que usamos: 1080 / 393 = unos 2,75 px del lienzo por punto. Funciona cuando la publicación ocupa la pantalla de borde a borde. Los feeds añaden márgenes y algunas superficies muestran la imagen más pequeña, así que considera 2,75 como el mejor caso y añade un margen de seguridad.

Valor de iOS de Apple	Puntos	px del lienzo con 1080 de ancho (x 2,75)
Tamaño mínimo de texto	11	unos 30
Caption 1	12	unos 33
Footnote	13	unos 36
Default body	17	unos 47
Title 2	22	unos 61
Large Title	34	unos 94

Todos los valores en puntos proceden de los estilos de texto de iOS de Apple; la columna de píxeles es aritmética nuestra. Los propios consejos de diseño de Apple también citan 11 pt como el texto legible más pequeño.

¿Qué tamaños de fuente funcionan en una publicación de 1080 px?

Esta es la escala que recomendamos para lienzos de 1080 px de ancho. Es una recomendación nuestra, no una norma de plataforma. Ninguna red social publica un tamaño de fuente mínimo para las imágenes.

Función	Tamaño a 1080 px	Aproximadamente en un móvil	Peso	Interlineado
Titular	72 a 110 px (mínimo 72)	26 a 40 pt	700 a 800	1,0 a 1,15
Subtítulo	48 a 60 px	17 a 22 pt	600	1,2
Texto de apoyo	40 a 48 px	15 a 17,5 pt	400 a 500	1,3 a 1,5
Antetítulo o etiqueta (mayúsculas)	32 a 36 px	12 a 13 pt	600, espaciado amplio	1,2
Letra pequeña (nunca esencial)	32 px como mínimo	12 pt	500	1,3

Tres reglas respaldan la tabla. Todo lo que el lector deba entender se queda en 40 px o más. Todo lo que esté por debajo de 32 px es decoración, texto legal o un nombre de usuario. Mantén el titular al menos 1,5 veces mayor que el texto de apoyo: 72 px sobre 48 px es la pareja más ajustada de nuestra tabla y, con 110 px sobre 40 px, la diferencia llega a unas 2,75 veces, así que la jerarquía sobrevive a un vistazo. Para el diseño que rodea estos tamaños, consulta nuestro pilar de principios de diseño. Las cuentas detrás de los mínimos de 40 y 32 px, y cómo cambian en lienzos de 1200 y 1500 px, están en nuestra guía del tamaño mínimo de fuente en gráficos para redes sociales.

¿Qué fuentes son más fáciles de leer en tamaños pequeños?

Elige primero por legibilidad. El Nielsen Norman Group separa la legibilidad de la facilidad de lectura: la legibilidad es si las personas pueden reconocer físicamente los caracteres y depende del tamaño, el contraste y la claridad de la tipografía. Una publicación social pone a prueba la legibilidad más que casi cualquier otro medio.

Nuestras recomendaciones:

• Una sans serif de batalla con un x-height generoso (la altura de las letras minúsculas) y formas de letra abiertas. Inter, Roboto y las familias sans del sistema sirven todas.
• Tres pesos como máximo: regular para el cuerpo, seminegrita para las etiquetas, negrita para los titulares.
• Evita los pesos finos. Las directrices de Apple dicen que Ultralight, Thin y Light son difíciles de leer en tamaños pequeños.
• Reserva una serif o una fuente de exhibición para citas y titulares editoriales, y pruébala a 390 px de ancho antes de comprometerte.
• Mantén el espaciado entre letras ajustado en texto grande y abierto en versalitas. Los titulares de 90 px o más suelen pedir un espaciado ligeramente negativo, y un antetítulo de 32 px pide un poco de positivo.

Elegir fuentes es también una decisión de marca, así que deja la combinación por escrito de una vez. Nuestra guía de directrices de marca para equipos pequeños explica cómo.

¿Qué pasa cuando el titular es demasiado largo?

Aquí es donde un lienzo fijo muerde. Esta es una plantilla, generada con nuestra marca de demostración AURORA, con un titular de 92 px en un cuadro de 888 por 440 px. Primero, un titular de dos palabras.

Ahora la misma plantilla con un titular de 99 caracteres.

El motor redujo un poco el tipo (según nuestra medición: de 92 px a unos 80 px) para que cupiera en lugar de dejar que se desbordara. En Chikaboom, el diseñador fija un tamaño ideal y un mínimo (este titular empieza en 92 px con un mínimo de 56 px y admite 5 líneas); si el texto sigue sin caber en el mínimo, termina con puntos suspensivos. Nadie del equipo puede empujar el texto fuera del cuadro ni por debajo del mínimo. Ese es el argumento práctico a favor de las plantillas bloqueadas: las decisiones tipográficas las toma una sola vez quien las entiende.

¿Se sigue leyendo el titular largo a tamaño de móvil?

A continuación está la misma plantilla con el mismo texto generada de forma nativa a 393 por 393 px, cerca del ancho de la pantalla de un móvil. Es un render nuevo, no una copia reducida de la imagen de 1080, así que los saltos de línea son distintos.

Nuestra observación: el titular sigue siendo legible. Ten en cuenta que el mínimo de 56 px de esta plantilla de demostración está por debajo de nuestra propia recomendación de 72 px para titulares: equivale a unos 20 pt en una vista de móvil a ancho completo (56 / 2,75), válido para un titular largo pero un contraejemplo para uno corto. En tus propias plantillas, fija el mínimo de los titulares en 72 px o más. Las etiquetas pequeñas son los elementos más débiles: en esta plantilla quedan cerca del mínimo de 32 px que recomendamos y, a 393 px, apenas se leen, así que trátalas como decoración. Haz esta comprobación en cada plantilla que publiques: genérala a 393 px y léela a la distancia del brazo. Puedes probarlo tú mismo en la demostración en vivo.

¿Cómo se aplican las reglas WCAG al texto en imágenes?

En nuestra opinión, el contraste importa más que cualquier regla de tamaño. Las WCAG están escritas para contenido web y su criterio de contraste cubre las imágenes de texto; aplicar sus ratios a imágenes sociales es una recomendación nuestra, no un requisito de plataforma. Exige 4,5:1 para el texto normal y 3:1 para el texto grande, donde grande significa 18 pt o más, o 14 pt en negrita o más (unos 24 px y 19 px en términos de CSS). Ten en cuenta que las WCAG no fijan un tamaño de fuente mínimo, solo umbrales de contraste que dependen del tamaño, y advierten de que las imágenes de texto no escalan tan bien como el texto real. Para profundizar en los pares de colores, lee nuestra guía de contraste de color.

El espaciado es un caso distinto. El criterio 1.4.12 menciona un interlineado de 1,5 veces el tamaño de la fuente, un espaciado de párrafo de 2 veces, un espaciado entre letras de 0,12 em y un espaciado entre palabras de 0,16 em, pero pide que el contenido resista cuando los usuarios aplican esos valores, no que los diseños los usen. No puede aplicarse a un PNG aplanado, así que usa las cifras solo como referencia. Nuestras recomendaciones de interlineado en la tabla son más ajustadas para los titulares a propósito.

Como los usuarios no pueden cambiar el tamaño del texto en una imagen, pon el mensaje real también en el texto de la publicación y en el texto alternativo.

Una lista de comprobación de tipografía antes de publicar

• Titular de 72 px o más, todo lo esencial a 40 px o más, nada por debajo de 32 px.
• Una sans serif, tres pesos como máximo, sin pesos finos ni ligeros.
• Titular al menos 1,5x el texto de apoyo (72 px sobre 48 px en el caso más ajustado).
• Contraste de 4,5:1 para el texto pequeño, 3:1 para texto de 24 px (18 pt) o más según las WCAG. Recuerda que el lienzo de 1080 px se reduce, así que comprueba el tamaño real.
• Titular probado en su longitud máxima permitida y a 393 px de ancho.
• Tamaño mínimo fijado en cada campo de texto, para que el texto más largo se reduzca y termine con puntos suspensivos en lugar de desbordarse.
• Espaciado entre letras ajustado para tamaños de exhibición y abierto para versalitas.
• Texto dentro de las zonas seguras de la plataforma. Consulta la referencia completa de tamaños y la guía de zonas seguras de Stories y Reels.