Diseño Web

Tamaño de letra, los 16 píxeles que marcan la legibilidad web

El tamaño de letra por debajo de 12 píxeles hace perder lectores en el móvil, y 16 es el mínimo que recomienda la usabilidad.

Tamaño de letra, los 16 píxeles que marcan la legibilidad web

El tamaño de letra de la ficha de un despacho decide si quien entra se queda a leer o cierra la pestaña a los tres segundos. Google lo mide en el informe de usabilidad móvil de Search Console y en la auditoría de Lighthouse. Esta pieza repasa qué cifra exige la legibilidad, qué diferencia hay entre fijar el texto en píxeles o en unidades relativas, y cómo comprobarlo en la web de tu despacho antes de que lo note un cliente o un algoritmo.

El tamaño de letra mínimo recomendado para el cuerpo de un texto web es de 16 píxeles. Por debajo de 12 píxeles, Google considera el texto demasiado pequeño para leerse en el móvil y lo señala como un problema de usabilidad en Search Console.

Tamaño de letra mínimo que pide la legibilidad

La investigación de usabilidad de Nielsen Norman Group fija en 16 píxeles el mínimo razonable para el cuerpo de un texto web, con ganancias claras en velocidad de lectura y satisfacción cuando se sube un poco más, sobre todo entre lectores mayores de 45 años. Por debajo de esa cifra, el usuario necesita hacer zoom para leer con comodidad, y un lector que amplía la pantalla con los dedos ya está a medio camino de abandonar la página.

No es casualidad que 16 píxeles sea también el tamaño por defecto que aplican los navegadores cuando una web no fija nada: coincide con lo que el propio navegador considera legible sin intervención del diseñador. Partir de esa base y subir en títulos y destacados da mejor resultado que partir de 13 o 14 píxeles para que quepa más en pantalla.

Por qué Google penaliza el texto pequeño en móvil

El informe de usabilidad móvil de Search Console incluye el aviso «Texto demasiado pequeño para leerse», que salta cuando el tamaño de letra que renderiza Googlebot en un móvil queda por debajo de lo legible, calculado sobre el ancho de la pantalla y la etiqueta viewport de la página. La auditoría de Lighthouse que revisa este mismo punto da por buena una web solo si al menos el 60 por ciento de su texto alcanza los 12 píxeles, y la suspende si el 40 por ciento o más queda por debajo. Es un listón bajo: aprobarlo no significa que el texto se lea bien, solo que no es ilegible. Una web que ya cuida el diseño adaptado a móvil suele resolver esto de serie, pero conviene comprobarlo aparte.

El aviso de Search Console y qué comprobar primero

Cuando el informe marca páginas con texto pequeño, lo primero es abrir una de ellas en las herramientas de desarrollador del navegador y mirar el tamaño calculado del párrafo principal, no el de un titular suelto. Si aparece algo por debajo de 16 píxeles, el problema suele estar en una hoja de estilos heredada de una plantilla pensada para otro idioma o para una pantalla de escritorio mucho más ancha.

Lo segundo es revisar que la etiqueta viewport existe y no fuerza una escala fija: sin ella, un móvil puede mostrar la versión de escritorio en miniatura y cualquier tamaño de letra queda ilegible por mucho que la hoja de estilos diga 16 píxeles.

Unidades relativas en vez de píxeles fijos

La norma de accesibilidad web exige que el texto pueda ampliarse hasta el 200 por ciento sin perder contenido ni funcionalidad: nada debe cortarse, solaparse ni obligar a desplazarse en horizontal. Esa regla de redimensionado de texto es mucho más fácil de cumplir si el tamaño de letra se fija en unidades relativas, em, rem o porcentajes, en vez de en píxeles fijos, porque esas unidades escalan junto con la preferencia de tamaño que cada usuario tiene configurada en su navegador.

Una unidad relativa de tipografía web, como em o rem, no fija un tamaño exacto en píxeles: lo calcula como múltiplo del tamaño base del navegador, así que el texto crece o se reduce cuando el usuario cambia su configuración o hace zoom.

El zoom al 200 % que exige la accesibilidad web

Comprobarlo es tan simple como ampliar el navegador al 200 por ciento y mirar si el menú sigue siendo usable, si los botones de contacto no quedan tapados por otro elemento y si ningún párrafo se corta a la mitad de una palabra. Una maqueta en píxeles fijos suele aguantar bien hasta el 150 por ciento y empezar a romperse justo donde la norma exige que siga funcionando.

Este es el tipo de comprobación que recoge la ley de accesibilidad web que ya alcanza a varios despachos: no basta con que el sitio se vea bien a tamaño normal, tiene que seguir siendo utilizable cuando alguien con baja visión necesita ampliarlo.

El interlineado que necesita cada tamaño de letra

Subir el tamaño de letra sin tocar el espacio entre líneas puede empeorar la lectura en vez de mejorarla: las líneas se aprietan y el ojo pierde el renglón al saltar de una a la siguiente. La proporción que mejor funciona para cuerpo de texto es un interlineado de entre 1,5 y 1,6 veces el tamaño de la letra.

El otro factor es el ancho de la columna: una letra grande en una columna muy ancha obliga al ojo a recorrer una línea larga antes de saltar a la siguiente, y la velocidad de lectura cae cuanto más se alarga esa línea. Por eso el tamaño de letra no se decide solo mirando el número en píxeles: hay que mirarlo junto al interlineado y al ancho de columna con los que convive en la plantilla real del despacho.

El tipo de letra también decide si se lee

Dos tipografías al mismo tamaño en píxeles no se leen igual: una fuente de palo seco con trazos finos pierde legibilidad antes que una con trazos más gruesos cuando se reduce el tamaño, y algunas fuentes decorativas se vuelven ilegibles por debajo de los 18 o 20 píxeles aunque en un titular grande luzcan bien. Antes de fijar el tamaño mínimo del cuerpo del texto conviene probar la tipografía concreta que usa la plantilla, no una genérica.

Cargar varias familias y pesos de tipografía también pesa en el rendimiento, y un texto que tarda en aparecer porque la fuente aún no ha cargado es tan ilegible como uno demasiado pequeño. Autoalojar las fuentes ayuda en ambos frentes, y además tiene una lectura de protección de datos que ya se trató al hablar de Google Fonts sin autoalojar.

Cómo revisar el tamaño de letra de tu web

La revisión no exige herramientas caras ni conocimientos de código, solo mirar en el sitio correcto:

  • Ejecutar la auditoría de Lighthouse desde el propio navegador y leer qué selectores de CSS señala como culpables del texto pequeño.
  • Revisar el informe de usabilidad móvil de Search Console y comprobar si queda alguna URL con el aviso de texto demasiado pequeño.
  • Inspeccionar el párrafo principal con las herramientas de desarrollador y anotar el tamaño calculado, no el que indica la hoja de estilos sobre el papel.
  • Probar el zoom al 200 por ciento en un móvil real, no solo en el emulador del navegador, porque el teclado y los gestos táctiles cambian el resultado.

Qué mirar en el móvil antes de publicar una pieza

Antes de dar por buena una pieza nueva del blog conviene abrirla en un teléfono de verdad, no solo en el modo responsive del navegador: la letra que se ve perfecta en un monitor de 27 pulgadas con el zoom al 100 por ciento puede quedar diminuta en una pantalla de 6 pulgadas con el navegador configurado con su propio tamaño de letra del sistema.

Conviene además revisar el primer párrafo, el que decide si el lector sigue o se va, porque suele ser el que hereda el tamaño de letra por defecto del tema sin que nadie lo haya tocado a propósito. Si ese párrafo falla, cualquier esfuerzo en el resto del artículo se pierde antes de que se note.

Preguntas frecuentes sobre el tamaño de letra

¿Qué tamaño de letra usan las webs profesionales?

La mayoría de webs corporativas bien valoradas usa entre 16 y 18 píxeles para el cuerpo del texto, con los títulos escalados hacia arriba desde esa base. Por debajo de 16 píxeles el texto exige zoom para leerse con comodidad, y por encima de 20 empieza a sobrar espacio sin aportar legibilidad extra.

¿El móvil necesita una letra más grande que el ordenador?

No necesariamente más grande, pero sí igual de legible con una pantalla mucho menor: el error habitual no es bajar el tamaño en móvil, sino mantener un ancho de columna pensado para escritorio que obliga a hacer zoom de todos modos. El tamaño de letra y el ancho de columna se revisan juntos, no por separado.

¿Cómo sé si Google marca mi texto como demasiado pequeño?

Entrando en el informe de usabilidad móvil de Search Console: si hay URLs marcadas con «Texto demasiado pequeño para leerse», ahí aparece la lista exacta de páginas afectadas. También puede comprobarse página por página con la auditoría de Lighthouse, sin esperar a que Google rastree de nuevo el sitio.

¿Hay una ley que obligue a un tamaño de letra mínimo?

No fija un número en píxeles, pero sí exige que el texto pueda ampliarse hasta el 200 por ciento sin romperse, lo que en la práctica obliga a evitar tamaños fijos muy pequeños. Esa exigencia ya alcanza a los despachos sujetos a la normativa de accesibilidad web, no solo a organismos públicos.

Fuente: web.dev (Google) — Document uses legible font sizes

De la idea a la acción

¿Tu despacho necesita decisiones más claras?

Cuéntanos dónde quieres llegar. Pondremos estrategia, tecnología y medición al servicio de ese objetivo.

Hablemos
Tamaño de letra, los 16 píxeles que marcan la legibilidad web | IQLex