16px
Tamaño mínimo recomendado para texto de cuerpo en móvil según WCAG 2.2
"
Logicunara · Infografías · Tipografía web
Tipografía en la web: datos y contexto
La tipografía web no es solo elegir una fuente bonita. Cada decisión de tamaño, interlineado y contraste afecta directamente a cuánto tiempo un lector permanece en la página y cuánto comprende de lo que lee.
Qué dicen los números sobre cómo leemos en pantalla
Los estudios de seguimiento ocular muestran que los lectores en pantalla escanean antes de leer linealmente. El tamaño de fuente, el contraste y el espaciado entre líneas determinan si ese escaneo se convierte en lectura real. Un cuerpo de texto por debajo de 16px en dispositivos móviles reduce la comprensión de forma medible, no solo la comodidad.
1,5×
Interlineado óptimo respecto al tamaño de fuente para lectura sostenida
65ch
Longitud de línea ideal en caracteres para párrafos de lectura continua
4,5:1
Ratio mínimo de contraste para texto normal según el estándar AA de WCAG
El peso tipográfico guía la atención antes que el color
Cuando un encabezado y un párrafo tienen el mismo peso visual, el lector pierde el punto de entrada. La diferencia entre un h1 y el cuerpo debe ser perceptible en menos de 200 ms, que es el tiempo medio de fijación ocular inicial.
Cada familia tipográfica adicional cuesta entre 20 y 80 KB
Una fuente variable bien configurada puede reemplazar cuatro o cinco archivos de peso fijo. El formato woff2 con subsetting Unicode reduce el tamaño hasta un 60% respecto al archivo original completo.
El espaciado de letras afecta a usuarios con dislexia de forma documentada
Aumentar el letter-spacing entre 0.12 y 0.16em en fuentes sin serifa mejora la identificación de palabras en lectores con dislexia, según estudios del MIT Media Lab publicados en 2019.
Escala tipográfica modular
Una escala basada en una razón de 1.25 o 1.333 produce jerarquías coherentes sin necesidad de ajustes manuales en cada nivel.
Errores más comunes
- Usar más de tres familias tipográficas en un mismo proyecto
- Ignorar el comportamiento de la fuente en pantallas de alta densidad
- No definir fallbacks del sistema en la pila de fuentes
- Aplicar el mismo tamaño de cuerpo en móvil y escritorio
Combinaciones tipográficas que funcionan y por qué
Emparejar fuentes no es intuición pura. Existe lógica detrás de qué contrasta bien y qué compite visualmente. Estas combinaciones aparecen en proyectos reales con resultados medibles en legibilidad.
01
Serifa + Sans-serif
Georgia + Inter
El contraste entre el remate clásico de Georgia y la limpieza geométrica de Inter crea una jerarquía inmediata. Funciona especialmente bien en artículos largos donde el cuerpo en serifa mejora la lectura sostenida.
02
Misma familia, pesos distintos
Source Sans 3 · 300 y 700
Una sola familia con rango de pesos amplio elimina el problema de compatibilidad visual. La diferencia de 400 unidades entre el peso ligero y el negrita es suficiente para establecer jerarquía sin añadir carga de red.
03
Monoespaciada en acento
JetBrains Mono + Roboto
Reservar la fuente monoespaciada solo para código o datos técnicos refuerza el contraste semántico. El lector distingue visualmente qué es contenido editorial y qué es referencia técnica sin necesitar etiquetas adicionales.
Parámetros que definen una combinación viable
Antes de decidir si dos fuentes funcionan juntas, conviene revisar estos valores de forma sistemática. El contraste de peso y la diferencia de altura de x son los factores más determinantes.
Contraste de peso mínimo
300 unidades
Diferencia de altura de x
15 – 25%
Número máximo de familias
2 por proyecto
Ratio encabezado / cuerpo
1.6× mínimo
La fuente del sistema como opción legítima
La pila system-ui carga en 0 ms y se adapta al sistema operativo del usuario. En interfaces de aplicación donde la velocidad de carga es crítica, es la opción más honesta técnicamente.
Aa