Tipografía accesible en la web: fuentes, tamaños y legibilidad que sí importan
Guía práctica para elegir fuentes accesibles, aplicar los criterios WCAG y evitar los errores de legibilidad más habituales en webs WordPress.
Meetup WordPress Bilbao · 16 de marzo de 2026
Cuando hablamos de accesibilidad web, solemos pensar en el contraste de colores o en el atributo alt de las imágenes. Pero la tipografía tiene un peso enorme en la experiencia de lectura, y hay muchas decisiones de diseño que, tomadas sin la información suficiente, dificultan la lectura a personas con visión reducida, dislexia o simplemente una pantalla pequeña.
En esta charla para el Meetup de WordPress de Bilbao repasamos las preguntas que más nos cuestan al elegir tipografías para la web: cómo seleccionarlas, cuántas usar, qué tamaños y unidades conviene aplicar, y qué errores habituales destrozan la legibilidad sin que nos demos cuenta.
¿Cómo elegir una fuente accesible?
Elegir una tipografía para una web no es solo una cuestión estética. Hay tres criterios que conviene evaluar juntos: el estilo y tono de comunicación, el contexto de uso y la legibilidad técnica.
El tono importa porque una fuente transmite una personalidad antes de que nadie lea una palabra. Una Garamond evoca seriedad y elegancia; una tipografía script informal sugiere cercanía y desenfado. Si tu cliente tiene una clínica dental de alta gama, una fuente excesivamente informal puede estar minando su credibilidad sin que sepamos exactamente por qué.
El contexto de uso también cuenta: no es lo mismo un titular de portada que un bloque de texto largo. Y la legibilidad técnica tiene que ver con características como la altura de la x, la apertura de los caracteres ambiguos (como la «l» minúscula y el «1») y el grosor de los trazos. Una fuente que parece perfecta en una muestra a 3rem puede volverse ilegible a 1rem.
¿Cuántas tipografías puedo usar?
La respuesta rápida es: menos de las que crees. En la mayoría de proyectos web funciona bien combinar dos familias tipográficas: una para los titulares y otra para el cuerpo de texto. Más de dos se convierte fácilmente en ruido visual.
Lo que sí puede variar son los pesos y estilos dentro de esas familias. Un sistema tipográfico bien construido usa la jerarquía de pesos (regular, medium, bold) para crear contraste sin necesitar más fuentes. En WordPress, los bloques de Heading y Paragraph se pueden configurar desde el editor para respetar esa jerarquía de forma consistente en todo el sitio.
Color y contraste
El criterio 1.4.3 de WCAG 2.2 establece una ratio de contraste mínimo de 4,5:1 para texto normal (nivel AA) y de 3:1 para texto de gran tamaño. Estos números no son arbitrarios: están pensados para que personas con visión reducida puedan leer sin esfuerzo adicional.
El color picker del propio editor de bloques de WordPress ya muestra una advertencia cuando el contraste resulta insuficiente. Si usas un tema como Kadence, los tokens de color del sistema de diseño te ayudan a mantener coherencia y contraste a la vez, sin tener que comprobarlo manualmente en cada elemento.
Cumplir la ratio es el mínimo técnico. En situaciones reales, como un móvil al sol o un monitor con poco contraste, un gris que pasa por poco el umbral puede seguir resultando incómodo. El peso también influye: una tipografía muy fina sobre fondo claro parece más débil de lo que sugiere su ratio, así que no diseñaría texto de lectura con pesos extremadamente ligeros aunque el color «dé» en el comprobador.
¿Cuál es el tamaño mínimo recomendado?
Aquí viene uno de los conceptos que más sorprende: el criterio 1.4.4 de WCAG 2.2 (nivel AA) no establece un tamaño mínimo de fuente fijo. Lo que establece es que el usuario debe poder ampliar el texto hasta el 200% sin pérdida de contenido ni funcionalidad.
Eso cambia el enfoque. La pregunta real no es «¿qué tamaño pongo?» sino «¿mi diseño se rompe cuando alguien amplía el zoom del navegador?». Y la respuesta depende casi siempre de cómo has definido los tamaños en el CSS.
Em y rem: las unidades que no puedes ignorar
Los tamaños en em y rem son las unidades que conviene usar para tipografía web, y no es solo una preferencia de estilo. Si defines el tamaño de fuente en px, estás ignorando la preferencia de tamaño de texto del sistema operativo o navegador del usuario. Con rem, en cambio, respetas ese ajuste.
La diferencia práctica: si alguien ha configurado su navegador para ver el texto más grande porque tiene dificultades de visión, un font-size: 1rem lo respetará. Un font-size: 16px lo ignorará. En Kadence y en los temas de bloques modernos de WordPress puedes definir los tamaños tipográficos usando el sistema de tokens del archivo theme.json, donde se configuran una vez y se aplican de forma consistente en todo el sitio.
Si usas clamp() para crear tamaños fluidos, combina siempre una componente relativa como rem con la parte fluida, por ejemplo clamp(2.25rem, 1.6rem + 3vw, 4.5rem). Un tamaño basado únicamente en el viewport puede responder muy bien al ancho de la pantalla y muy mal al zoom o al tamaño de texto que ha elegido el usuario.
Interlineado y ritmo vertical
El interlineado (o line-height) es una de las variables tipográficas que más afecta a la legibilidad, y también una de las más ignoradas. El criterio 1.4.12 de WCAG 2.2 (nivel AA) establece que el usuario debe poder modificar el espaciado entre letras, palabras y líneas sin que el contenido se rompa.
Esto tiene una implicación técnica importante: conviene evitar !important en los estilos relacionados con el texto y no bloquear las hojas de estilo personalizadas ni las extensiones de accesibilidad. Parece un detalle técnico, pero afecta directamente a las personas que dependen de esas herramientas para leer la web.
El criterio 1.4.12 (Text Spacing) concreta esos valores: interlineado de al menos 1.5 veces el tamaño de fuente, espacio posterior al párrafo de 2 veces, letter-spacing de 0.12 y word-spacing de 0.16. La norma no obliga a que tu diseño use siempre esos valores; obliga a que los tolere. Un botón con height: 40px, una tarjeta con altura fija o un titular con overflow: hidden pueden cortar el texto cuando alguien aumenta el espaciado. Diseñar con alturas flexibles suele ser una mejora de accesibilidad mucho más importante que obsesionarse con una décima de line-height.
El ritmo vertical es la coherencia visual que se consigue cuando los espacios entre elementos siguen una lógica proporcional. Un ritmo bien construido hace que el ojo viaje por la página de forma más natural y reduce la fatiga de lectura, aunque muchas veces no seamos conscientes de por qué un diseño «se siente bien» y otro cansa.
Ajuste y redistribución del contenido
El criterio 1.4.10 de WCAG 2.2 (Reflow, nivel AA) establece que el contenido debe adaptarse a un ancho de 320px sin pérdida de información ni funcionalidad. Eso equivale a un móvil antiguo con zoom al 400%, y es el escenario de referencia para saber si tu diseño es verdaderamente flexible.
En la práctica, esto significa huir de los anchos fijos en píxeles y usar unidades relativas también para los contenedores. Un max-width: 75rem con un padding lateral de 1rem aguanta mucho mejor que una maquetación rígida sin margen de seguridad.
Errores que perjudican más la lectura
Algunos de los errores más habituales son también los más fáciles de evitar. La longitud de línea excesiva es uno de ellos: el criterio 1.4.8 de WCAG 2.2 (nivel AAA) recomienda un máximo de 80 caracteres por línea para textos en alfabeto latino. Un texto que se extiende de borde a borde en una pantalla grande obliga al ojo a hacer un salto muy largo al inicio de cada línea nueva, y eso agota.
Otro error frecuente es el texto justificado: aunque visualmente puede parecer más ordenado, el justificado crea ríos de espacio blanco irregulares dentro del párrafo que dificultan la lectura, especialmente en pantallas estrechas. Conviene también revisar el contraste de los textos sobre fondos con imagen o gradiente: puede ser perfecto en el centro y desaparecer en los bordes.
También conviene evitar los bloques largos en mayúsculas o en cursiva. Las mayúsculas funcionan muy bien en etiquetas breves, pero en párrafos reducen las diferencias de forma entre palabras y hacen más difícil escanear. La cursiva, sobre todo si es muy caligráfica, aumenta el esfuerzo en textos largos. Y el tracking no debería usarse para «arreglar» una fuente de forma agresiva: ampliar mucho el espacio entre letras rompe la textura y dificulta agrupar las palabras.
Haz pruebas con usuarios reales
Todas estas pautas son un buen punto de partida, pero no sustituyen la prueba con personas reales. Un lector con dislexia puede tener una experiencia completamente distinta a la que imaginas con una fuente que tú percibes como perfectamente legible.
Hay extensiones de navegador que simulan cómo perciben el texto personas con visión reducida o daltonismo. Y si tienes acceso a usuarios con distintas capacidades visuales, una sesión corta de observación aporta más que horas de revisión técnica.
Antes de dar por cerrado el sistema tipográfico, además de un validador automático, conviene hacer estas pruebas manuales:
- Zoom del navegador al 200 % y revisión de todos los flujos principales.
- Viewport estrecho hasta 320 CSS px sin scroll horizontal en el contenido de lectura.
- Aplicación de los valores de WCAG Text Spacing para comprobar recortes y solapamientos.
- Lectura con la webfont desactivada o bloqueada para ver la fallback.
- Prueba de contraste en estados normal, hover, focus y disabled cuando haya texto.
- Móvil real con luz exterior y tamaño de texto aumentado.
La charla
Te lo ha contado
Ana Cirujano
Soy diseñadora y ayudo a negocios online a fortalecer su marca, mejorar la experiencia de usuario y obtener mejores resultados.
