Tema: typography
-
Carregamento de web fonts: font-display, preload, subconjuntos com unicode-range e fontes de fallback com métricas equivalentes
Mostre texto já na primeira renderização e carregue a fonte da marca sem saltos de layout: divida as fontes em subconjuntos com unicode-range para baixar só os sistemas de escrita usados, escolha font-display conforme o papel do texto (optional no corpo, swap nos títulos), faça preload dos arquivos da primeira renderização com crossorigin e declare uma fonte de fallback com size-adjust e ajustes de ascent/descent para que as linhas quebrem igual antes e depois da troca.
-
Texto corrido legível: comprimento da linha, espaçamento entre linhas e contraste
Três propriedades determinam se um texto longo é confortável de ler: o comprimento da linha (o critério AAA das WCAG limita-o a 80 caracteres), o espaçamento entre linhas (deve ser possível chegar a pelo menos 1,5 vez o tamanho da fonte sem quebrar o layout) e o contraste (4,5:1 para texto normal, 3:1 para texto grande). Defina-os em unidades relativas, para que os usuários possam ampliar o texto e alterar seus espaçamentos.
-
Texto corrido legível: medida, altura de linha e contraste
Três propriedades decidem se um texto longo pode ser lido com conforto: o comprimento da linha (o critério AAA da WCAG limita a 80 caracteres), o espaçamento entre linhas (deve ser possível chegar a pelo menos 1,5 vez o tamanho da fonte sem quebrar o layout) e o contraste (4,5:1 para texto normal, 3:1 para texto grande). Defina-as em unidades relativas, para que o usuário possa redimensionar e reespaçar o texto.
Legível por máquina: JSON