Esta regla se activa cuando PageSpeed ????Insights detecta que el texto de una página web es demasiado peque?o para leerlo.
Puedes usar lo siguientecuatro unidades de uso comúnPara especificar el tama?o de fuente web: píxel (px), punto (pt), EM (em) y porcentaje (%).
?
*Ver instrucciones adicionales.
también,Ventana gráficaAfecta la escala de las fuentes en los dispositivos móviles. Las páginas que no tienen una ventana gráfica configurada correctamente aparecen reducidas en los dispositivos móviles, lo que a menudo resulta en texto más peque?o e ilegible.
primero,Configurar ventana gráficapara garantizar que las fuentes se escalarán como se espera en todos los dispositivos. Después de configurar la ventana gráfica, implemente estas recomendaciones adicionales:
?
Por ejemplo, el siguiente fragmento de CSS define un tama?o de fuente base de 16 píxeles CSS, donde en la clase CSS "peque?o" el tama?o de fuente se define como el 75% del tama?o de fuente base (es decir, 12 píxeles CSS), y en la clase CSS "grande" el tama?o de fuente se define como el 125% del tama?o de fuente base (es decir, 20 píxeles CSS):
cuerpo {
tama?o de fuente: 16px;
}
.peque?o {
tama?o de fuente: 12px; /* 75% de la línea base */
}
.grande {
tama?o de fuente: 20px; /* 125% de la línea base */
}
?
Para otras sugerencias de fuentes para dispositivos móviles, consultePautas de tipografía de Android.
Por favor lea cuidadosamenteEspecificación CSS 2.1, para ver cómo se definen las unidades de longitud. La especificación incluye unidades adicionales que no se mencionan aquí: pulgadas, centímetros, milímetros y pico. Además, un punto que se pasa por alto fácilmente es que 1 pulgada en CSS no necesariamente equivale a 1 pulgada física.
Todas las unidades absolutas se definen en relación con otras unidades. 1 píxel equivale a 0,75 puntos, 1 punto equivale a 1/72 de pulgada y 1 pulgada equivale a 2,54 centímetros, etc. Sin embargo, el "posicionamiento" de estas unidades depende en última instancia del dispositivo. Por ejemplo, al imprimir en papel, 1 pulgada está anclada a 1 pulgada física y todas las demás unidades deben ser relativas a la pulgada física. Sin embargo, cuando se muestra en un teléfono móvil, el dispositivo queda anclado al famoso "píxel de referencia". Puede definir 1 píxel CSS con respecto a este píxel de referencia y luego ajustar todas las demás unidades (por ejemplo, pulgadas, centímetros, etc.) con respecto al píxel CSS. Por lo tanto, 1 pulgada CSS generalmente se mostrará en el teléfono como más peque?a que 1 pulgada física en realidad.
Por este motivo, le recomendamos que defina los tama?os de fuente en píxeles. De lo contrario, algunos dise?adores y desarrolladores pueden verse enga?ados al ver que las unidades utilizadas son pulgadas o puntos, ya que estas unidades, si bien también son dimensiones físicas, no necesariamente equivalen a dimensiones del mundo real. Piense en un píxel como una unidad que cambia el tama?o de la pantalla según las dimensiones del dispositivo en el que se encuentra.
Finalmente, cada tipografía tiene sus propias características: tama?o, espaciado, etc. De forma predeterminada, los navegadores mostrarán cada fuente con 16 píxeles (píxeles CSS). Esta configuración predeterminada está bien para la mayoría de las situaciones, pero algunas fuentes específicas pueden requerir ajustes adicionales, es decir, puede establecer un tama?o de fuente predeterminado menor o mayor para adaptarse a diferentes propiedades de la fuente. Luego, una vez establecido el tama?o predeterminado, defina fuentes más grandes y más peque?as según el tama?o de píxel predeterminado para ajustar el tama?o del texto para el contenido primario, secundario y otros tipos de contenido de la página.
Algunos navegadores móviles pueden intentar escalar fuentes web sin configurar correctamente la ventana gráfica. Dado que este comportamiento de escala varía de un navegador a otro, es mejor no depender de esto para mostrar fuentes legibles para dispositivos móviles. PageSpeed ????Insights muestra el texto de su página web tal cual sin aplicar la escala de fuente especificada por el navegador.
?
Salvo que se indique lo contrario, el contenido de esta página tiene licencia bajo laLicencia Creative Commons Atribución 3.0y los ejemplos de código tienen licencia bajo laLicencia Apache 2.0Para más detalles, consulte nuestraPolíticas del sitio.