¿Qué tipografía, tamaño y espaciado uso para que mis placas, stories y textos web se lean sin esfuerzo?

Una tipografía difícil de leer suma esfuerzo a todo el mundo y deja afuera a quien tiene baja visión, dislexia o simplemente mira el celular en movimiento. En la web, además, hay personas que agrandan la letra desde la configuración del navegador o del teléfono: si el sitio no lo permite o se rompe, no pueden leer.

• Formas claras y abiertas. Las fuentes sin serifa suelen funcionar bien en pantalla, pero lo que más importa es que las letras se distingan. Probá escribir «Il1 O0 rn m»: si la I mayúscula, la l minúscula y el 1 se confunden, elegí otra.
• Peso medio. Las versiones muy finas (Thin, Light) desaparecen en pantallas chicas y sobre fondos con imagen.
• Decorativas, solo como adorno. Las fuentes manuscritas, góticas o de fantasía pueden ir en una palabra suelta, nunca en el dato importante ni en un párrafo.
• Dos familias como máximo por pieza. Más fuentes suman ruido.

• Grande de verdad. Como referencia, en una story de 1080 × 1920 píxeles conviene que el texto principal tenga 50 a 60 píxeles de alto o más, y el secundario no menos de 36. Si tenés que hacer zoom en el celular para leerlo, es chico.
• Pocas palabras por pantalla. Una idea por placa. Si el texto no entra grande, sobra texto.
• Interlineado generoso y sin letras apretadas.
• Mayúsculas solo para títulos cortos. Los textos largos en mayúsculas cuestan más de leer. La guía de mayúsculas y símbolos lo explica.
• Contraste suficiente con el fondo: 4,5:1 para texto normal y 3:1 para texto grande. Si hay una foto detrás, usá una franja o un fondo sólido. La guía de colores en placas tiene ejemplos.

• Tamaños en rem, no en px. Con rem, el texto respeta el tamaño de letra que la persona eligió en su navegador. Con px, el zoom sigue funcionando, pero se ignora esa preferencia.
• Que se pueda agrandar al 200 % sin que el texto se corte, se superponga ni obligue a desplazarse de costado (WCAG 1.4.4).
• Sin alturas fijas en contenedores de texto con overflow: hidden: si la letra crece, el texto queda cortado.
• Que aguante más espaciado (WCAG 1.4.12). Hay personas que usan extensiones para separar letras y líneas. La página no tiene que romperse con estos valores:

/* Prueba de espaciado: el contenido tiene que seguir completo y legible */
* {
  line-height: 1.5 !important;        /* interlineado: 1,5 veces el tamaño */
  letter-spacing: 0.12em !important;  /* entre letras: 0,12 veces */
  word-spacing: 0.16em !important;    /* entre palabras: 0,16 veces */
}
p {
  margin-bottom: 2em !important;      /* después de cada párrafo: 2 veces */
}

• Cuerpo de texto de 16 px o más como punto de partida, con líneas de 60 a 80 caracteres.

• «La fuente de la marca es fina»: usá el peso más grueso de la familia para el texto, y la versión fina solo en títulos grandes.
• Texto sobre degradé o foto: el contraste cambia en cada zona. Medilo en la parte más clara (o más oscura) del fondo.
• Fuentes «para dislexia»: algunas personas las prefieren, pero los estudios no muestran que mejoren la lectura en general. Ayuda más un buen tamaño, espaciado y frases cortas.

Revisado en noviembre de 2026 con los criterios 1.4.4 Cambio de tamaño del texto y 1.4.12 Espaciado del texto del W3C (en inglés).