a11y tips #7: tipografía accesible

La tipografía es una parte esencial de la accesibilidad digital. A menudo se piensa en ella como una decisión estética, vinculada a la identidad visual de un sitio web, pero afecta directamente a la lectura (percepción), la comprensión y la interacción con los contenidos.

Una fuente poco legible, un tamaño demasiado pequeño, un contraste insuficiente, un ancho de línea excesivamente largo o un espaciado rígido pueden convertir un texto, incluso aparentemente estético y correcto, en una barrera. Esto afecta especialmente a personas con baja visión, dislexia, dificultades cognitivas, daltonismo, fatiga visual o personas que leen desde pantallas pequeñas, con zum o en condiciones de iluminación desfavorables.

El objetivo no consiste en escoger una única fuente “perfecta”, sino en tomar decisiones que faciliten la lectura y permitan que cada persona ajuste el contenido a sus necesidades.

Qué entendemos por tipografía accesible

Al hablar de tipografía accesible nos referimos al conjunto de decisiones de diseño y desarrollo que permiten que el texto sea fácil de percibir, leer y comprender en diferentes contextos, dispositivos y condiciones de uso para la mayor cantidad posible de usuarios.

Esto abarca múltiples aspectos como:

• La selección de la familia tipográfica.
• El tamaño del texto.
• El grosor y el contraste.
• La altura de línea.
• La separación entre párrafos.
• El espaciado entre letras y palabras.
• La longitud de las líneas.
• La alineación del texto.
• El uso de mayúsculas, cursivas, subrayados y negritas.
• La capacidad del texto para ampliarse, reordenarse y adaptarse sin perder información.
• Entre otras.

Una fuente accesible debe permitir distinguir con claridad caracteres de estructura similar, como la letra «l» minúscula, la «I» mayúscula y el número «1», o la letra «O» y el número «0». También conviene comprobar otros pares potencialmente confusos, como «b» y «d», «p» y «q», «6» y «9», «n» y «u», o la secuencia «rn» frente a la letra «m». Algunas tipografías construyen estos caracteres mediante formas prácticamente idénticas, reflejadas o giradas, lo que puede favorecer errores de identificación, especialmente en personas con dislexia u otras dificultades lectoras.

Para reducir estas confusiones, son preferibles las fuentes que introducen diferencias estructurales reconocibles, como un remate en el número «1», una cola en la «l», variaciones de altura, cambios en el grosor del trazo o contraformas de distinta anchura. Estas diferencias también pueden ayudar a evitar transposiciones, por ejemplo, entre palabras como «pato» y «apto». Además, la tipografía debe conservar una buena legibilidad en los tamaños habituales de lectura, en pantallas pequeñas y cuando el usuario amplía el zum, sin que los caracteres pierdan definición ni aumente la ambigüedad entre sus formas.

Otro aspecto que influye en la legibilidad es la forma de las contraformas, es decir, los espacios blancos interiores, total o parcialmente delimitados, de letras como «c», «o» y «e». Cuando estos espacios son amplios y las aperturas de letras como «c» y «e» son claramente visibles, aumenta la diferenciación entre caracteres de estructura similar. Por el contrario, unas contraformas estrechas o unas aperturas demasiado cerradas pueden perder definición en tamaños pequeños, con poco contraste o durante la ampliación del contenido.

Sin embargo, la accesibilidad tipográfica no depende solo de la fuente. Una buena fuente puede resultar inaccesible si se utiliza con poco contraste, en un tamaño demasiado pequeño o dentro de una línea demasiado extensa.

Cuándo utilizar cada decisión tipográfica

Utiliza una fuente sencilla y legible cuando:

• El texto forma parte del contenido principal.
• La lectura debe ser continuada.
• El contenido se consulta en pantalla.
• El sitio debe funcionar correctamente en diferentes dispositivos y navegadores.
• El público destinatario es amplio y heterogéneo.

Puedes utilizar, con prudencia, una fuente con más «personalidad visual» cuando:

• Se aplica a títulos breves.
• No compromete la identificación de los caracteres.
• Existe suficiente contraste y tamaño.
• No se utiliza para bloques largos de lectura.
• La identidad gráfica lo requiere, pero sin sacrificar la comprensión.

Utiliza negritas cuando:

• Sea necesario destacar una palabra o fragmento.
• El énfasis ayude a escanear el contenido.
• No se sustituya por el color como único indicador.

Utiliza cursiva con moderación cuando:

• Se trate de convenciones editoriales, como títulos de obras o extranjerismos.
• El texto sea breve.
• La fuente conserve una buena legibilidad en cursiva.

Evita utilizar texto en mayúsculas sostenidas para párrafos o frases largas. Puede dificultar el reconocimiento de las formas de las palabras y ralentizar la lectura. Las mayúsculas pueden reservarse para etiquetas breves, siglas o elementos muy concretos.

Evita utilizar texto como imagen siempre que sea posible. El texto real puede ampliarse, copiarse, traducirse, seleccionarse, adaptarse mediante hojas de estilo del usuario y ser interpretado por las ayudas técnicas.

Consideraciones de diseño

• Prioriza la legibilidad por encima de la decoración.
• Utiliza pocas familias tipográficas. Una combinación excesiva puede dificultar la lectura y romper la consistencia visual.
• Escoge fuentes con caracteres claramente diferenciables.
• Evita fuentes manuscritas, ornamentales, excesivamente condensadas o con formas ambiguas para textos funcionales o de lectura continuada.
• Usa un tamaño base suficiente para el texto del cuerpo.
• Define los tamaños con unidades relativas como rem o em.
• Mantén una altura de línea cómoda.
• Evita líneas demasiado largas.
• Alinea los párrafos largos a la izquierda.
• Evita justificar texto en pantalla, ya que puede generar espacios irregulares (ríos) entre palabras.
• No utilices el color como único recurso para transmitir significado.
• Comprueba el contraste entre texto y fondo.
• Evita colocar texto directamente sobre imágenes complejas.
• Si se utiliza texto sobre imagen, añade una capa de fondo, degradado o bloque sólido que garantice el contraste.
• Mantén visibles y diferenciables los enlaces y otros elementos interactivos.
• No elimines el subrayado de los enlaces si no existe otra señal visual clara y consistente.
• Asegura que el texto pueda ampliarse sin solaparse, recortarse o desaparecer.
• Evita fijar alturas cerradas en componentes que contienen texto.
• Comprueba que la interfaz funciona con zum, aumento del tamaño de texto y pantallas pequeñas.
• No bloquees los ajustes de espaciado que puedan aplicar los usuarios mediante sus propias herramientas.

Requisitos de accesibilidad de la tipografía

• El texto debe presentarse como texto real siempre que sea posible, no como imagen.
• La familia tipográfica debe permitir distinguir con claridad los caracteres.
• El tamaño del texto debe facilitar la lectura en pantalla.
• Las unidades relativas son preferibles para permitir escalado y adaptación.
• El contraste entre texto y fondo debe ser suficiente.
• El texto debe poder ampliarse hasta el 200 % sin pérdida de contenido o funcionalidad.
• El contenido debe poder redistribuirse en pantallas estrechas o con zum sin exigir desplazamiento horizontal en la mayoría de los casos.
• El diseño debe soportar ajustes personalizados de espaciado.
• La información no debe depender únicamente del color, el grosor, la forma o la posición.
• Los enlaces deben ser reconocibles como enlaces.
• El foco de teclado debe ser visible y no quedar oculto por el tamaño o el espaciado del texto.
• Las líneas de texto deben tener una longitud razonable.
• El interlineado debe facilitar la lectura.
• Los bloques de texto deben organizarse mediante encabezados, párrafos, listas y otros elementos semánticos.
• Las mayúsculas, cursivas y negritas deben utilizarse con moderación.
• Las fuentes externas deben cargarse de forma que no impidan acceder al contenido.
• Debe definirse una pila tipográfica de reserva.

Tamaño, espaciado y longitud de línea

El tamaño del texto debe permitir una lectura cómoda. Como punto de partida, un tamaño base próximo a 1rem, equivalente normalmente a 16px en la configuración predeterminada del navegador, suele ser adecuado para el cuerpo del texto.

html {
font-size: 100%;
}

body {
font-size: 1rem;
}

En el ejemplo anterior, por defecto, la mayoría de navegadores usan 16px como tamaño base. Por tanto html {font-size: 100 %;} equivale normalmente a 16px, pero con una diferencia importante. Si se define de esta manera, y una persona ha configurado el navegador para que el texto base sea mayor, por ejemplo 20px, entonces el valor 100% respetará esa preferencia.

No conviene reducir el tamaño base del documento para conseguir una apariencia más compacta. Si el contenido necesita jerarquía visual, es preferible trabajar con márgenes, escala tipográfica y estructura, no con texto demasiado pequeño.

La altura de línea también es importante. Una línea demasiado compacta dificulta seguir el texto, mientras que una demasiado abierta puede romper la continuidad de la lectura. El valor line-height: 1.5; es el recomendado.

Para párrafos largos, la longitud de línea debe mantenerse dentro de un rango razonable. Las líneas excesivamente largas dificultan localizar el inicio de la siguiente línea; las demasiado cortas interrumpen constantemente el ritmo de lectura. Más allá de ajustar el tamaño de los contenedores de los diferentes bloques de texto, también es posible limitar su ancho a un número máximo de caracteres. El intervalo recomendado se sitúa entre 60 y 75 caracteres. Por ejemplo, max-width: 70ch;

La unidad ch permite establecer una anchura aproximada basada en la medida de los caracteres de la fuente. No debe entenderse como una regla exacta, pero puede ser útil para evitar columnas de texto excesivamente anchas.

El espaciado entre párrafos también ayuda a separar ideas y facilita el escaneo visual del contenido. Por ejemplo, con

p {
margin-block: 0 1em;
}

Es posible eliminar el margen superior del párrafo, mientras se añade uno de 1em inferior, equivalente al tamaño de letra del propio párrafo. Por ejemplo, si el párrafo tiene font-size: 16px; entonces 1em serán 16px. Si tiene font-size: 20px, 1em serán 20px.

Los criterios WCAG no obligan a usar siempre unos valores concretos de espaciado por defecto, pero sí exigen que el contenido no se rompa si el usuario aplica determinados ajustes de línea, párrafo, palabra o letra.

Requisitos de accesibilidad del contraste y el color

El contraste es uno de los aspectos más importantes de la tipografía accesible. Una fuente legible puede ser difícil de leer si el color del texto no se diferencia suficientemente del fondo.

Como referencia general:

• El texto normal debe alcanzar un contraste mínimo de 4.5:1 respecto al fondo.
• El texto grande puede alcanzar un contraste mínimo de 3:1. Como norma general, se entiende por texto grande uno de 18 pt o más, si no está en negrita o 14 pt o más, si está en negrita En CSS, eso suele equivaler aproximadamente a 24 px y 18.66 px, respectivamente.
• El texto que aparece sobre imágenes, degradados o vídeos debe comprobarse en la zona de menor contraste.
• El color no debe ser el único medio para transmitir información.
• Evita combinaciones de bajo contraste como gris claro sobre blanco, texto fino sobre fondos luminosos o colores similares entre primer plano y fondo.

Requisitos de accesibilidad para las tipografías importadas

Las fuentes importadas de servicios como Google Fonts, pueden mejorar la identidad visual de un sitio web, pero también introducen problemas de rendimiento (velocidad de carga), disponibilidad y sustitución tipográfica.

Como medidas de contingencia:

• Define siempre fuentes de reserva.
• Evita depender de una única fuente personalizada.
• Utiliza font-display: swap cuando sea posible para que el texto se muestre mientras la fuente termina de cargar.
• No cargues más pesos y estilos de los necesarios.
• Comprueba que la fuente mantiene buena legibilidad en negrita, cursiva y tamaños pequeños.
• Evita fuentes que generen caracteres muy parecidos entre sí.
• Comprueba el resultado si la fuente personalizada no se carga.

Tipografías para perfiles específicos

Para personas con baja visión o dislexia suelen funcionar mejor las fuentes sencillas, abiertas y bien espaciadas, especialmente las sans serif, porque reducen la ambigüedad entre caracteres y evitan formas decorativas que dificultan la lectura. Entre las opciones habituales se citan Arial, Verdana, Tahoma, Helvetica, Calibri u Open Sans; para baja visión también destaca Atkinson Hyperlegible, diseñada específicamente para diferenciar mejor letras y números similares. En el caso de la dislexia, no existe una fuente universalmente válida. Algunas guías recomiendan tipografías sans serif comunes y otras fuentes específicas, pero tan importante como la familia tipográfica es mantener buen tamaño, contraste, interlineado, alineación a la izquierda y evitar cursivas, subrayados y mayúsculas sostenidas.

Criterios de conformidad WCAG relacionados

• 1.3.1: Información y relaciones (nivel A).
• 1.4.1: Uso del color (nivel A).
• 1.4.3: Contraste mínimo (nivel AA).
• 1.4.4: Cambio de tamaño del texto (nivel AA).
• 1.4.5: Imágenes de texto (nivel AA).
• 1.4.10: Reflujo (nivel AA).
• 1.4.11: Contraste no textual (nivel AA).
• 1.4.12: Espaciado del texto (nivel AA).
• 1.4.13: Contenido con hover o foco (nivel AA).
• 2.4.4: Propósito de los enlaces en contexto (nivel A).
• 2.4.7: Foco visible (nivel AA).
• 2.4.11: Foco no oculto –mínimo– (nivel AA).

Referencias

Mace, Di (2023). What is an accessible font?. https://www.accessibilitychecking.com/blog/fonts-accessibility

Section508.gov (2026). Understanding accessible fonts and typography for Section 508 Compliance. https://www.section508.gov/develop/fonts-typography

Zaraysky, Susanna (2026). Introducing accessibility in typography. https://fonts.google.com/knowledge/readability_and_accessibility/introducing_accessibility_in_typography

W3C (2026). Understanding SC 1.4.3: Contrast Minimum. https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html

W3C (2026). Understanding SC 1.4.4: Resize Text. https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html

W3C (2026). Understanding SC 1.4.10: Reflow. https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

W3C (2026). Understanding SC 1.4.12: Text Spacing. https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html