Una guía práctica para una tipografía legible en la web moderna

Por qué la mayoría de los sitios web son más difíciles de leer de lo que deberían

El sitio web promedio en 2026 se publica con una familia tipográfica personalizada, colores de marca cuidadosamente elegidos y un sistema de diseño que especifica el espaciado hasta el píxel. Sin embargo, el texto de cuerpo —aquello que la mayoría de los visitantes vino realmente a leer— a menudo aparece a 14px, en un gris de bajo contraste, con una tipografía optimizada para titulares, no para párrafos.

Esto no es una crítica a los diseñadores. Es un recordatorio de que la legibilidad es una disciplina distinta del diseño visual, y que ambas no siempre coinciden. Una tipografía que se ve nítida en una sección hero puede resultar agotadora en párrafos largos. Una paleta de colores que fotografía bien puede fallar las comprobaciones de contraste. Un diseño que funciona en un monitor de 27 pulgadas puede colapsar en una columna estrecha en móvil.

La buena noticia: una tipografía legible no requiere un título en tipografía. Requiere prestar atención a un puñado de variables que tienen un impacto desproporcionado.

Tamaño de fuente: más grande de lo que crees

El error de legibilidad más común en la web es un texto de cuerpo demasiado pequeño. Los diseñadores suelen establecer el texto principal en 14px o 15px porque "se ve limpio" a escala de escritorio, y luego olvidan que una parte importante de los lectores está en teléfonos, a menudo en condiciones de iluminación menos que ideales.

Una base práctica para el texto de cuerpo en 2026:

• Escritorio: 18px como mínimo, 20px preferido
• Móvil: 16px como mínimo, 18px preferido

Estas cifras parecen grandes si estás acostumbrado a tipografías más pequeñas, pero reflejan cómo lee realmente la gente en pantallas. Un texto más grande reduce la fatiga visual, mejora la comprensión y hace que tu contenido sea accesible para lectores con deterioro visual leve que no han ajustado la configuración de su navegador.

Si tu sistema de diseño exige una tipografía más pequeña, pruébala en un teléfono bajo la luz del sol. Si entrecierras los ojos, es demasiado pequeña.

Interlineado: dale espacio al texto para respirar

El interlineado (leading) es el espacio vertical entre líneas de texto. Si es demasiado estrecho, las líneas se mezclan. Si es demasiado amplio, el ojo pierde el hilo entre una línea y la siguiente.

Para texto de cuerpo, un interlineado de 1.5 a 1.7 funciona para la mayoría de las tipografías. Los titulares pueden ir más ajustados (1.1 a 1.3), pero el texto de cuerpo necesita espacio para respirar.

El CSS:

body {
  font-size: 18px;
  line-height: 1.6;
}

Esta es una de las mejoras de legibilidad más fáciles. Si tu texto de cuerpo está actualmente en line-height: 1.2 o usa un valor fijo en píxeles, cámbialo hoy.

Longitud de línea: más corta de lo que crees

La longitud de línea óptima para el texto de cuerpo es de 45 a 75 caracteres por línea, aproximadamente de 8 a 12 palabras. Las líneas de más de 90 caracteres dificultan que el ojo vuelva al inicio de la línea siguiente. Las líneas de menos de 40 caracteres crean una experiencia de lectura entrecortada y fragmentada.

La mayoría de los sitios web se equivoca al permitir que el texto ocupe todo el ancho del viewport, especialmente en escritorio. Un monitor de 1920px de ancho puede mostrar más de 150 caracteres por línea, lo que resulta agotador de leer.

La solución es un ancho máximo en tu contenedor de texto:

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

La unidad ch se usa poco, pero es perfecta para esto: escala con el tamaño de fuente y corresponde aproximadamente al ancho de un carácter.

Contraste: no es tan simple como negro sobre blanco

WCAG 2.1 especifica una relación de contraste mínima de 4.5:1 para texto de cuerpo (nivel AA) y 7:1 para accesibilidad mejorada (nivel AAA). La mayoría de los sitios web cumple esto en teoría, pero falla en la práctica porque usa texto gris claro sobre fondos blancos.

Infractores habituales:

• #666666 sobre #FFFFFF (4.54:1, apenas cumple)
• #777777 sobre #FFFFFF (4.47:1, falla)
• Cualquier tono más claro que #767676 sobre blanco (falla)

Si tu sistema de diseño especifica "text-secondary" como un gris claro, pruébalo. El verificador de contraste de WebAIM es la forma más rápida de comprobarlo.

El modo oscuro complica esto aún más. El texto blanco puro sobre negro puro crea halación (un efecto de resplandor) que es más difícil de leer que un blanco ligeramente atenuado sobre gris oscuro. Un mejor enfoque:

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Elección tipográfica: las fuentes predeterminadas son mejores de lo que crees

Las fuentes web personalizadas están por todas partes, pero tienen costes. Añaden latencia, aumentan el peso de la página y pueden bloquear el renderizado si no se cargan con cuidado. Para texto de cuerpo, las fuentes del sistema suelen ser la mejor elección.

Una pila robusta de fuentes del sistema en 2026:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Esto te da San Francisco en macOS/iOS, Segoe UI en Windows y Roboto en Android: todas tipografías muy legibles, diseñadas profesionalmente y que cargan al instante.

Si usas una fuente personalizada para el texto de cuerpo, elige una diseñada para lectura prolongada, no para display. Evita:

• Pesos ultraligeros o ultranegrita para el texto de cuerpo
• Variantes condensadas o extendidas
• Fuentes con baja altura x (la altura de las letras minúsculas)

Prueba la tipografía elegida en párrafos largos antes de comprometerte.

Tipografía responsive: escalas tipográficas fluidas

Los tamaños de fuente fijos no escalan bien entre dispositivos. Una fuente de cuerpo de 20px que resulta cómoda en escritorio puede sentirse demasiado grande en móvil.

La tipografía fluida usa clamp() para escalar el tamaño de fuente suavemente entre un mínimo y un máximo:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Esto escala de 16px en pantallas pequeñas a 20px en pantallas grandes, con una interpolación suave entre ambas. Es más sofisticado que los puntos de corte con media queries y se adapta a cualquier ancho de viewport.

Para una escala tipográfica completa (encabezados, cuerpo, texto pequeño), herramientas como Utopia generan escalas fluidas basadas en tus restricciones.

Espaciado de párrafos y alineación del texto

Dos pequeños detalles que importan:

1. Espaciado de párrafos: Añade espacio entre párrafos (margin-block-end: 1em) o usa una sangría de primera línea (text-indent: 1.5em), pero no ambas cosas. La mayoría del contenido web usa espaciado.

1. Alineación del texto: La alineación a la izquierda (o a la derecha para idiomas RTL) casi siempre es más legible que el texto justificado, que crea espacios irregulares entre palabras salvo que la separación silábica esté habilitada. El texto de cuerpo centrado es difícil de leer y debería reservarse para pasajes breves.

Probar la legibilidad en la práctica

La legibilidad no es puramente objetiva, pero puedes probarla:

• Lee tu propio contenido en tu teléfono en distintas condiciones de iluminación
• Ejecuta una auditoría de accesibilidad de Lighthouse para detectar problemas de contraste y tamaño de fuente (consulta cómo leer un informe de Lighthouse sin entrar en pánico para orientarte)
• Pide a alguien mayor de 50 años que lea una página sin ajustar su configuración
• Revisa tus analíticas para ver la tasa de rebote en páginas con mucho texto: si la gente se va rápido, la legibilidad podría ser un factor

Si tu contenido es difícil de leer, la gente no lo leerá. Es así de simple.

Cómo se ve esto en la práctica

Un estilo de texto de cuerpo legible en 2026 podría verse así:

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Esto cubre tamaño de fuente, interlineado, longitud de línea, contraste y escalado responsive en alrededor de una docena de líneas de CSS. No es emocionante, pero funciona.

Cuándo romper las reglas

Estas directrices se aplican al texto de cuerpo: los párrafos que la gente lee para informarse. Titulares, pies de foto, etiquetas de UI y textos de marketing tienen restricciones distintas y pueden flexibilizar estas reglas.

Pero si alguien llegó a tu sitio para leer un artículo, una página de documentación o una descripción de producto, la tipografía legible no es opcional. Es la expectativa de base.