Tipografia
Tipografia é principalmente moderação: uma escala sensata, espaçamento confortável, contraste suficiente. Um rótulo, uma célula de tabela, um título de marketing e um parágrafo de artigo não compartilham um único conjunto de regras.
Ao revisar, leia a página renderizada em vez de escanear o código. Quebra inadequada, viúvas e truncamento só aparecem com comprimentos de conteúdo reais.
Escreva cada correção no sistema de estilos do projeto e use os valores exatos abaixo, em vez de equivalentes familiares. O guia de referência mapeia cada declaração para seu equivalente no Tailwind.
As palavras em si pertencem a better-writing. A estrutura semântica de cabeçalhos pertence a better-accessibility. Layout RTL espacial e propriedades lógicas pertencem a better-layout. Medição de contraste pertence a better-colors. Este skill é responsável por como o texto é renderizado, quebrado e se comporta em conteúdo de direção mista.
Sirva o formato correto
Use .woff2 na web, devido à compressão Brotli e amplo suporte. .woff é um fallback para navegadores muito antigos. .ttf e .otf são formatos de desktop sem compressão web. Como os arquivos são carregados é responsabilidade do projeto.
Propriedades sobre tags raw
Quando uma propriedade CSS existe, use-a. font-weight: 650 em vez de font-variation-settings: "wght" 650. font-optical-sizing: auto em vez de "opsz". font-variant-numeric: tabular-nums em vez de font-feature-settings: "tnum" 1.
Propriedades continuam funcionando quando um fallback não variável é renderizado. Reserve tags raw para eixos customizados ("GRAD" 80) e recursos de nicho ("ss01" 1) que não possuem propriedade própria. Eixos e tags de recursos estão listados em variable-fonts-and-opentype.md.
Carregue pesos e estilos pretendidos
Navegadores sintetizam um peso ou estilo que a família ativa não fornece, distorcendo a face real. Carregue as faces que o design utiliza.
font-synthesis: none desliga a síntese, mas apaga a ênfase em vez de reportá-la. Defina-a somente depois de verificar se cada forma necessária em negrito, itálico, versalete, sobrescrito e subscrito permanece distinta em toda a pilha de fallback.
Menos fontes, tamanhos e pesos
Raramente use mais de três fontes. Peso e tamanho definem hierarquia; usar demais prejudica rapidamente a legibilidade. Combine por contraste, não por similaridade: um título serifado sobre um corpo sem serifa parece intencional, dois sem serifas quase idênticos parecem um erro.
Abaixo de 18px, mantenha-se no peso 400 ou mais pesado. Pesos abaixo de 300 são apenas para exibição em 28px+; eles desaparecem em tamanhos de texto. Orientações sobre combinação estão em choosing-fonts.md.
Use uma escala tipográfica com nomes semânticos
Defina um conjunto pequeno de tamanhos e desvie-se dele o mínimo possível. Tamanhos codificados manualmente sem um sistema por trás deles quebram em escala.
Nomes simples e padrão como text-sm são aceitáveis quando as regras de uso são claras. Em uma equipe, nomeie os tamanhos pelo uso (text-body-sm) para que as regras sobrevivam a outras pessoas. A construção da escala está em spacing-and-sizing.md.
Tamanhos de cabeçalho diminuem com o nível
Mapeie os níveis de cabeçalho para degraus descendentes da escala tipográfica, de modo que um cabeçalho visualmente subordinado nunca se sobreponha ao seu pai. Níveis adjacentes podem compartilhar um tamanho na extremidade menor da escala, desde que o peso ou espaçamento os mantenha distintos. O elemento semântico é de better-accessibility; este skill define apenas o tratamento visual.
Altura da linha por função
Cabeçalhos mais compactos, cerca de 1.1. Corpo do texto 1.5 a 1.6. Prefira valores sem unidade, para que a altura da linha escale com o tamanho da fonte; um 24px fixo não funciona.
Altura de linha compacta é para texto curto. Qualquer coisa que quebre em três ou mais linhas precisa de pelo menos 1.4, mesmo em uma linha com altura restrita.
Espaçamento entre letras por tamanho
Cabeçalhos grandes geralmente ficam melhores com espaçamento entre letras ligeiramente negativo. Rótulos pequenos em maiúsculas precisam de um pouco de espaçamento positivo entre letras, ou as letras parecem apertadas. Corpo do texto em tamanhos de leitura não precisa de nenhum dos dois.
Limite a medida
Linhas longas dificultam que o olho encontre a próxima. Limite o texto longo a cerca de 60–75 caracteres por linha. Qualquer unidade funciona, desde que exista um limite e o comprimento da linha fique na faixa. Veja escolhas de unidade e os equivalentes em pixel.
Quebre deliberadamente
Quatro declarações, quatro trabalhos:
text-wrap: balancedistribui o texto uniformemente entre as linhas. Use em cabeçalhos.text-wrap: prettyimpede que uma única palavra curta termine na última linha. Use em descrições.overflow-wrap: break-wordonde uma palavra longa, link ou ID pode escapar do contêiner.white-space: nowrapem rótulos e badges onde uma quebra de linha parece quebrada.
Pule balance e pretty em texto longo.
Números tabulares em valores mutáveis
Dígitos têm larguras diferentes por padrão, então temporizadores, contadores e preços deslocam o layout à medida que atualizam. Aplique font-variant-numeric: tabular-nums a qualquer valor que mude.
Trunque sem perder conteúdo
Para uma única linha, text-overflow: ellipsis com overflow: hidden e white-space: nowrap. Para várias, line-clamp. O truncamento esconde conteúdo. Quando o texto ausente é importante, mantenha o valor completo acessível em uma dica de ferramenta ou visão expandida.
Escreva o texto naturalmente, estilize com CSS
Armazene texto em caixa natural e controle a apresentação com text-transform, para que um redesenho nunca exija reescrever o texto.
Use pontuação inteligente no texto renderizado:
- Aspas curvas em prosa, aspas retas em código.
- Um travessão en dash para intervalos:
2010–2020. - O caractere único de reticências, não três pontos.
para manter16 pxjuntos através de uma quebra de linha.­para indicar onde uma palavra longa pode quebrar.
Sublinhados a partir da fonte
Sublinhados padrão ficam onde o navegador decide. Extraia posição e espessura das métricas da própria fonte com text-underline-position: from-font e text-decoration-thickness: from-font. Ajuste manualmente com text-decoration-thickness, text-underline-offset e text-decoration-skip-ink.
text-decoration-style desenha a linha pontilhada, tracejada ou ondulada. Um sublinhado pontilhado é uma dica comum de que uma palavra carrega informação extra, como uma abreviatura ou um termo definido.
Cor é a única parte de um sublinhado real que anima de forma confiável. Portanto, a menos que a única coisa que esteja animando seja a cor, construa o sublinhado como um elemento separado em vez de usar text-decoration.
Inputs a 16px no mobile
O Safari do iOS amplia a página inteira quando o texto de um input é menor que 16px. Duas correções mantêm o tamanho em 16px e têm aparências diferentes, então pergunte qual o design deseja:
- Aumentar o tamanho do input no mobile (
text-base sm:text-sm). Muda a aparência em telas pequenas. - Manter
font-size: 16pxe renderizar o tamanho pretendido comtransform: scale(), compensando largura eline-height. Idêntico em qualquer viewport, mais código para manter.
Ambas as receitas estão em details-and-accessibility.md.
Pisos de tamanho e contraste
Comece o texto do corpo longo em 16px, o padrão do navegador. Afaste-se dele apenas por um motivo que você possa nomear: a fonte é pequena, a medida é estreita ou o produto é uma ferramenta profissional densa.
Texto de UI pode ser menor. 14px é um ponto de partida útil para inputs e menus, 13px para legendas e raramente abaixo de 12px. Inputs ainda precisam de 16px no mobile.
Quando o texto parecer de baixo contraste, use better-colors para medir o par renderizado e better-accessibility para classificar o requisito. Deixe as cores em paz, a menos que solicitado.
Suavização de fonte na raiz
No macOS, o texto é renderizado mais pesado do que o pretendido. Aplique -webkit-font-smoothing: antialiased e -moz-osx-font-smoothing: grayscale uma vez no layout raiz, nunca por componente. antialiased do Tailwind cobre ambos.
Comportamento de idioma e bidirecional
Defina lang para que navegadores e tecnologia assistiva escolham a pronúncia, aspas e hifenização corretas. Defina dir no documento ou no limite de conteúdo onde a direção muda. Preserve a ordem dos dígitos e use <bdi> para isolar um valor de direção mista. Espelhamento espacial e propriedades CSS lógicas pertencem a better-layout.
Mantenha texto útil selecionável
Mantenha o texto selecionável por padrão. ::selection pode trazer a marca para a experiência de leitura, desde que a combinação selecionada permaneça legível.
user-select: none pertence a uma superfície arrastável ou orientada a gestos onde a seleção acidental interfere. Nunca em toda a interface e nunca porque um rótulo de botão pode ser destacado.
Antes de finalizar
| Erro | Correção |
|---|---|
| Face sintetizada difere do design | Carregue a face real; desabilite apenas o modo de síntese verificado |
| Cabeçalho filho se sobrepõe visualmente ao pai | Mapeie a hierarquia dessa seção para degraus descendentes da escala |
| Elemento de cabeçalho escolhido por seu tamanho padrão | Escolha a semântica primeiro, depois defina o tamanho no CSS |
| Órfão na última linha de um parágrafo | text-wrap: pretty |
| Cabeçalho de duas linhas desbalanceado | text-wrap: balance |
| Texto justificado em uma interface | text-align: start; reserve justificado para layouts editoriais específicos |
| Sublinhado corta descendentes | text-decoration-skip-ink: auto, métricas from-font |
| Valor de direção mista renderizado na ordem errada | Corrija lang/dir; isole o valor com <bdi> |
| Seleção desabilitada em toda a interface do aplicativo | Restaure-a; suprima apenas onde conflita com um arraste ou gesto |
| Dica de informação extra sem nenhum sinal visual | Sublinhado pontilhado via text-decoration-style: dotted |
Peso Fino/Light em texto de UI 14px | Peso 400+ abaixo de 18px; pesos finos são apenas para exibição |
leading-none em uma descrição de cartão de três linhas | Pelo menos 1.4 em qualquer texto que quebre em 3+ linhas |
Reportagem
Severidade. HIGH torna o texto ilegível ou trunca conteúdo sem forma de recuperá-lo. MEDIUM quebra o sistema tipográfico ou a hierarquia de cabeçalhos. LOW é polimento isolado.
Verificação. Sem navegador: tamanho e peso computados para cada nível de cabeçalho, verificados descendentes; altura de linha e medida declarados; regras de truncamento contra comprimentos realistas de string. Com um: redimensione o viewport para capturar quebra, viúvas e truncamento em comprimentos de conteúdo reais. Reporte cada verificação que não pôde executar como Não verificado.
Formato. Agrupe as descobertas sob o princípio que cada uma viola, ordenadas por severidade, uma linha por causa raiz listando cada local onde aparece:
| Severidade | Local | Antes | Depois | Por quê |
|---|
Local é caminho/para/arquivo:linha. Por quê nomeia o princípio e o impacto no usuário.
Termine com Bloqueio quando qualquer HIGH permanecer, Aprovar caso contrário, deixando o restante na tabela como trabalho a fazer. Nunca Aprovar cobertura que você não inspecionou. Se não houver nada a relatar, declare "Nenhuma descoberta acionável de tipografia" e reporte a verificação.