Tipografia

A WCAG sugere linhas de no máximo 80 caracteres e espaçamento entre linhas de pelo menos 1.5 dentro dos parágrafos. Duas propriedades do CSS cuidam das duas coisas.

Escolhendo fontes

font-family recebe uma lista de fontes separadas por vírgulas. O navegador usa a primeira que estiver disponível no aparelho do leitor e desce pela lista se ela faltar. Sempre termine a lista com uma família genérica, serif, sans-serif, monospace ou system-ui, para que algo razoável apareça seja o que for que estiver instalado. Nomes de fontes com espaços vão entre aspas, como em "Noto Sans KR". system-ui usa a fonte da interface do sistema operacional, que é bem desenhada, já está no aparelho e cobre muitos sistemas de escrita.

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;          /* 16px unless the reader changed it */
  line-height: 1.6;         /* unitless: 1.6 times the font size */
  color: #222;
}
h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; }
p  { max-width: 65ch; }     /* keeps lines a readable length */
.label { text-transform: uppercase; letter-spacing: 0.08em; }

Você também pode carregar um arquivo de fonte do seu próprio servidor com uma regra @font-face, ou de um serviço de fontes. Fontes web dão personalidade à página, mas cada uma é um download que atrasa o texto, e fontes coreanas, chinesas e japonesas podem chegar a vários megabytes porque têm milhares de glifos. Carregue só os pesos de que precisa e mantenha uma boa alternativa na lista.

Tamanho, peso e altura da linha

font-size define o tamanho; como a unidade de cor e unidades explicou, rem mantém o texto de acordo com as configurações do leitor. font-weight vai de 100 (fino) a 900 (black), com 400 como normal e 700 como negrito; as palavras-chave normal e bold significam 400 e 700. Uma fonte só tem os pesos que o designer criou, então pedir 300 numa fonte que só tem 400 e 700 dá o mais próximo.

line-height define a distância entre as linhas. Use um número puro, sem unidade, como 1.6: ele passa a significar 1.6 vezes o tamanho da fonte de cada elemento, então títulos e letras miúdas recebem cada um o espaçamento que lhes cabe. Um valor com unidade, como 24px, é calculado uma vez e herdado como comprimento fixo, o que fica apertado demais para títulos grandes. Texto corrido costuma ficar bom de ler entre 1.4 e 1.7; o critério de sucesso 1.4.8 da WCAG sugere pelo menos 1.5 dentro dos parágrafos. Títulos grandes ficam melhores mais apertados, por volta de 1.1 a 1.3.

Comprimento da linha e alinhamento

Linhas muito longas cansam: o olho se perde quando volta para o começo da linha seguinte. A WCAG 1.4.8 sugere no máximo 80 caracteres por linha (40 para chinês, japonês e coreano). O jeito fácil de garantir isso é usar max-width em unidades ch nos parágrafos, por exemplo max-width: 65ch. text-align define o alinhamento: left (ou start) é o mais fácil de ler em textos longos de línguas escritas da esquerda para a direita, center serve para títulos curtos, e justify pode abrir espaços desiguais entre as palavras.

Pequenos acabamentos

text-transform: uppercase mostra o texto em maiúsculas sem mudar o HTML, então o código-fonte mantém a grafia normal e o estilo pode ser trocado depois num só lugar. O MDN observa que trechos longos em maiúsculas são mais difíceis de ler para algumas pessoas, inclusive pessoas com dislexia, então use isso em rótulos curtos e acrescente um pouco de letter-spacing, como 0.08em. text-decoration desenha linhas: underline, line-through, ou none para tirar o sublinhado de um link (mantenha algum outro sinal de que é um link). Leitores que precisam de mais espaço podem sobrescrever o seu espaçamento; a WCAG 1.4.12 pede que as páginas continuem funcionando com altura de linha 1.5, espaçamento entre letras de 0.12em, entre palavras de 0.16em e entre parágrafos de 2em, então evite caixas de altura fixa que cortariam o texto.