Use tamanhos de fonte legíveis

Esta regra é acionada quando o PageSpeed Insights detecta que o texto na página é ilegível por ser muito pequeno.

Visão geral

O tamanho da fonte na Web pode ser especificado por meio de quatro unidades comuns: pixels (px), pontos (pt), EMs (em) e percentual (%).

  • Pixels são “pixels CSS” que variam conforme o tamanho e a densidade do dispositivo
  • Os pontos são definidos em relação aos pixels. Um único pixel tem 0,75 pontos*.
  • EMs e percentual são unidades “relativas”: estão relacionadas ao tamanho e às propriedades herdadas da fonte utilizada Um (1) EM é igual a 100%.

* Ver observações adicionais.

Além disso, a janela de visualização afeta a forma como as fontes são dimensionadas em dispositivos móveis. Se uma página não tiver a janela de visualização configurada corretamente, ela será reduzida em dispositivos móveis, fazendo muitas vezes com que o texto da página fique ilegível devido ao pequeno tamanho.

Recomendações

Primeiramente, configure a janela de visualização para garantir que as fontes sejam dimensionadas conforme o esperado em todos os dispositivos. Depois de configurar a janela de visualização, implemente as recomendações adicionais abaixo.

  1. Use uma fonte com um tamanho base de 16 pixels CSS. Ajuste o tamanho conforme o necessário, com base nas propriedades da fonte utilizada.
  2. Use tamanhos associados ao tamanho base para definir a escala tipográfica.
  3. O texto necessita de espaço vertical entre os caracteres, e talvez seja preciso ajustá-lo para cada fonte. A recomendação geral é usar a altura de linha padrão do navegador de 1,2 em.
  4. Restrinja o número de fontes utilizadas e a escala tipográfica: o excesso de fontes e tamanhos de fonte produz layouts de página desorganizados e exageradamente complexos.

Por exemplo, o snippet de CSS a seguir define um tamanho base de fonte de 16 pixels CSS, com a classe CSS "pequena" com uma fonte de 75% da fonte base (12 pixels CSS) e uma classe CSS "grande" com uma fonte de 125% da fonte base (20 pixels CSS):

body {
  font-size: 16px;
}

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

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

Para recomendações adicionais de fontes aplicáveis a dispositivos móveis, consulte as diretrizes de tipografia para Android.

Informações adicionais

A especificação CSS 2.1 requer uma leitura cuidadosa para compreender como são definidas as unidades de tamanho. Ela contém unidades adicionais não mencionadas aqui: polegadas, centímetros, milímetros e picas. O que deve ser lembrado é que a polegada CSS nem sempre é igual à polegada física.

Todas as unidades absolutas são definidas em relação a outras. Um (1) pixel é .75 pontos, um (1) ponto é 1/72 de uma polegada, uma (1) polegada é 2,54 centímetros etc. No entanto, cabe ao dispositivo determinar como "ancorar" essas unidades. Por exemplo, ao imprimir em papel, a medida de uma polegada é ancorada em uma polegada física, e todas as unidades serão associadas à polegada física. No entanto, para exibição em um telefone celular, os dispositivos ancoram as medidas em uma medida conhecida como o "pixel de referência". Um (1) pixel CSS é definido de acordo com esse pixel de referência, e todas as outras unidades, polegadas, centímetros etc. serão ajustadas em relação ao pixel CSS. Portanto, em um telefone celular, uma polegada CSS normalmente é exibida em um tamanho menor que uma polegada física real.

Por esse motivo, recomendamos definir os tamanhos de fonte usando pixels. Alguns designers e desenvolvedores podem confundir-se ao visualizar polegadas ou pontos. Essas são dimensões físicas, mas não correspondem necessariamente aos tamanhos reais. Deve-se considerar que o tamanho dos pixels pode ser alterado de acordo com o dispositivo no qual o texto é exibido.

Por fim, cada fonte também tem características próprias: tamanho, espaçamento e assim por diante. Por padrão, o navegador exibe cada fonte em 16 px (pixels CSS). Na maioria dos casos, esse é um bom padrão, mas às vezes é necessário fazer ajustes para fontes específicas, ou seja, o tamanho padrão pode ser maior ou menor para acomodar as diferentes propriedades da fonte. Dessa forma, assim que o tamanho padrão é definido, fontes maiores e menores também são determinadas em relação ao tamanho padrão, usando pixels. Essas fontes podem então ser utilizadas para ajustar o tamanho do texto para conteúdo primário, secundário e de outros tipos na página.

Alguns navegadores móveis podem tentar dimensionar as fontes das páginas sem configurar a janela de visualização corretamente. Esse dimensionamento varia entre os navegadores e não deve ser usado para exibir fontes legíveis nos dispositivos móveis. O PageSpeed Insights exibe o texto em sua página sem aplicar o dimensionamento de fonte específico do navegador.