Vamos a la conclusión: un artículo fácil de leer no es el que lleva una tipografía de moda. Es el que, apenas lo abres, te deja claro de qué trata; el que te permite retomar la lectura si te distraes a la mitad; el que no se rompe cuando agrandas el texto y el que se lee con naturalidad en cualquier idioma. Los lectores no vienen a conquistar tu artículo. Es el artículo el que tiene que hacer de guía.
Primero, el resumen en 3 líneas:
- Un buen punto de partida práctico es un texto de unos 17-18 px, un interlineado de 1,7 a 1,9 y una línea que no sea demasiado larga. No es una ley universal.
- Con WCAG 2.2 (el estándar internacional de accesibilidad web) lo importante es no romper el contraste, el zoom de texto al 200 %, el reflujo a 320 px CSS (que el contenido se reacomode al ancho de la pantalla), la sobrescritura del espaciado del texto y el uso con teclado. [R1-R8]
- Para 12 idiomas, no se trata de copiar y pegar el mismo CSS 12 veces: se trata de una base común de accesibilidad más ajustes según el sistema de escritura. [R10-R13]
1. La legibilidad no es cuestión de gusto: es un diseño de 3 capas
La legibilidad tiene al menos tres capas: que se vea el texto, que se pueda seguir lo escrito y que se pueda manejar la página. Aunque la letra sea de 18 px, es duro leer un muro de texto. Aunque el texto sea sencillo, es duro si los botones son diminutos. Por eso, "arreglar solo el tamaño de letra y listo" es como sacarle brillo a la placa de la casa mientras se quita la escalera.
2. Los lectores no leen todo desde el principio, así que hay que poder leer en 4 niveles
En la web, leer en diagonal es lo normal. Por eso conviene que el artículo se pueda leer en cuatro niveles: 5 segundos = título y arranque; 30 segundos = los títulos H2 y las negritas; 3 minutos = los puntos clave; lectura a fondo = el texto completo. Esto no significa que solo se pueda escribir poco. Significa que un texto largo debe tener muchas paradas intermedias.
Si los H2 por sí solos cuentan una historia coherente, cada apartado empieza con una pequeña conclusión y las tablas y listas permiten comparar de un vistazo, quienes leen todo y quienes solo quieren la respuesta pueden convivir en la misma página.
3. Empieza con un texto de unos 17-18 px
No existe un valor óptimo absoluto para el texto web. Pero una letra demasiado pequeña perjudica la visibilidad, y en un estudio de seguimiento ocular con páginas web reales, un tamaño de fuente mayor se asoció con fijaciones más cortas. [R14] En la práctica, conviene partir de 17-18 px y trabajar con unidades que se amplían fácilmente, como rem.
Lo importante es que "poner 18 px" no equivale a "ser accesible". El criterio de Cambio de tamaño del texto de WCAG 2.2 AA exige que el contenido y las funciones no se pierdan al ampliar hasta el 200 %. [R3] Si el menú desaparece en cuanto el lector hace zoom, esa primera pantalla bonita de 18 px es solo una foto de recuerdo.
4. El interlineado, el espacio entre párrafos y el ancho de línea reducen el "tráfico de letras"
Como valor inicial, un interlineado de 1,7 a 1,9 da aire a los artículos largos de la web. Deja también un espacio claro entre párrafos. La regla básica es un tema por párrafo; evita los bloques gigantes sin un solo salto. [R9]
Para el alfabeto latino hay estudios en los que funcionó una longitud media de unos 55 caracteres por línea, y en la práctica 55-70 caracteres es un punto de partida cómodo. [R15] El criterio AAA de Presentación visual de WCAG indica 80 caracteres o menos, y 40 o menos para CJK (chino, japonés y coreano). [R8] Aquí tampoco el 55 es una verdad universal: se ajusta según la pantalla, el idioma y el tamaño de letra.
El texto justificado (alineado a ambos lados) suele dejar huecos irregulares entre palabras. En la web, basta con alinear a un solo lado. [R8]
5. La tipografía no es una varita mágica: usa algo que se lea normal y cargue rápido
Entre serif y sans-serif no hay un ganador universal. En un experimento controlado no se vio un gran efecto de las serifas en la velocidad de lectura. [R16] Además, un metaanálisis de 2026 no encontró pruebas consistentes de que las "tipografías especiales para dislexia", como OpenDyslexic, mejoren el rendimiento lector frente a las tipografías estándar. [R17]
Es decir, atender la discapacidad no significa imponer una tipografía especial. La base es un tamaño suficiente, espacio en blanco, formas de letra naturales, buena cobertura de caracteres y que el usuario pueda ampliar. Si priorizas la fuente del sistema o una fuente común para cada idioma, te ahorras cargar enormes fuentes web.
6. Color de fondo y contraste: el gris claro tiene un "impuesto de estilo" muy alto
WCAG 2.2 AA fija un contraste de 4,5:1 para el texto normal y de 3:1 o más para el texto grande. [R2] No hace falta poner gris claro sobre blanco porque "se ve elegante" y echarle un debuff a los ojos del lector.
Varios estudios indican que el texto oscuro sobre fondo claro (polaridad positiva) favorece la corrección de textos y la lectura de letra pequeña. [R18] Por eso, para el público general, el tema claro es la opción segura por defecto. Aun así, hay quien prefiere el modo oscuro, así que conviene mantener esa opción. No hay evidencia lo bastante fuerte para afirmar que el blanco roto sea siempre más sano que el blanco puro.
7. H1, H2 y H3 no son adorno: son las señales de tráfico del artículo
H1 es el tema de la página, H2 es un argumento principal y H3 es su desglose. No finjas un título poniendo el texto en negrita; dale significado con la estructura de encabezados de HTML. Quienes usan lectores de pantalla se mueven por la página mediante los encabezados, así que estos son a la vez diseño visual y navegación. [R7][R9]
Una buena prueba es sencilla: si sacas solo los H2, ¿se entiende el hilo del artículo? Si no, lo más probable es que tus títulos sean de esos que fabrican gente perdida, como "Capítulo 2", "Continuación" o "Más detalles".
8. Negritas, viñetas, tablas y cuadros de conclusión se usan como "señales de información"
La negrita es para los términos importantes, las viñetas para datos en paralelo, la tabla para comparar y el cuadro de conclusión para el punto de aterrizaje de una decisión. Dale un papel a cada uno. Si pones todo el texto en negrita, es como encender 100 luces de advertencia a la vez: al final ninguna destaca.
No distingas los enlaces solo por el color; añade otra pista, como el subrayado. Y con la información importante, no te quedes en "es rojo, así que es peligroso": muestra el significado también con texto o iconos.
9. Parte del modo "cerebro de dopamina", pero no te creas el mito de los 8 segundos de atención
El "cerebro de dopamina" de aquí no es un término médico. Es un apodo en broma para el estado disperso de la web actual: notificación → vídeo corto → otra pestaña → volver → "¿por dónde iba?". No es una palabra para insultar de golpe a una generación ni a personas con discapacidad.
La solución no es convertir todo el artículo en un vídeo corto. Es escribir párrafos cortos, títulos concretos, una pequeña conclusión por apartado, un índice si hace falta y nombres propios que permitan reconstruir el contexto al volver. La reproducción automática, los carruseles irrelevantes y las ventanas emergentes que ocupan la pantalla en plena lectura son como lanzar una silla contra la concentración del lector, así que hay que reducirlos. [R9]
10. La accesibilidad para personas con discapacidad debe ser equipamiento estándar, no un "modo especial"
La base es apuntar a WCAG 2.2 AA. Lo típico: zoom de texto al 200 %, reflujo equivalente a 320 px CSS sin desplazamiento horizontal, contraste de 4,5:1, objetivos de puntero de al menos 24×24 px CSS o con suficiente separación, uso con teclado, foco visible y un mecanismo para saltar las partes repetidas. [R1-R7]
Los valores del Espaciado del texto ("interlineado 1,5, espacio tras párrafo 2, espaciado entre letras 0,12 em, entre palabras 0,16 em") no son una orden de poner esos valores en tu CSS inicial. El requisito AA es que, si el usuario los impone, el texto no se superponga ni desaparezca y las funciones no se rompan. [R5]
En la práctica, agrandar los botones principales a unos 44 px los hace más fáciles de pulsar, pero el mínimo de WCAG 2.2 AA es de 24×24 px CSS, con excepciones. [R6]
11. Los 12 idiomas comparten un mismo sistema de diseño, sin imponer la misma composición tipográfica
Lo que se comparte es la base: contraste, jerarquía de títulos, zoom, reflujo, espacios, facilidad de manejo, nombres accesibles. Lo que cambia según el idioma es la parte que depende del sistema de escritura: fuentes, saltos de línea, división con guiones, signos de puntuación y altura de línea. [R10-R13]
El atributo lang también importa. No redondees zh-Hans, zh-Hant ni pt-BR a zh o pt. Es una pista para el navegador, la lectura en voz alta, la separación silábica y la elección de fuente.
12. Valores iniciales prácticos por idioma
| Grupo | Cómo pensar los valores iniciales |
|---|---|
| Japonés | Empezar con 17-18 px, interlineado de alrededor de 1,8 y unos 30-40 caracteres por línea. No forzar un espaciado entre letras extra. Respetar la composición japonesa. [R10] |
| Chino simplificado y tradicional | Separar fuentes CJK y no romper las reglas de salto de línea ni la puntuación. Mantener zh-Hans y zh-Hant por separado. [R11] |
| Coreano | Usar una fuente para hangul y no meter espaciados raros. Comprobar que los saltos de línea en coreano funcionen. [R12] |
| Tailandés | No romper el moldeado correcto de los caracteres ni los saltos en límites de palabra. Una altura de línea algo mayor es más segura. No usar word-break: break-all a la ligera. [R13] |
| Vietnamita | Usar una fuente que cubra por completo los signos diacríticos y no recortar las partes superior e inferior con una altura fija. |
| en/es/pt-BR/id/fr/de | Partir de unos 55-70 caracteres por línea y considerar el lang correcto y hyphens:auto. Comprobar desbordes, sobre todo con las largas palabras compuestas del alemán. |
13. En el móvil no basta con que "se lea": tiene que "aparecer rápido"
Si cargas enormes fuentes web para los 12 idiomas, el lector se va antes de que aparezca el texto. web.dev explica que las fuentes web retrasan el FCP/LCP (la rapidez con que aparecen el primer contenido y el principal) y que el cambio de fuente puede provocar CLS (saltos en el diseño). [R19] Lo sólido es priorizar las fuentes del sistema para el cuerpo del texto y dejar las fuentes de marca solo donde hagan falta.
Los objetivos "buenos" actuales de Core Web Vitals, en el percentil 75, son LCP de 2,5 segundos o menos, INP de 200 ms o menos y CLS de 0,1 o menos. [R20] Una web en la que, mientras lees, un anuncio o una fuente hacen que el párrafo se desplome es como sujetar el libro con el dedo mientras un dependiente te mueve la mesa.
14. Los artículos que se siguen leyendo tienen siempre lo mismo en el mismo sitio
La base para que la gente vuelva no son los efectos vistosos, sino la previsibilidad. Si el aspecto de los títulos y los enlaces, el índice, el ancho del artículo, el cambio de idioma, los resultados de búsqueda y la posición de los artículos relacionados son casi siempre los mismos, el lector aprende a manejarlos.
Si ofreces un ajuste "Aa" para cambiar el tamaño de letra, el interlineado y el tema, también conviene guardar esa elección. La accesibilidad no consiste en pedir cada vez "activa el modo discapacidad", sino en que aguante bien desde el estado inicial y que solo quien lo necesite lo ajuste.
15. La "prueba de resistencia del lector" que no hay que hacer
Ejemplos típicos que conviene evitar: texto de unos 12 px, gris claro, líneas de más de 100 caracteres, texto justificado, párrafos que llenan una pantalla, saltos en la jerarquía de títulos, todo en negrita, interfaces que transmiten significado solo con color, reproducción automática, ventanas emergentes difíciles de cerrar, el texto principal convertido en imagen, un infierno de scroll horizontal al ampliar, enormes fuentes web y animaciones sin sentido.
Los lectores no vinieron a examinarse de si tienen la inteligencia y la agudeza visual para terminar tu sitio.
16. Si dudas, empieza con estos valores de referencia
| Elemento | Valor inicial práctico | Notas |
|---|---|---|
| Cuerpo del texto | 17-18 px | No es un valor absoluto. Que se pueda ampliar |
| Interlineado del cuerpo | 1,7-1,9 | Ajustar según idioma y fuente |
| Línea en alfabeto latino | Unos 55-70 caracteres | Punto de partida de estudios y práctica. Evitar las demasiado largas [R15] |
| Línea en CJK | Unos 30-40 caracteres | 40 también coincide con la pauta de Presentación visual AAA de WCAG [R8] |
| H1 | Unos 32-40 px | Diferencia clara con el cuerpo |
| H2 | Unos 25-30 px | Que los H2 solos permitan entender el hilo |
| H3 | Unos 21-24 px | Mantener la diferencia con H2 |
| Contraste del texto normal | 4,5:1 o más | WCAG 2.2 AA [R2] |
| Texto grande | 3:1 o más | WCAG 2.2 AA [R2] |
| Objetivo de puntero | Como base, 24×24 px CSS o más | Hay excepciones. En la práctica, considerar también unos 44 px [R6] |
| Zoom de texto | 200 % | No perder contenido ni funciones [R3] |
| Reflujo | 320 px CSS | En principio, sin scroll en dos direcciones [R4] |
17. Crea una puerta de calidad. "Tendremos cuidado" no es garantía de calidad
Si tienes una fábrica de artículos o un CMS (sistema de gestión de contenidos), no dejes la legibilidad solo a la memoria de las personas. Con revisiones estáticas, comprueba lang, H1, el orden de los títulos, el alt de las imágenes, los nombres accesibles y el CSS prohibido; con revisiones en un navegador real, comprueba 320 px, zoom al 200 %, sobrescritura del espaciado del texto, teclado, foco y scroll horizontal.
Lo que se pueda arreglar con seguridad puede corregirse automáticamente, por ejemplo un lang que falte o aplicar el CSS común. Pero las correcciones que cambian el significado, como el sentido del texto, las traducciones o el contenido del alt, nunca se inventan por cuenta propia. Si no se puede arreglar, se marca como FAIL y se pasa a una persona. Una puerta de calidad no es un "profesor enojado", sino un torniquete que no deja salir productos rotos.
18. Resumen: un buen artículo no examina al lector
La esencia de un artículo fácil de leer no es agrandar las letras ni decorar con espacios en blanco. Es que se sepa por dónde leer, que se pueda retomar, ampliar, pulsar y escuchar en voz alta, que sea natural en cada idioma y que sea rápido. Se trata de meter todo eso en un mismo sistema de diseño.
Resulta natural para un adulto cualquiera y no se rompe para quien se distrae con facilidad, tiene poca vista, le cuesta leer o usa teclado o tecnologías de apoyo. Eso es lo más fuerte. En vez de construir una "versión accesible" en otra habitación, basta con ensanchar la puerta de entrada desde el principio.
