La tipografía decide, más que cualquier otro elemento visual, si alguien termina de leer tu página o la abandona a los tres segundos. Una fuente mal elegida, un tamaño demasiado pequeño en móvil o un interlineado apretado bastan para que el usuario se canse antes de llegar al segundo párrafo. Y como hoy el mismo texto se lee en un móvil de 6 pulgadas y en un monitor de 27, la tipografía web tiene que resolver ese salto sin perder legibilidad en ningún extremo.
Elegir la fuente adecuada
Todo empieza por la fuente, y aquí conviene distinguir entre dos familias con usos distintos. Las serif, con esos pequeños remates al final de cada trazo, funcionan bien en textos largos como artículos o entradas de blog, porque guían el ojo línea a línea en pantallas grandes. Las sans-serif, sin remates, dan un aire más moderno y se leen mejor en titulares o en pantallas pequeñas como la de un móvil.
Sea cual sea tu elección, compruébala en ambos extremos: una fuente que luce perfecta en un monitor de 27 pulgadas puede volverse ilegible en una pantalla de 6. Google Fonts y Adobe Fonts son buenas opciones de partida porque están optimizadas para web y cubren estilos variados sin complicarte con licencias.
Tamaños que se adaptan solos
Un tamaño de fuente fijo en píxeles es una promesa que se rompe en cuanto cambia el dispositivo, así que trabaja con unidades relativas como em o rem en vez de px. Un cuerpo de texto en 1.6rem se reescala solo según la configuración del navegador y el dispositivo, algo que un tamaño fijo nunca hace.
Para titulares y elementos que necesitan ajustarse de forma más fluida al ancho de la pantalla, el viewport width (vw) es la herramienta que te falta: define el tamaño como un porcentaje del ancho visible y el texto crece o encoge con la ventana sin que tengas que definir puntos de ruptura manuales para cada caso.
Interlineado y espaciado entre letras
El line-height y el letter-spacing son los dos ajustes que menos se cuidan y más se notan. Un interlineado de entre 1,4 y 1,6 veces el tamaño de la fuente da al texto el aire que necesita para no resultar denso; por debajo de eso, sobre todo en móvil, la lectura se vuelve cansada rápido.
El espaciado entre letras solo hace falta tocarlo en tamaños grandes, como titulares en mayúscula, donde un pequeño incremento aporta claridad. En cuerpo de texto normal casi nunca hace falta, y forzarlo entorpece más de lo que ayuda.
Contraste: el factor que casi nadie revisa
Texto oscuro sobre fondo claro, o al revés, con suficiente diferencia entre ambos: esa es la base de un buen contraste. No hace falta más teoría, pero sí hace falta comprobarlo, porque lo que en el monitor del diseñador se ve perfecto puede fallar bajo luz solar en un móvil.
Los fondos con patrones o fotografías detalladas debajo del texto son otro clásico que resta legibilidad. Si necesitas texto sobre imagen, un overlay semitransparente o una franja de color sólido resuelve el problema sin sacrificar el diseño. Para verificar que cumples los mínimos de accesibilidad, el test de contraste de la WCAG te da un sí o un no objetivo, no una impresión subjetiva.
Tipografía variable: un archivo, muchos estilos
Las fuentes variables meten en un solo archivo lo que antes exigía cargar varías versiones: grosor, ancho, inclinación, todo ajustable con un parámetro CSS. El resultado es menos peso total en la página y más margen para adaptar la tipografía a cada tamaño de pantalla sin multiplicar las peticiones de red.
Optimizar la carga de las fuentes
Una tipografía bien elegida no sirve de mucho si tarda dos segundos en aparecer. Tres ajustes marcan la diferencia: cargar solo los subconjuntos de caracteres que realmente usas, en vez de la familia completa; usar el formato woff2, más ligero que las alternativas antiguas y compatible con cualquier navegador reciente; y aplicar font-display: swap para que el texto se muestre con una fuente de sistema mientras la personalizada termina de cargar, en lugar de dejar la pantalla en blanco.
Probar en dispositivos reales, no solo en el emulador
Las herramientas de desarrollo del navegador simulan bien distintos tamaños de pantalla, pero no sustituyen a probar en un móvil de verdad con luz de sol directa o en una tablet con la pantalla algo desgastada. Si puedes, pide a alguien ajeno al proyecto que lea un párrafo largo en su propio dispositivo: te dirá en diez segundos lo que un test automatizado tarda en detectar.
La tipografía web bien resuelta no se nota, y esa es la señal de que está funcionando. Elige la fuente pensando en dónde se va a leer, deja que el tamaño se adapte solo, cuida el contraste y no descuides cómo se carga cada fuente. Son ajustes pequeños, pero son justo los que separan una web cómoda de leer de otra que el usuario cierra sin darse cuenta de por qué.
El peso de las fuentes es solo una parte de la ecuación de rendimiento: en optimización de Core Web Vitals en sitios WordPress con contenido dinámico vemos cómo afecta el conjunto de recursos de la página a esas métricas. Y si te interesa cómo aligerar también el resto de elementos visuales, en creación de imágenes vectoriales ligeras y sistemas visuales que mejoran los Core Web Vitals tratamos el mismo problema aplicado a gráficos e iconos.
Preguntas frecuentes
¿Qué tamaño de fuente mínimo recomiendo para móvil?
Como referencia general, no bajes de 16px (1rem) para el cuerpo de texto en móvil. Por debajo de ese tamaño, muchos usuarios necesitan hacer zoom para leer con comodidad.
¿Es mejor usar em o rem para los tamaños de fuente?
En general, rem es más predecible porque siempre se calcula sobre el tamaño base del documento, mientras que em se acumula según el elemento padre y puede dar resultados inesperados en estructuras anidadas.
¿Cómo afecta la tipografía a la velocidad de carga?
Cargar familias tipográficas completas o varios pesos que no usas añade peticiones y peso innecesarios. Usar subconjuntos de caracteres, formato woff2 y font-display: swap reduce ese impacto sin renunciar al diseño.
¿Cuándo conviene usar una tipografía variable?
Cuando necesitas varios grosores o estilos de la misma familia en el mismo proyecto. Un solo archivo variable sustituye a cargar cuatro o cinco archivos estáticos distintos, con el ahorro de peso que eso supone.
