Tipografía accesible: mejora la experiencia de lectura de tu sitio web

Las decisiones de diseño relacionadas con la tipografía, como elegir bien el tipo de letra, establecer valores apropiados para el tamaño, el color, el interlineado, el ancho de línea o el espaciado, mejoran la accesibilidad porque mejoran la legibilidad.

Además, estas decisiones contribuyen a una experiencia de lectura más cómoda y comprensible, lo que se refleja directamente en los resultados del sitio web: mayor permanencia, más interacción con el contenido y mejores tasas de conversión.

En este artículo, veremos lo que exige la normativa europea actual respecto a la composición de textos en la web y te daré algunas pautas concretas para superar los mínimos exigibles, con la explicación del porqué de cada decisión. Al final, te dejo una checklist para que puedas auditar la accesibilidad tipográfica de un sitio web. 

1. Qué es la tipografía accesible
2. Qué dice la normativa y cómo mejorarla: pautas para una tipografía accesible de verdad
3. Cómo elegir un tipo de letra accesible
4. Alineación de textos accesible
5. Checklist para auditar la accesibilidad tipográfica de tu web

Qué es la tipografía accesible

La tipografía accesible consiste en tomar decisiones de diseño que faciliten la lectura para todas las personas usuarias, incluidas aquellas con dislexia, baja visión o neurodivergencias.

El objetivo de este artículo es que las webs que diseñemos para WordPress tengan una tipografía cuidada, más allá del cumplimiento técnico, con el objetivo de mejorar la experiencia de lectura de todas las personas. Pero, sobre todo, para mejorar la conversión del sitio web. Porque un usuario que lee a gusto y se entera bien de lo que pone en una web, es más fácil que se suscriba o compre, ¿no crees?

Bien, pues ahora que te he convencido de la importancia de mejorar la experiencia de lectura, vamos a entrar en materia…

En Europa, la normativa que regula la accesibilidad digital (EN 301 549 y Directiva 2016/2102) exige cumplir con las WCAG 2.1 en nivel AA, para garantizar que el texto sea legible, adaptable y perceptible para todas las personas usuarias.

A lo largo de este artículo, vamos a ver que cumplir con las pautas técnicas de accesibilidad te garantiza el cumplimiento de la normativa, pero eso no significa necesariamente que el texto sea cómodo de leer. Para eso, tenemos que poner de nuestra parte e ir un poco más allá del cumplimiento.

Una web puede ser accesible desde el punto de vista de la normativa actual y, aun así, resultar densa, confusa o agotadora. Porque la normativa no contempla aspectos fundamentales como la calidad de la tipografía, el contexto de uso o la validación con usuarios reales.

Qué dice la normativa y cómo mejorarla: pautas para una tipografía accesible de verdad

Contraste mínimo entre texto y fondo

La normativa de accesibilidad sobre el contraste mínimo (nivel AA) exige un contraste de al menos 4.5:1 para texto normal. Para texto grande, puede reducirse a 3:1.

¿De qué tamaño es un texto grande? La normativa establece un mínimo de 24px (18pt) para considerar que un texto es grande y 18.66px (14 pt) si está en negrita. 

Para medir el contraste de un texto y saber si cumplimos con la normativa, tenemos varias herramientas:

• WebAIM Contrast Checker es una web muy fácil de usar: introduces el color del texto y del fondo (en hexadecimal) y te indica si cumplen con AA o AAA según el tamaño del texto.
• En Figma hay varios plugins gratuitos. Por ejemplo, Contrast, va bien y funciona incluso con imágenes de fondo y degradados.
• En Penpot puedes usar el plugin Contrast Checker.
• También puedes usar la extensión para navegador WCAG Contrast Checker si prefieres verificar directamente en una web en vivo.
• Y en el editor de bloques de WordPress, si el color de fondo y de texto que eliges no cumplen con el contraste mínimo, se mostrará un aviso automático de bajo contraste.

Pero la mejor herramienta para medir el contraste es preguntarle a tu usuario qué tal ve el texto. Haz pruebas siempre que puedas, porque a mí me ha pasado varias veces que la ratio de contraste era suficiente pero yo… ¡no veía nada!

Ampliación del tamaño del texto 

La normativa sobre la ampliación del texto (nivel A) no establece un tamaño mínimo de fuente específico, únicamente establece que el usuario pueda ampliarlo hasta un 200 % sin pérdida de contenido ni funcionalidad.

Esto es lógico, porque la percepción del tamaño puede ser muy diferente de unos tipos de letra a otros. No tiene nada que ver el tamaño de 24px en EB Garamond o en Montserrat. El cuerpo de EB Garamond es más reducido porque tiene una altura de la x baja y caracteres más condensados. Montserrat ocupa más espacio visual porque tiene una altura de la x generosa y sus formas son más abiertas.

Para cumplir esta norma:

• Define tamaños de letra y espaciados con medidas relativas (em o rem) en lugar de unidades absolutas (px). 
• Tampoco declares unidades relativas al viewport (vh, vw) porque son relativas al tamaño de la ventana y no tienen en cuenta la personalización del usuario en su navegador.

Si quieres que te recomiende un tamaño mínimo para los párrafos en cualquier fuente, usa al menos 16px (1rem) en dispositivos móviles y al menos 18px (1.125rem) en escritorio.

Pero ya has visto que los números en realidad no quieren decir nada, porque depende mucho del tipo de letra que elijas. 

Así que más que recomendarte unos valores mínimos, prefiero darte esta recomendación sobre el tamaño de la letra: crea una escala tipográfica fluida. Utiliza una escala modular para mantener proporciones coherentes entre niveles jerárquicos y aplica clamp() para que los títulos escalen sin saltos entre móvil y escritorio. 

Si quieres saber cómo funciona la función clamp(), puedes leer más en este artículo sobre Cómo crear una tipografía fluida con clamp().

Ajuste y redistribución del contenido

La normativa sobre ajuste y redistribución del contenido (nivel AA) dice que el contenido se tiene que adaptar hasta 320px de ancho sin pérdida de información o funcionalidad. Esto únicamente se refiere a que si hacemos más estrecha la ventana del navegador, el texto tiene que fluir y bajar de línea para que ninguna palabra sobresalga de los límites del ancho del contenedor.

Esto se puede mejorar considerablemente diseñando una composición del texto responsive o fluida, en la que los parámetros de tamaño, interlineado y espaciado se adaptan al dispositivo y a las preferencias del usuario.

Personalización del espaciado

La normativa sobre espaciado de texto (nivel AA) dice que el usuario debe poder modificar el espaciado entre letras, palabras, líneas y párrafos sin que se rompa el contenido. 

Es decir, el usuario debe poder establecer sus propios valores de line-height, letter-spacing, word-spacing y margin-bottom sin que se rompa el contenido.

Para cumplir con esta norma, evita declarar !important en todas las reglas de estilo relacionadas con texto y deja que todos los valores se puedan modificar en el navegador.

Declara el line-height sin unidad (por ejemplo, line-height: 1.5), para que el interlineado escale proporcionalmente de manera automática al cambiar el tamaño del texto, y asegúrate de que los contenedores de texto tienen espacio flexible y no cortan el contenido cuando se modifican los valores de estas propiedades de espaciado.

La normativa no recomienda unos valores concretos, ni mínimos ni máximos, para estos parámetros, solo exige que permitamos que el usuario lo pueda cambiar sin romper nada.

Pero los estudios de legibilidad y la experiencia en composición tipográfica (ojo, ¡tenemos una experiencia de casi seiscientos años desde que se inventó la imprenta!) sí establecen ciertos criterios para establecer estos valores.

El line-height (alto de línea o interlineado) siempre se declara proporcionalmente en función del tamaño de la letra y del ancho de la línea.

En los textos de párrafo, conviene usar un interlineado generoso, entre 1.4 y 1.6.

En títulos o textos grandes, es recomendable reducir el interlineado, entre 1.2 y 1.3. Al tratarse de fragmentos breves, conviene que las líneas estén más compactas para que el título funcione como una unidad visual coherente.

Ajusta el interlineado en función del ancho de línea: líneas más anchas necesitan interlineados mayores, mientras que líneas más estrechas pueden funcionar con interlineados más compactos. 

Para adaptarse a distintos dispositivos y tamaños de fuente, lo ideal es que el interlineado sea fluido usando la función clamp(), es decir, que varíe según el ancho de línea sin necesidad de usar media queries.

El letter-spacing, el espacio entre letras, se suele reducir ligeramente en los títulos, ya que la persona que ha diseñado la tipografía ha optimizado los valores de espaciado entre letras para texto de párrafo, por lo que a tamaños más grandes, ese espacio se percibe demasiado grande. Pero se suelen hacer ajustes muy sutiles, -0.03em, por ejemplo. 

En mayúsculas y en textos pequeños suele ayudar a la legibilidad aumentar a 0.03em. 

El word-spacing, el espacio entre palabras, no suele hacer falta ajustarlo.

El margin-bottom se utiliza para añadir espacio en blanco entre bloques de párrafo y establecer un ritmo vertical, que da armonía y previsibilidad a la página. Para construirlo:

• Alineación con la retícula base: todos los bloques de texto (listas, bloques de cita, tablas, etc.) deben ajustarse a múltiplos del valor definido por el interlineado del texto base.
• Agrupar elementos relacionados: los títulos deben estar más próximos al contenido que introducen que al bloque anterior.
• Evitar «falsos finales» (false bottom): la separación entre párrafos debe ser menor que la que precede a un nuevo título. Si la separación es más grande, el usuario puede tener la impresión de que el contenido ha terminado y abandonar la página por error antes de llegar al final.
• Ritmo fluido entre dispositivos: los espacios en blanco entre bloques deben ser más reducidos en móviles que en escritorio. Te recomiendo que uses clamp() también para declarar los espaciados entre bloques.

Respecto a las imágenes, no te preocupes si interrumpen el ritmo vertical: al tener una altura impredecible, es normal que lo alteren. Pero el ritmo se recupera enseguida. Es como el traqueteo del tren: al pasar por un túnel, se interrumpe un momento… y luego continúa, sin más.

Uso de texto en imágenes 

La normativa sobre imágenes de texto (nivel AA) dice que no se usen imágenes que tengan texto si se puede conseguir el mismo resultado con texto real (en HTML o SVG). Hay excepciones, como en el caso de los logotipos.

El motivo es que el texto en imágenes:

• No se puede redimensionar correctamente.
• No se adapta al modo oscuro/claro.
• No es accesible para tecnologías de asistencia (salvo si se usa texto alternativo y, aún así, es limitado).
• No puede ser personalizado por el usuario (por ejemplo, no se puede cambiar el tipo de letra, el color ni el interlineado).

Ancho de línea máximo

La normativa no impone un número máximo de caracteres por línea en el nivel AA así que, en principio, no es obligatorio optimizar el ancho de línea. 

En la normativa sobre Presentación visual (nivel AAA), se recomienda un máximo de 80 caracteres (y 40 para textos en lenguas con caracteres chinos).

Sin embargo, recordemos que la normativa dice que los textos tienen que ser legibles y comprensibles. Los estudios de legibilidad sugieren que el rango óptimo está entre 50 y 75 caracteres por línea.

La forma más eficaz de controlar el ancho de línea es usar la unidad ch (basada en el ancho del carácter «0» de la tipografía usada). Así, el ancho de los párrafos será relativo a la fuente elegida.

p {
max-width: 65ch; /* garantiza ~65 caracteres por línea */
}

Esta unidad se adapta automáticamente al tamaño y a la tipografía utilizada, mantiene la consistencia aunque la persona usuaria cambie el zoom del navegador y respeta la relación entre ancho de línea y el número de caracteres por línea, incluso en diseños fluidos. Por eso es mejor declarar el ancho máximo en ch que en rem o px.

Cuando la línea es demasiado ancha, el lector debe recorrer una gran distancia horizontal, lo que dificulta encontrar el comienzo de la línea siguiente. 

Con líneas demasiado estrechas, los saltos son demasiado frecuentes y se rompe el ritmo de lectura. 

Un número de caracteres por línea equilibrado («ni tanto ni tan calvo», como diría mi abuela) ofrece un ritmo visual estable y reduce la carga cognitiva. Para personas con dislexia o dificultades de seguimiento ocular, un ancho de línea adecuado hace que tengan menos errores de salto de renglón y tienen que releer menos veces el texto. 

Por lo tanto, mientras que en escritorio limitamos el ancho máximo, en móviles lo que hacemos es establecer unos márgenes mínimos, a ambos lados del bloque de texto, para que la línea sea lo suficientemente ancha. En este caso, el error habitual es el contrario: que la línea sea demasiado estrecha. En móviles, el ancho de línea ideal es de 40–45 caracteres por línea. 

Más allá de los aspectos de composición, elegir un tipo de letra adecuado es una de las decisiones más importantes para garantizar la accesibilidad.

Cómo elegir un tipo de letra accesible

La normativa no dice nada sobre qué tipos de letra son más accesibles. Esto tiene sentido, porque las pautas de accesibilidad se enfocan en criterios medibles y tecnológicamente neutros.

Los estudios sobre legibilidad no se basan en conceptos universales. La legibilidad de un tipo de letra siempre depende del contexto de uso.

Los estudios científicos trabajan con métricas específicas y medibles, como la velocidad de reconocimiento de palabras o la velocidad de lectura. Leer depende de muchos factores: físicos, cognitivos, tipográficos, condiciones de luz, etc.

Por lo tanto, la legibilidad de un tipo de letra es subjetiva, depende del contexto (el idioma, el dispositivo, las circunstancias, etc.), es difícil de medir objetivamente y además, es variable según la tecnología (un mismo tipo de letra se puede leer mejor en Mac que en Windows, por ejemplo).

Categorías tipográficas: contexto, legibilidad y uso recomendado

Para facilitar la elección de un tipo de letra accesible, vamos a analizar cada categoría tipográfica desde tres perspectivas: su contexto de uso, su legibilidad potencial y el uso recomendable en diseño web. 

En términos generales, las grandes categorías tipográficas son:

Sans Serif (sin serifas o de palo seco)

• Contexto: tipografías limpias, sin remates, muy usadas en interfaces digitales.
• Legibilidad: alta en pantalla y a tamaños pequeños gracias a su trazado simple.
• Uso recomendado: párrafos en web, interfaces, botones y texto funcional.
• Ejemplos: Inter, Open Sans, Roboto.

Serif (con serifas o adornos)

• Contexto: tipografías con remates en sus trazos, asociadas a la tradición editorial impresa.
• Legibilidad: en impresión, las serifas ayudan a guiar el ojo; en pantalla, especialmente en resoluciones bajas y tamaños pequeños, pueden generar ruido visual.
• Uso recomendado: títulos o textos largos en entornos de alta resolución (por ejemplo, publicaciones digitales o PDF); únicamente aconsejamos usarlas en párrafos si el tamaño y la altura de la x son generosos.
• Ejemplos: Merriweather, Georgia.
  

Slab Serif (egipcias)

• Contexto: presentan serifas gruesas y rectas que aportan fuerza visual.
• Legibilidad: correcta en tamaños grandes, pero son demasiado contundentes para párrafos largos y pueden fatigar la vista.
• Uso recomendado: títulos y subtítulos cortos donde se busque impacto visual.
• Ejemplos: Roboto Slab, Arvo.

Display

• Contexto: diseñadas para impactar, no para lectura continua.
• Legibilidad: baja en tamaños pequeños o textos extensos; suelen incluir formas experimentales atractivas pero poco funcionales.
• Uso recomendado: títulos muy breves, cabeceras o campañas gráficas. Nunca deben usarse en párrafos ni en texto funcional (botones, menús, formularios).
• Ejemplos: Lobster, Abril Fatface.

Script (manuscritas o caligráficas)

• Contexto: simulan la escritura manual con trazos fluidos o decorativos.
• Legibilidad: limitada incluso en títulos; no se recomiendan para párrafos ni para texto funcional.
• Uso recomendado: usos puntuales de identidad visual (logotipos y textos cortos).
• Ejemplos: Pacifico, Great Vibes.
  

Monoespaciadas

• Contexto: cada carácter ocupa el mismo ancho, como en las fuentes que usan los editores de código.
• Legibilidad: adecuadas para código y alineación precisa, pero poco óptimas para lectura continua, por su ritmo visual rígido.
• Uso recomendado: mostrar código, tablas de datos o diseños técnicos; no recomendables para párrafos.
• Ejemplos: Courier, Source Code Pro.

Cómo identificar si una fuente es accesible

Más allá de las peculiaridades generales propias de su categoría, una fuente accesible debe cumplir ciertos requisitos formales:

Diferenciación clara entre caracteres similares

Los caracteres problemáticos como I/l/1, O/0, p/q, b/d o a/o se tienen que poder distinguir fácilmente. El tipo de letra Atkinson Hyperlegible, por ejemplo, está diseñado para evitar estas confusiones. Por el contrario, Poppins presenta problemas de legibilidad a tamaños pequeños, por lo que no se recomienda ni para párrafos ni para texto funcional y debería reservarse únicamente para títulos grandes.

Apertura de las curvas

La apertura de las curvas influye directamente en la legibilidad. Los tipos de letra con curvas abiertas facilitan el reconocimiento de caracteres de forma rápida y cómoda, especialmente en pantallas de baja resolución o a tamaños pequeños, lo que reduce la fatiga visual.

Altura de la x generosa

La altura de la x determina el tamaño relativo de las minúsculas. Una altura de la x generosa (como la de Verdana o Archivo) mejora la legibilidad en pantalla, ya que hace que las formas de las minúsculas se perciban con más claridad y se distingan mejor entre sí. 

Además, una altura de la x generosa permite un interlineado más ajustado sin sacrificar la legibilidad, lo cual es útil en elementos de interfaz donde el espacio vertical es limitado, como botones, formularios, menús y otros componentes compactos de interfaces de usuario.

Las fuentes con altura de la x pequeña (como Garamond) pueden resultar elegantes en títulos, pero dificultan la lectura a tamaños pequeños. 

Mapa de caracteres completo

Para garantizar la accesibilidad, la tipografía debe incluir todos los caracteres necesarios para el idioma de la web: acentos, signos diacríticos (á, é, í, ó, ú, ü, ñ), símbolos comunes (º, €, ¿…), puntuación y signos especiales (comillas latinas, guiones largos, puntos suspensivos…). Cuando la fuente no contiene un carácter, el navegador lo sustituye por otra tipografía, generando un salto visual que afecta al diseño y a la experiencia de lectura.

Familia tipográfica extensa

Una familia amplia (con varios pesos y cursivas verdaderas) es esencial para marcar énfasis y jerarquías. Ayudan a guiar la atención del usuario sin tener que recurrir a recursos de contraste excesivo, como elegir colores demasiado saturados o el uso indiscriminado de mayúsculas. 

Un peso regular (400) ofrece un contraste óptimo para la lectura en pantalla. Los pesos muy finos (100 o 200) pierden visibilidad en tamaños pequeños y no deberían utilizarse en párrafos. Los pesos muy gruesos (como Black o 900) reducen las contraformas internas y generan bloques densos que cansan la vista, por lo que deben reservarse para títulos breves o llamadas de atención puntuales, en tamaños muy grandes.

Las cursivas verdaderas se redibujan con un eje más oblicuo y con trazos fluidos, y algunas letras (como la «a» o la «g») cambian de forma. 

Si la fuente carece de cursiva verdadera, el navegador inclina artificialmente los glifos, creando una falsa cursiva que es incómoda de leer y que no se distingue lo suficiente de la redonda. 

Lo mismo ocurre con las falsas negritas: si se aumenta el peso mediante CSS sin cargar el archivo de fuente correspondiente, el navegador interpreta el trazo más grueso pero no se respeta la forma de la letra, que está optimizada visualmente. Esto empeora la calidad de la lectura.

Para mantener una buena experiencia de usuario, elige familias que ofrezcan una amplia gama de pesos y que tengan cursivas verdaderas. Además, si se trata de una fuente variable, es mucho mejor para el rendimiento de la web, ya que usa un único archivo de fuente para todos los estilos.

Como hemos visto, elegir un tipo de letra accesible implica combinar la elección de una categoría adecuada con la evaluación de sus rasgos formales. 

Y recuerda: no hay categoría buena ni mala: depende del diseño, el contexto y el uso que se les dé.

Alineación de textos accesible

La forma en que presentas el texto en pantalla puede facilitar la lectura o convertirla en una experiencia frustrante, especialmente para personas con dislexia, baja visión o dificultades de atención.

¿Qué alineación es más accesible y por qué?

Alineación a la izquierda (o al inicio en idiomas RTL) 

El texto alineado a la izquierda hace que la lectura sea más cómoda y predecible. Al mantener todas las líneas ancladas en un punto fijo, el ojo encuentra fácilmente dónde comienza la siguiente línea.

Texto centrado 

El texto alineado al centro funciona bien para títulos cortos o citas con pocos caracteres, pero en párrafos largos obliga al lector a buscar constantemente dónde retomar la lectura, aumentando la fatiga visual.

Texto justificado a ambos lados

En interfaces digitales, se recomienda no justificar el texto a ambos lados. Los espacios irregulares entre palabras que se crean al forzar que todas las palabras lleguen hasta el final de la línea hacen que sea más difícil leer el texto porque se rompe el ritmo de lectura.

Esto es aún más grave en dispositivos móviles, donde los espacios entre palabras pueden llegar a ser excesivamente grandes.

Por lo tanto, lo recomendable es que se alineen los textos a la izquierda (o al inicio en lenguas RTL).

Sin embargo, el criterio que menciona la justificación de párrafos es de nivel AAA, es decir, no infringe la normativa europea.

Alineación a la derecha

Solo debe alinearse el texto a la derecha en idiomas que se leen de derecha a izquierda. Aplicarla en español o inglés rompe el patrón natural de lectura y desorienta al usuario.

La regla más sencilla y eficaz es mantener la alineación a la izquierda para todo el contenido continuo. Reserva el texto centrado para frases breves y evita siempre el texto justificado.

En resumen, diseñar una tipografía accesible no es solo cuestión de cumplir con la normativa, sino de diseñar una experiencia de lectura fluida, clara y universal.

Checklist para auditar la accesibilidad tipográfica de tu web

Como hemos visto a lo largo del artículo, el diseño tipográfico afecta directamente a la usabilidad y a la inclusión. Para evaluar la accesibilidad de la tipografía de tu sitio, revisa los siguientes puntos:

1. Contraste suficiente: asegúrate de que el contraste entre texto y fondo cumple la WCAG AA (≥ 4.5:1 para texto normal y ≥ 3:1 para texto grande). 
2. Tamaños y unidades: usa unidades relativas (em, rem) para tamaños y espaciados, declara el line-height sin unidad (1,4–1,6) y verifica que el texto pueda ampliarse hasta un 200 % sin pérdida de contenido ni funcionalidad.
3. Tipografía fluida: usa la función clamp() para tamaños de letra, interlineados y márgenes verticales, para asegurar coherencia entre dispositivos.
4. Personalización del usuario: no bloquees las hojas de estilo personalizadas ni las extensiones de accesibilidad y evita !important en estilos relacionados con texto.
5. Ancho de línea controlado: limita los párrafos a 50–75 caracteres por línea (máximo 80 caracteres según WCAG) empleando max-width: xxch y adapta esta medida para los párrafos en dispositivos móviles (40–45 CPL).
6. No uses texto en imágenes. Comprueba que ninguna de tus imágenes tiene texto informativo.
7. Tipo de letra adecuado: selecciona el tipo de letra adecuado al contexto en el que se vaya a utilizar. Una familia con caracteres claramente diferenciados, curvas abiertas, altura de x generosa, mapa de caracteres completo y amplia variedad de pesos y cursivas verdaderas. 
8. Jerarquía clara: define tamaños y pesos acordes a la estructura semántica (H1, H2, H3…), utiliza una escala modular fluida y limita el número de pesos a un máximo de tres para no sobrecargar la página.
9. Espaciado vertical coherente: respeta el ritmo vertical, agrupa elementos relacionados, evita «falsos finales» y ajusta el espaciado en función del dispositivo para mantener un ritmo de lectura fluido.
10. Alineación apropiada: alinea los párrafos a la izquierda (o al inicio del flujo), evita el texto justificado y usa el centrado solo en textos breves.
11. Pruebas con usuarios reales: siempre que sea posible, testea tu diseño con personas que tengan baja visión, dislexia u otras necesidades de accesibilidad para identificar problemas que los criterios técnicos no detectan.

Seguir esta checklist te permitirá auditar y mejorar la accesibilidad tipográfica de tu sitio web, garantizando una lectura cómoda y una experiencia de usuario inclusiva para todas las personas. ¡Y espero que también signifique más conversiones!