Wensity Typography

A tipografia faz a maior parte do trabalho em uma interface. Acertando-a, uma página simples parece projetada; errando-a, nem mesmo cor ou movimento a salvam. Esta skill oferece um sistema para configurar uma vez e regras para aplicar em todos os lugares.

Os valores abaixo são padrões. Se o projeto já possui um sistema tipográfico, mantenha-o e melhore como ele é usado. Substitua-o apenas quando solicitado.

1. Escolha famílias

Uma família geralmente é suficiente. Uma boa fonte sans com uma faixa real de pesos cobre display, títulos, corpo e UI. Adicione uma segunda família apenas para um papel que a primeira não pode fazer: uma sans de display com personalidade para uma página de marketing, ou uma monoespaçada para código e dados.
Apenas sans: sem serifa e sem itálico. Títulos, corpo, citações e legendas são todos definidos em vertical (upright) com sans. Um título serifado ou uma linha em itálico parece uma fantasia de template em um produto web, portanto, deixe ambos de fora mesmo em blogs, documentações e páginas de luxo; transmita tom com peso, tamanho e espaçamento.
Nunca mais de duas famílias mais uma monoespaçada. Uma terceira família de texto parece indecisão.
Escolha para o assunto, não por hábito. Não coloque a mesma fonte em todos os projetos. Pergunte como é o mundo do produto em papel ou hardware e, em seguida, escolha uma fonte com esse caráter:

O produto se parece com	Procure por	Exemplos gratuitos
uma ferramenta precisa (ferramentas dev, dados, infra)	uma grotesca apertada, mono para dados	Geist, Switzer, Onest; Geist Mono, JetBrains Mono
dinheiro calmo ou saúde (finanças, seguros, clínicas)	uma neo-grotesca ou humanista estável	Inter, Public Sans, Source Sans 3
consumidor amigável (social, alimentação, viagem, educação)	uma geométrica ou humanista mais arredondada	Plus Jakarta Sans, Figtree, Nunito Sans, DM Sans
uma marca confiante ou página de startup	uma sans com personalidade em tamanhos de display	General Sans, Manrope, Bricolage Grotesque, Space Grotesk
leitura e publicação (documentação, blogs, revistas)	uma sans calma com um corte de texto verdadeiro, títulos apertados na mesma família	Inter, Satoshi, Source Sans 3
moda, editorial ou luxo	uma sans de display refinada, definida grande e apertada, apenas títulos	Satoshi, General Sans, Clash Grotesk

Verifique se a fonte pode fazer o trabalho: os pesos que você precisa (geralmente 400, 500, 600), figuras tabulares, pontuação adequada, os idiomas que você oferece e uma versão variável se você usar vários pesos.

2. Defina funções, não tamanhos

Nomeie o texto por sua função. Os componentes usam nomes de funções; apenas a definição da função contém valores em pixel. Sete funções cobrem quase toda interface:

Função	Usado para	Página de marketing	UI do aplicativo
`display`	título principal (hero), um por página	48 a 80px, peso 600, altura de linha 0.95 a 1.05, tracking -0.03em a -0.04em	raramente usado
`title`	cabeçalhos de página e seção	32 a 44px, peso 600, altura de linha 1.1, tracking -0.02em	20 a 24px, peso 600, altura de linha 1.25, tracking -0.01em
`heading`	cabeçalhos de cartão, painel e subseção	20 a 24px, peso 600, altura de linha 1.25, tracking -0.01em	15 a 16px, peso 600, altura de linha 1.4
`body`	parágrafos	16 a 18px, peso 400, altura de linha 1.55 a 1.65	14 a 15px, peso 400, altura de linha 1.5
`label`	botões, entradas, navegação, cabeçalhos de tabela	14 a 15px, peso 500, altura de linha 1.3	13 a 14px, peso 500, altura de linha 1.3
`caption`	texto auxiliar, metadados, timestamps	13 a 14px, peso 400, altura de linha 1.45	12 a 13px, peso 400, altura de linha 1.4
`code`	código inline, blocos de código, IDs	0.9em do texto ao redor, mono	o mesmo

Regras para a escala:

Os passos devem ser óbvios. Funções vizinhas diferem em pelo menos cerca de 20% no tamanho, ou por um passo de tamanho mais um passo de peso (14px 500 label sobre 13px 400 caption é aceitável; 15px 400 ao lado de 16px 400 fazendo trabalhos diferentes não é).
Uma proporção ajuda, mas a tabela vence. Páginas de marketing se adequam a uma proporção de 1.25 a 1.333 entre os passos; UI de aplicativo densa se adequa a 1.125 a 1.2. Arredonde para pixels inteiros.
No máximo três pesos: regular (400), medium (500) para labels, semibold (600) para cabeçalhos e display. A hierarquia também vem de tamanho, cor e espaço, portanto não precisa de cinco pesos. Se 600 parece muito pesado para uma linha de display grande, use 500 para display em vez de adicionar um quarto peso.
Tamanho fluido apenas para display e title em páginas de marketing: font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem). Mantenha o texto do corpo e da UI fixo para que layouts densos permaneçam previsíveis.
Piso do texto do corpo: 16px em páginas de marketing e leitura, 14px em UI de aplicativo densa. O texto de entrada é 16px no celular, ou o Safari do iOS amplia a página quando o campo é focado.

No Tailwind CSS v4, defina as funções uma vez (substitua os nomes das famílias pelos que você escolheu):

@theme {
  --text-display: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);
  --text-display--line-height: 1;
  --text-display--letter-spacing: -0.035em;
  --text-display--font-weight: 600;

  --text-title: 2.25rem;
  --text-title--line-height: 1.1;
  --text-title--letter-spacing: -0.02em;
  --text-title--font-weight: 600;

  --text-heading: 1.25rem;
  --text-heading--line-height: 1.3;
  --text-heading--letter-spacing: -0.01em;
  --text-heading--font-weight: 600;

  --text-body: 1rem;
  --text-body--line-height: 1.6;

  --text-label: 0.875rem;
  --text-label--line-height: 1.3;
  --text-label--font-weight: 500;

  --text-caption: 0.8125rem;
  --text-caption--line-height: 1.45;
}

Em seguida, use text-display, text-title, text-body na marcação em vez de text-[44px] ou uma cadeia de text-4xl leading-tight tracking-tight. No Tailwind v3, coloque os mesmos valores em theme.extend.fontSize como tuplas [size, { lineHeight, letterSpacing, fontWeight }].

3. Altura de linha e espaçamento entre letras

A altura de linha diminui à medida que o tamanho aumenta. Display 0.95 a 1.05, títulos 1.1 a 1.2, corpo 1.5 a 1.65, labels 1.2 a 1.35. Um título de 64px com altura de linha 1.5 se desfaz em linhas separadas.
Tracking apertado para texto grande, nenhum para corpo. Display -0.03em a -0.04em, títulos -0.02em, cabeçalhos -0.01em, corpo e labels 0. Não ultrapasse -0.05em; as letras começam a se tocar. Ajuste a olho para a fonte escolhida.
Sem tracking positivo em texto minúsculo de corpo e interface. Tracking positivo só ajuda texto em caixa alta, e texto em caixa alta deve ser raro (veja seção 6).
Linhas largas precisam de mais entrelinha. Se o texto do corpo estiver próximo de 75 caracteres, use altura de linha 1.6 ou mais; em 50 caracteres, 1.5 é suficiente.
Texto claro em fundos escuros parece mais pesado e apertado. Em temas escuros, adicione cerca de 0.05 à altura de linha do corpo.

4. Medida e quebras de linha

Texto do corpo: 60 a 75 caracteres por linha. Defina max-width: 65ch em parágrafos, não na página inteira. Legendas e texto auxiliar podem ser mais estreitos.
Títulos de display: cerca de 12 a 20 caracteres por linha. Um título que atravessa uma tela de 1440px em uma linha não tem forma. Limite-o com max-width em ch ou uma largura de contêiner.
Equilibre cabeçalhos, quebre parágrafos de forma elegante:

h1, h2, h3, .text-display, .text-title { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

Ambos são progressivos: navegadores antigos os ignoram. balance uniformiza as linhas do cabeçalho; pretty impede que uma única palavra fique sozinha na última linha de um parágrafo.

Quebras manuais apenas entre frases, e verifique-as em todas as larguras em que o texto é renderizado. Um <br> que cai no meio da linha em um telefone é pior do que a quebra padrão. Prefira max-width em vez de <br>.
Palavras longas e URLs em conteúdo do usuário precisam de overflow-wrap: anywhere em seu contêiner, ou empurram o layout para os lados no celular.
Truncamento é o último recurso. Trunque labels de linha única em UI apertada (truncate no Tailwind). Se a parte oculta for importante, torne o texto completo acessível por teclado e toque (uma tooltip em um elemento focalizável, uma linha expansível, uma visualização de detalhes); um atributo title sozinho não é suficiente. Nunca trunque texto do corpo ou qualquer coisa que o usuário deve ler para agir.
Clamps de várias linhas (line-clamp-2): mantenha a altura de linha em 1.3 ou mais no texto fixado para que descendentes (g, y, p) não sejam cortados. Não adicione preenchimento inferior dentro do clamp; ele mostra o topo da próxima linha.

5. Cor do texto e contraste

Três cores de texto são suficientes: primária (cabeçalhos e corpo), secundária (texto de suporte, legendas, placeholders) e desabilitado. Defina-as como tokens. Evite fazer uma quarta diminuindo a opacidade em tempo real.
Pisos de contraste (WCAG 2.2 AA): 4.5:1 para texto do corpo e texto pequeno, 3:1 para texto de 24px para cima (ou 18.66px em negrito). Texto secundário e texto de placeholder também precisam de 4.5:1. Apenas o texto em controles desabilitados é isento.
Em fundos escuros, use off-white, não branco puro, para texto longo (cerca de 90 a 94% de luminosidade). O branco puro em quase preto ofusca.
Em superfícies coloridas ou matizadas, incline o texto secundário para o matiz da superfície em vez de usar um cinza neutro, que parece sujo na cor.

6. O que evitar

Sobrancelhas e kickers: labels pequenas em caixa alta com espaçamento entre letras acima de um título ("RECURSOS", "POR QUE NÓS", "COMO FUNCIONA"). Não as use. Elas são o sinal mais claro de UI de template. Se um título precisa de contexto, escreva um título melhor.
Labels em caixa alta em geral, incluindo pequenos cabeçalhos de seção em barras laterais, painéis de configurações, cartões, rodapés e controles de demonstração. Frase em maiúsculas e minúsculas (sentença) é lida mais rápido; dê a um pequeno cabeçalho peso (500 ou 600) e a cor de texto secundário. Reserve maiúsculas para abreviações genuínas (API, URL).
Texto gradiente e uma palavra colorida em um título. A ênfase vem do tamanho, peso e posição, não da tinta.
Itálico, em qualquer lugar. Use peso para ênfase e defina citações em vertical com uma regra ou um tamanho maior ao lado.
Fontes com serifa. Serifas de display e de texto são lidas como uma fantasia em um produto web. Escolha uma sans com personalidade.
Monoespaçada como decoração. Mono é para código, dados, IDs, teclas de teclado e números em colunas. Labels monoespaçadas em uma página de marketing são uma fantasia.
Parágrafos centralizados com mais de duas linhas. Centralize apenas títulos curtos e CTAs de linha única.
Texto justificado na web. Sem hifenização, ele cria rios de espaço em branco.
Sublinhados para qualquer coisa além de links.

7. Números, código e dados

Figuras tabulares em qualquer coisa que alinhe ou atualize: tabelas, preços, temporizadores, contadores, estatísticas. font-variant-numeric: tabular-nums; (Tailwind tabular-nums). Sem isso, um número de contagem trepida lateralmente conforme as larguras dos dígitos mudam.
Zero barrado para IDs e códigos onde 0 e O podem ser confundidos: font-variant-numeric: tabular-nums slashed-zero;.
Alinhe números ao final das células da tabela (text-align: end) para que as casas decimais se alinhem. Colunas de texto alinham no início.
Código: monoespaçado a cerca de 0.9em do texto ao redor para que sua altura-x corresponda. Código inline recebe um fundo sutil e preenchimento horizontal de 0.2em, sem borda. Blocos de código recebem altura de linha de cerca de 1.6 e rolagem horizontal, nunca quebrando a indentação.
Teclas de teclado (<kbd>) na fonte monoespaçada no tamanho de legenda.

8. Links

Sublinhe links dentro de texto corrido; apenas a cor falha para leitores daltônicos. Escopo para prosa para que listas de navegação e botões não sejam sublinhados (.prose é o que envolve seu artigo ou conteúdo longo):

:where(p, td, dd, figcaption, blockquote) a,
:where(.prose, article) li a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

Navegação, botões e links de cartão não precisam de sublinhados; sua posição já diz que são interativos.

9. Carregue fontes sem layout shift

Next.js: use next/font (next/font/google ou next/font/local). Ele auto-hospeda, pré-carrega e gera um fallback com métricas correspondentes, para que a página não salte quando a fonte chegar. Exponha-o como uma variável CSS e mapeie a fonte do tema para ela com @theme inline (para que a variável seja lida onde é usada, não resolvida uma vez em :root):

// app/layout.tsx
import { Onest } from "next/font/google";
const sans = Onest({ subsets: ["latin"], variable: "--font-brand", display: "swap" });
// <html lang="en" className={sans.variable}>

@theme inline {
  --font-sans: var(--font-brand), ui-sans-serif, system-ui, sans-serif;
}

Tamanho óptico: uma fonte com um eixo opsz (Inter, Roboto Flex, Fraunces) só o obtém se você carregá-lo: Inter({ subsets: ["latin"], axes: ["opsz"] }). Mantenha font-optical-sizing: auto para que texto pequeno receba o corte mais robusto e texto grande o mais refinado.
Em outros lugares: auto-hospede WOFF2, font-display: swap, pré-carregue apenas um ou dois arquivos usados acima da dobra e defina size-adjust, ascent-override e descent-override em uma fonte fallback local para que a troca não desloque o layout.
Carregue apenas o que você usa. Prefira um arquivo de fonte variável em vez de seis pesos estáticos. Subconjunto para os scripts que você oferece.

10. Detalhes de renderização

-webkit-font-smoothing: antialiased em temas escuros faz o texto claro parecer menos inchado no macOS. Deixe temas claros no padrão.
Defina ::selection para o tom da marca e mantenha-o legível. O azul padrão do navegador é um sinal de que a página não foi finalizada.
Use pontuação real na cópia: aspas curvas (“ ” ‘ ’), o caractere de reticências (…) e o sinal de multiplicação (×) em dimensões.
Respeite as configurações do usuário: dimensione o texto em rem, nunca bloqueie o zoom e verifique se o texto ainda se encaixa em 200% do tamanho do texto e com espaçamento maior entre letras e linhas.

wensity/wensity-typography

O que é wensity-typography?

Perguntar na sua IA favorita

Documentação

Wensity Typography

1. Escolha famílias

2. Defina funções, não tamanhos

3. Altura de linha e espaçamento entre letras

4. Medida e quebras de linha

5. Cor do texto e contraste

6. O que evitar

7. Números, código e dados

8. Links

9. Carregue fontes sem layout shift

10. Detalhes de renderização

11. Verifique antes de terminar

Individual skills in this repo

wensity/wensity-layout

wensity/wensity-ui-copy

Habilidades Relacionadas

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me