Muchos motores de búsqueda clasifican las páginas en función de su optimización para dispositivos móviles. Los tamaños de fuente inferiores a 12 px suelen ser difíciles de leer en dispositivos móviles y pueden requerir que los usuarios acerquen el texto para que se muestre en un tamaño de lectura cómodo.
Cómo falla la auditoría del tamaño de fuente de Lighthouse
Lighthouse marca páginas con tamaños de fuente que son demasiado pequeños para leerse fácilmente en dispositivos móviles:
Lighthouse indica páginas en las que el 40% o más del texto tiene un tamaño de fuente inferior a 12 px. Cuando una página no pasa la auditoría, Lighthouse enumera los resultados en una tabla con cuatro columnas:
Origen | Es la ubicación de origen del conjunto de reglas de CSS que causa el texto ilegible. |
Selector | El selector del conjunto de reglas. |
% del texto de la página | El porcentaje del texto de la página que se ve afectado por el conjunto de reglas. |
Tamaño de fuente | El tamaño calculado del texto. |
Cómo corregir las fuentes ilegibles
Verificar los tamaños de fuente en tu CSS Intenta que un tamaño de fuente de al menos 12 px en al menos el 60% del texto de tu página.
Cómo corregir una configuración faltante de viewport
Si Lighthouse informa Text is illegible because of a missing viewport config
, agrega una etiqueta <meta name="viewport" content="width=device-width, initial-scale=1">
al <head>
de tu documento.
Para obtener más información, consulta la publicación No tiene una etiqueta <meta name="viewport">
con width
o initial-scale
.
Recursos
El código fuente de la auditoría El documento no usa tamaños de fuente legibles