Utilice tamaños de fuente legibles

On this page

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

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.

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.