Tipografia

Recursos da Web: font-size rem unidade em line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max() e clamp() Unidades de janela de visualização

Práticas recomendadas gerais

  • Use números sem unidade para line-height (por exemplo, 1.5) para garantir o dimensionamento relativo durante a herança do tamanho da fonte.
  • Use overflow-wrap: break-word (ou anywhere) para conter URLs longos.
  • NÃO use px para o tamanho da fonte. Prefira rem para respeitar as preferências de tamanho de fonte do navegador do usuário (tamanho de fonte raiz) ou em/porcentagens para dimensionamento contextual.

Legibilidade

  • Evite linhas de texto longas: limite os blocos de parágrafo a uma largura máxima de 80 caracteres.
  • Evite rios de espaços em branco: evite text-align: justify, porque isso pode dificultar a leitura do texto. Se for necessário usar, combine com hyphens: auto para evitar espaços em branco excessivos entre as palavras.
  • Não use fontes ornamentadas: evite fontes cursivas para o conteúdo principal.
  • Não use letras maiúsculas para dar ênfase: prefira o negrito para ênfase visual e use <em>/<strong> quando a ênfase for semântica.
  • Limite a ênfase geral: a ênfase perde o significado quando está em todos os lugares. Aplique-a apenas onde ela muda a forma como o conteúdo deve ser lido.
  • Ofereça suporte às preferências de zoom do usuário: permita que os usuários redimensionem o texto em até 200% sem perda de conteúdo ou funcionalidade.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

Ajustar o texto

  • Use text-wrap: balance para títulos equilibrados e conteúdo semelhante a títulos (por exemplo, <th>)
  • Use text-wrap: pretty para textos longos (parágrafos, citações em bloco etc.)
  • Use text-wrap: balance ou text-wrap: pretty de forma deliberada, NÃO aplique em *, porque isso tem um custo de desempenho.
  • Evite text-wrap: balance em elementos com uma caixa visível (planos de fundo, bordas, sombras etc.), porque isso não muda a largura do contêiner, apenas afeta como o ajuste de texto dentro dessa largura. Isso pode deixar um espaço vazio no final do contêiner, o que geralmente não é desejável.

Tipografia responsiva

  • FAÇA a combinação de unidades relativas à janela de visualização e à fonte em clamp() para tamanhos de fonte que se ajustam ao tamanho da janela de visualização, garantindo que permaneçam dentro de um intervalo desejado. Por exemplo, clamp(2rem, 1rem + 5vw, 4rem). Ajuste a proporção de unidades relativas à janela de visualização e à fonte para controlar a rapidez com que o tamanho da fonte muda.
  • NÃO use vw sozinho para o tamanho da fonte sem clamp(), porque isso pode deixar o texto muito pequeno ou muito grande em telas extremas.