Utilizar tamaños de fuente que se puedan leer

Esta regla se activa cuando PageSpeed Insights detecta que el texto en la página es demasiado pequeño para ser legible.

Información general

Puedes especificar el tamaño de la fuente web usando las cuatro unidades más habituales: píxeles (px), puntos (pt), emes (em) y porcentaje (%).

  • Los píxeles son "píxeles CSS" y varían en función del tamaño y de la densidad de pantalla del dispositivo.
  • Los puntos se definen en relación con los píxeles. Un píxel equivale a 0,75 puntos.*
  • Los emes y los porcentajes son unidades relativas, ya que dependen del tamaño y de las propiedades heredadas de la fuente utilizada. Un eme equivale a 100%.

* Ver notas adicionales

Además, las ventanas gráficas influyen en el modo en que las fuentes se escalan en los dispositivos móviles. Una página sin una ventana gráfica correctamente configurada queda reducida proporcionalmente en los dispositivos móviles, por lo que a menudo el texto es ilegible debido a su pequeño tamaño.

Recomendaciones

En primer lugar, configura una ventana gráfica para asegurarte de que las fuentes se escalen de la manera deseada en los distintos dispositivos. Una vez que hayas configurado la ventana, sigue estas recomendaciones adicionales:

  1. Utiliza un tamaño de fuente base de 16 píxeles CSS. Ajusta el tamaño según sea necesario basándote en las propiedades de la fuente usada.
  2. Usa tamaños en relación con el tamaño base para definir la escala tipográfica.
  3. El texto necesita espacio vertical entre los caracteres y puede ser necesario ajustarlo para cada fuente. La recomendación general es utilizar la altura de línea predeterminada del navegador, que es de 1,2 em.
  4. Limita la cantidad de fuentes y la escala tipográfica. Si usas muchas fuentes y tamaños de fuente, el diseño de la página puede parecer descuidado y excesivamente complejo.

Por ejemplo, el siguiente fragmento de CSS define un tamaño de fuente base de 16 píxeles CSS que, a su vez, tiene una clase "small" cuyo tamaño es un 75% del tamaño base (12 píxeles CSS). Aparte, a la clase "large" se le asigna un tamaño de fuente del 125% del tamaño base (20 píxeles CSS):

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

Para obtener más recomendaciones sobre el uso de fuentes en dispositivos móviles, consulta las directrices de tipografía para Android.

Información adicional

Es necesario leer detalladamente la especificación CSS 2.1 para entender mejor cómo se definen las unidades de longitud. Ahí se explican más unidades que no se mencionan en este artículo, como las pulgadas, los centímetros, los milímetros y las picas. Es fácil pensar que una pulgada CSS equivale siempre a una pulgada física, pero no es así.

Todas las unidades absolutas se definen en relación de la una con la otra. Un píxel equivale a 0,75 puntos, 1 punto equivale a 1/72 partes de una pulgada, 1 pulgada equivale a 2,54 centímetros, etc. Sin embargo, estas unidades se procesan de un modo u otro en función del dispositivo. Por ejemplo, al imprimir en papel, 1 pulgada equivale a 1 pulgada física, por lo que las demás unidades deberían ser relativas a la pulgada física. Sin embargo, los teléfonos móviles tienen en cuenta lo que se denomina "píxel de referencia". Un píxel CSS se define en función de este píxel de referencia, y las demás unidades (pulgadas, centímetros, etc.) se ajustan en relación con este píxel CSS. Por lo tanto, en un teléfono móvil, una pulgada CSS suele ser más pequeña que una pulgada física.

Por este motivo, se recomienda definir los tamaños de fuente con píxeles. Algunos diseñadores y desarrolladores pueden confundirse con el uso de las pulgadas o de los puntos; aunque son dimensiones físicas, no tienen por qué corresponderse con la realidad. Hay que tener en cuenta que el tamaño de un píxel puede cambiar en función del dispositivo en el que se muestre.

Por último, cada fuente tiene sus propias características: tamaño, espaciado, etc. El navegador mostrará cada fuente con un tamaño de 16 px (píxeles CSS) de forma predeterminada. Se trata de un valor adecuado en la mayoría de los casos, pero puede ser necesario ajustarlo para una fuente específica, es decir, el tamaño predeterminado puede ser menor o mayor para adaptarse a las distintas propiedades de la fuente. A continuación, cuando se ha configurado el tamaño predeterminado, toda fuente que sea menor o mayor debe definirse con un tamaño en píxeles relativo al predeterminado. Estas fuentes pueden utilizarse para ajustar el tamaño del texto principal, del secundario o de cualquier otro tipo de contenido de la página.

Algunos navegadores para móviles pueden intentar escalar el tamaño de las fuentes aunque no se haya configurado una ventana gráfica. El comportamiento de escalado puede variar entre los navegadores, y no debería confiarse en él para mostrar fuentes legibles en dispositivos móviles. PageSpeed Insights muestra el texto en la página sin el escalado de fuente del navegador.