bompus/hr-better-typography

Tipografia

Tipografia é, acima de tudo, contençã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 o mesmo conjunto de regras.

Ao revisar, leia a página renderizada em vez de escanear o código. Quebra de linha ruim, órfãos e truncamento só aparecem com comprimentos reais de conteúdo.

Escreva cada correção no sistema de estilização do projeto e use os valores exatos abaixo, em vez de equivalentes familiares. O guia de consulta rápida mapeia cada declaração para seu equivalente no Tailwind.

As palavras em si pertencem a hr-better-writing. A estrutura semântica de títulos pertence a hr-better-accessibility. O layout espacial RTL e as propriedades lógicas pertencem a hr-better-layout. A medição de contraste pertence a hr-better-colors. Esta skill é responsável por como o texto é renderizado, quebrado e se comporta em conteúdo com direção mista.

Sirva o formato correto

Use .woff2 na web, para 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 em vez de tags brutas

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 as tags brutas para eixos customizados ("GRAD" 80) e recursos de nicho ("ss01" 1) que não possuem propriedade própria. Os eixos e tags de recursos estão listados em variable-fonts-and-opentype.md.

Carregue os 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 após verificar se todas as formas necessárias de negrito, itálico, versalete, sobrescrito e subscrito permanecem distintas em toda a pilha de fallback.

Menos fontes, tamanhos e pesos

Raramente use mais de três fontes. Peso e tamanho definem a hierarquia; usá-los em excesso prejudica rapidamente a legibilidade. Combine por contraste, não por semelhança: um título serifado sobre um corpo sem serifa parece intencional; dois sans-serifs 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 pequeno conjunto de tamanhos e desvie-se dele o mínimo possível. Tamanhos codificados manualmente sem um sistema por trás quebram em escala. Reforce a escala com uma regra de lint ou teste de guarda que falhe em um tamanho arbitrário fora dela.

Nomes simples e padrão como text-sm são bons 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 título descendem com o nível

Mapeie os níveis de título para etapas descendentes da escala tipográfica, de modo que um título 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 hr-better-accessibility; esta skill define apenas o tratamento visual.

Entrelinha por função

Títulos mais apertados, por volta de 1.1. Corpo do texto de 1.5 a 1.6. Prefira valores sem unidade, para que a entrelinha escale com o tamanho da fonte; um 24px fixo não escala.

Entrelinha apertada é 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

Títulos grandes geralmente ficam melhores com espaçamento entre letras ligeiramente negativo. Rótulos pequenos em maiúsculas precisam de um pouco de espaçamento entre letras positivo, ou as letras parecem apertadas. O corpo do texto em tamanhos de leitura não precisa de nenhum.

Limite a largura da linha

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 esteja dentro da faixa. Consulte escolhas de unidade e os equivalentes em pixels.

Quebre deliberadamente

Quatro declarações, quatro funções:

• text-wrap: balance distribui o texto uniformemente entre as linhas. Use em títulos.
• text-wrap: pretty impede que uma única palavra curta termine na última linha. Use em descrições.
• overflow-wrap: break-word onde uma palavra longa, link ou ID possa escapar do contêiner.
• white-space: nowrap em rótulos e badges onde uma quebra de linha pareça quebrada.

Pule balance e pretty em texto longo.

Números tabulares em valores variáveis

Dígitos têm larguras diferentes por padrão, então temporizadores, contadores e preços deslocam o layout à medida que são atualizados. 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. Truncamento oculta conteúdo. Quando o texto faltante é importante, mantenha o valor completo acessível em uma dica de ferramenta ou em uma visualização expandida.

Escolha por campo. Quebre nomes e títulos que o usuário precisa completos para identificar um item. Trunque no meio quando os itens diferem no final, como nomes de arquivo, caminhos e e-mails que compartilham um domínio, porque uma reticência no final os torna idênticos. Nunca trunque números, valores ou datas que o usuário compara. Detalhes em wrapping-and-punctuation.md.

Escreva o conteúdo naturalmente, estilize com CSS

Armazene o texto em caixa natural e controle a apresentação com text-transform, para que uma reformulação nunca exija reescrever o conteúdo.

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 de reticência único, não três pontos.
•   para manter 16 px juntos em uma quebra de linha.
• ­ para indicar onde uma palavra longa pode ser quebrada.

Sublinhados da fonte

Sublinhados padrão ficam onde o navegador decide. Obtenha 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ções extras, como uma abreviatura ou um termo definido.

A cor é a única parte de um sublinhado real que anima de forma confiável. Portanto, a menos que a única coisa sendo animada 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 aplica zoom na 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ência diferente, então pergunte qual o design deseja:

• Aumente o tamanho do input no mobile (text-base sm:text-sm). Muda a aparência em telas pequenas.
• Mantenha font-size: 16px e renderize o tamanho pretendido com transform: scale(), compensando largura e line-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 longo do corpo em 16px, o padrão do navegador. Afaste-se dele apenas por um motivo que você possa nomear: a fonte é pequena, a largura da linha é 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 parece ter baixo contraste, use hr-better-colors para medir o par renderizado e hr-better-accessibility para classificar o requisito. Não mexa nas cores 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. O 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 do conteúdo onde a direção muda. Preserve a ordem dos dígitos e use <bdi> para isolar um valor de direção mista. O espelhamento espacial e as propriedades lógicas CSS pertencem a hr-better-layout.

Mantenha o texto útil selecionável

Mantenha o texto selecionável por padrão. ::selection pode carregar a marca na 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 o rótulo de um botão pode ser destacado.

Antes de finalizar

Erro	Correção
Face sintetizada difere do design	Carregue a face real; desative apenas o modo de síntese verificado
Título filho visualmente se sobrepõe ao pai	Mapeie a hierarquia dessa seção para etapas descendentes da escala
Elemento de título escolhido pelo 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
Título de duas linhas desbalanceado	text-wrap: balance
Texto justificado em uma interface	text-align: start; reserve justificação para layouts editoriais
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	Restaure-a; suprima apenas onde conflita com um arrasto ou gesto
Dica de informação extra sem pista 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 3 linhas	Pelo menos 1.4 em qualquer texto que quebre em 3+ linhas

Reportando

Severidade. ALTA torna o texto ilegível ou trunca o conteúdo sem possibilidade de recuperação. MÉDIA quebra o sistema tipográfico ou a hierarquia de títulos. BAIXA é um polimento isolado.

Verificação. Sem navegador: tamanho e peso calculados para cada nível de título, verificados em ordem descendente; entrelinha e largura da linha declaradas; regras de truncamento contra comprimentos realistas de string. Com um: redimensione a viewport para capturar quebras de linha, órfãos e truncamento em comprimentos reais de conteúdo. Relate cada verificação que não pôde ser executada como Não verificado.

Formato. Agrupe os achados sob o princípio que cada um viola, ordenados por severidade, uma linha por causa raiz listando cada localização em que aparece:

Severidade	Localização	Antes	Depois	Por quê

Localização é caminho/para/arquivo:linha. Por quê nomeia o princípio e o impacto no usuário.

Relate Bloqueio quando qualquer ALTA permanecer, Aprovar caso contrário, deixando o restante na tabela como trabalho a fazer. Nunca Aprovar cobertura que você não inspecionou. Sem nada a relatar, declare "Nenhum achado acionável de tipografia" e relate a verificação.