Esta regla se activa cuando PageSpeed ????Insights detecta que el texto de una página web es demasiado peque?o para leerlo.

descripción general

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 (%).

• Los píxeles son "píxeles CSS" y varían según el tama?o y la densidad del dispositivo.
• Los puntos se definen en relación con los píxeles. Un píxel son 0,75 puntos.^*.
• Los EM y los porcentajes son unidades "relativas": son relativos al tama?o de fuente heredado y a los atributos utilizados. 1 EM es igual al 100%.

?

^*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.

sugerencia

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:

?

1. Utilice un tama?o de fuente base de 16 píxeles CSS. Ajuste el tama?o de fuente según sea necesario según las propiedades de la fuente que desee utilizar.
2. Define la escala tipográfica utilizando tama?os de fuente relativos a la fuente base.
3. Es necesario que haya algo de espacio vertical entre los caracteres en cada línea de texto y es posible que sea necesario ajustarlo de manera diferente para cada fuente. Generalmente recomendamos que utilice la altura de línea predeterminada del navegador de 1,2 em.
4. Limite la cantidad de fuentes utilizadas y las proporciones tipográficas: Demasiadas fuentes y tama?os de fuente pueden generar dise?os de página desordenados y demasiado complejos.

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):

?

Para otras sugerencias de fuentes para dispositivos móviles, consultePautas de tipografía de Android.

otra información

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.