En el artículo anterior contamos cómo llegamos a elegir «Atkinson Hyperlegible Next» como tipografía funcional de nuestra web, y por qué añadimos «Instrument Serif» para las hero sections. Si no lo has leído, es un buen punto de partida.
Este segundo artículo va de lo que viene después de elegir la fuente: dimensionarla bien, darle el espacio que necesita y garantizar que cumple con los criterios de accesibilidad en contraste. Porque una buena tipografía mal aplicada sigue siendo un problema.
Tamaños
Antes de hablar de números concretos, hay una pregunta de fondo que conviene responder: ¿en qué unidad defines los tamaños?
Parece un detalle técnico. No lo es.
Arrastra el slider para simular lo que ocurre cuando un usuario ajusta el tamaño de fuente de su navegador. Esto es exactamente lo que hace una persona con baja visión antes de abrir tu web.
Este texto usa font-size: 16px. El usuario ha pedido letras más grandes. Este texto lo ignora.
Siempre 16px, pase lo que pase
Este texto usa font-size: 1rem. Crece automáticamente con la preferencia del usuario.
Equivale a 16px con esta configuración
rem es la forma más directa de respetar ese criterio.
Los píxeles (px) son unidades absolutas.
Si escribes font-size: 16px, el texto siempre mide 16 píxeles, pase lo que pase. El problema: muchas personas ajustan el tamaño de fuente predeterminado de su navegador, a 18px, 20px o más — porque lo necesitan para leer cómodamente. Si usas píxeles, esa configuración no tiene ningún efecto en tu web. Estás ignorando activamente la preferencia del usuario.
Los rem son relativos al tamaño base del navegador (normalmente 16px por defecto).
Si el usuario tiene configurado 20px, tu 1rem equivaldrá a 20px automáticamente. Respetas su elección sin hacer nada extra.
| Elemento | px equiv. | Lo que usamos | Rango recomendado |
|---|---|---|---|
| Cuerpo de texto | 16px | 1rem | 1 – 1.25rem |
| Texto secundario | 14px | 0.875rem | 0.875 – 1rem |
| Encabezado H1 | 32px | 2rem | 2 – 3rem |
| Encabezado H2 | 24px | 1.5rem | 1.5 – 2.25rem |
| Encabezado H3 | 20px | 1.25rem | 1.25 – 1.5rem |
| Botones / etiquetas | 14 – 16px | 0.875 – 1rem | 0.875 – 1.125rem |
Tamaño de fuente
Interlineado:
El error que casi nadie ve
Puedes tener la mejor fuente del mundo y el tamaño perfecto, y si el interlineado es insuficiente, el texto sigue siendo difícil de leer.
Lo comprobamos en nuestra propia web durante el proceso de construcción.
Las WCAG 1.4.12 «Espaciado del texto» son claras: el contenido no debe romperse si el usuario aplica estos valores mínimos:
La accesibilidad no es una capa extra que se añade al final del proyecto. Es una forma de trabajar desde el principio que tiene en cuenta la diversidad real de las personas.
El texto respira. Cada línea tiene espacio para existir. El ojo sigue el ritmo sin esfuerzo.
Supera el mínimo WCAG 1.4.12 (1.5×). El 1.6 mejora especialmente la experiencia para personas con dislexia.
La accesibilidad no es una capa extra que se añade al final del proyecto. Es una forma de trabajar desde el principio que tiene en cuenta la diversidad real de las personas.
Las líneas se apilan. Leer se convierte en un esfuerzo. Para alguien con dislexia o baja visión, este texto es una barrera.
Incumple WCAG 1.4.12. El mínimo exigible es 1.5×.
| Propiedad CSS | Valor mínimo WCAG | En em (base 16px) |
|---|---|---|
| line-height | 24px | 1.5em (usamos 1.6) |
| margin-bottom entre párrafos | 32px | 2em |
| letter-spacing | ~2px | 0.12em |
| word-spacing | ~3px | 0.16em |
En nuestra web usamos line-height: 1.6 para el cuerpo de texto. El 1.5 es el mínimo que exige la WCAG; el 1.6 mejora la experiencia especialmente para personas con dislexia.
Contraste:
El criterio más incumplido que vemos en auditorías
El criterio WCAG 1.4.3 — «Contraste mínimo» es uno de los fallos más frecuentes en las webs que auditamos. Y casi siempre por la misma razón: alguien eligió un gris bonito sobre blanco sin comprobar el ratio.
Los valores que aplicamos:
– Texto normal (menos de 24px, o menos de ~19px en negrita): mínimo «4.5:1»
– Texto grande (24px o más, o ~19px en negrita): mínimo «3:1»
#1a1a1a sobre blanco
~19:1 — Nivel AAA#595959 sobre blanco
~7:1 — Nivel AA con margenTexto grande en azul
~5.5:1 — Texto grande ≥ 3:1#aaaaaa sobre blanco
~2.3:1 — No AAEl gris "suave" más frecuente en diseños minimalistas. Una barrera real para muchas personas.
#c0c0c0 sobre blanco
~1.6:1 — IlegiblePlaceholder text sin contraste suficiente. Fallo muy frecuente en formularios.
Contraste impredecible e incontrolable. Incumple WCAG en las zonas brillantes.
El overlay al 60% hace el contraste independiente de la foto. Consistente y verificable.
Aprendizajes
Los errores que corregimos en nuestra propia web
Durante la construcción de la web encontramos algunos de los fallos más habituales en nuestro propio trabajo.
Texto justificado en párrafos.
En algún punto del diseño teníamos bloques de texto con alineación justificada. Quedaba ordenado visualmente. Pero la justificación crea espacios irregulares entre palabras que dificultan la lectura, especialmente para personas con dislexia. Lo corregimos: todo el texto de cuerpo está alineado a la izquierda. Seguir tendencias mola, pero si las tendencias dificultan la lectura no funciona.
Cursiva en bloques largos.
Usábamos cursiva para destacar párrafos de introducción. Funciona para frases cortas; en bloques de más de dos líneas, la legibilidad cae. Redujimos el uso de cursiva a énfasis puntuales.
Longitud de línea sin controlar.
En pantallas grandes, el texto se extendía demasiado. Una línea de 100 caracteres es agotadora de leer. Añadimos max-width: 68ch al contenedor principal. El rango recomendado es entre 60 y 80 caracteres por línea.
Conclusiones
Lo aprendizajes que nos llevamos
La tipografía accesible no es una checklist que rellenas al final. Es una serie de decisiones interconectadas, tamaño, unidad de medida, espaciado, contraste, longitud de línea, que se afectan entre sí y que hay que pensar juntas desde el principio.
Y la forma más eficiente de aprenderlo es construir algo con esas restricciones.
Nuestra web fue ese proceso para nosotros. Este artículo es el resumen de lo que encontramos y de nuestros aprendizajes.
Hemos creado un Checklist de tipografía accesible. Si te interesa puedes copiarlo en el siguiente link
¿Quieres revisar si la tipografía de tu web cumple con estos criterios?
→ accesibilidadprimero.com/servicios
