Tipografia

Pareamento sans+serif com papéis semânticos fixos. Instrument Sans para corpo e UI; Fraunces para display e voz.

Pareamento

O sistema usa exatamente duas famílias tipográficas com papéis semânticos fixos. --type-family-sans (Instrument Sans) cobre leitura contínua, UI e labels — qualquer lugar onde a forma precisa sumir e o conteúdo precisa fluir. --type-family-serif (Fraunces) cobre display, valores de destaque e headlines — onde o dado "fala" com a voz do Peppe. A alternância é semântica, nunca decorativa: trocar de família por estética desfaz a distinção que faz o pareamento funcionar. Ambos os registros visuais V-A e V-B usam o mesmo pareamento — V-B não troca de tipo, muda por paleta e contexto de superfície.

  • UI · SansNúcleo · sempre
    Família
    Instrument Sans (variable)
    Token
    --type-family-sans
    Pesos
    Regular 400 · Medium 500 · Bold 700 · Italic 400
    Uso
    Corpo, ações, navegação, kickers — todo texto funcional de interface
    Tracking
    0 (corpo) · +0.08em (kicker xs uppercase)
  • Display · SerifNúcleo · sempre
    Família
    Fraunces (variable, opsz 9–144, axis SOFT 0–100)
    Token
    --type-family-serif
    Flavor
    Soft (axis SOFT 50) aplicado globalmente em :root
    Pesos
    Regular 400 · Medium 500 · Italic 400 (variable 400–600)
    Uso
    H1/H2, valor de destaque (Balance Card), headline de seção — papel de voz, somente em ≥ 32px. Em títulos: Medium (500); tagline italic e marcadores numéricos: Regular (400)
    Tracking
    −0.04em (-4%) em display

Escala

Sete tamanhos, nenhum fora dos tokens. A hierarquia se constrói combinando tamanho, peso e tracking — não por corrida de pixel. Em qualquer tela, o máximo de tamanhos simultâneos é cinco.

Escala serif para substantivos de valor

  1. Display LG80px / 1.1Saldo projetado
  2. Display64px / 1.1R$ 1.200,00
  3. XL40px / 1.3Antecipar parcela

Escala sans para verbos e instruções

  1. LG20px / 1.4 · 500Cuidei disso. Já corrigi a parcela de novembro.
  2. MD16px / 1.5 · 400Você gastou R$ 420 acima do previsto esse mês. Dá pra remanejar do próximo.
  3. SM14px / 1.5 · 400Última atualização há 2 minutos · sincronizado com Itaú
  4. XS · Kicker12px / 1.1 · 500 · +0.08emFUNDAMENTOS · TIPOGRAFIA

Escala web

Esta escala é a leitura semântica HTML do vocabulário tipográfico — mapeia cada tag (H1 a H6, <p>, <a>) pra um conjunto fechado de tokens canônicos. É a régua de quando ouvimos "como estilizar um H2". Não cria tokens novos: prescrição semântica sobre o vocabulário já fechado.

Headings — H1 a H6
H1 heroSaldo projetado
Família
--type-family-serif
Tamanho
--type-size-display-lg · 80px desktop · 64px tablet/mobile
Peso
--type-weight-medium
Leading
--type-leading-tight
Tracking
--type-tracking-tight
Papel
Hero de landing, exercício tipográfico monumental — uso restrito.
H1 páginaCenografia mutável
Família
--type-family-serif
Tamanho
--type-size-display · 64px desktop · 56px tablet/mobile
Peso
--type-weight-medium
Leading
--type-leading-tight
Tracking
--type-tracking-tight
Papel
H1 padrão de página de produto, valor de destaque (Balance Card).
H2Antecipar parcela
Família
--type-family-serif
Tamanho
--type-size-2xl · 48px desktop · 40px tablet/mobile
Peso
--type-weight-medium
Leading
--type-leading-tight
Tracking
--type-tracking-tight
Papel
Headline de seção, H2 padrão de página.
H3Cuidei disso. Já corrigi a parcela.
Família
--type-family-serif
Tamanho
--type-size-heading-lg · 32px (fixo todos os breakpoints)
Peso
--type-weight-medium
Leading
--type-leading-tight
Tracking
--type-tracking-tight
Papel
Headline de bloco interno, subheader, título de step/card. Serif no limiar exato ≥32px.
H4Compromissos do mês
Família
--type-family-sans
Tamanho
--type-size-heading-md · 24px (fixo todos os breakpoints)
Peso
--type-weight-semibold
Leading
--type-leading-tight
Tracking
--type-tracking-normal
Papel
Título de bloco interno. Sans obrigatória — abaixo do limiar serif ≥32px.
H5Próximos vencimentos
Família
--type-family-sans
Tamanho
--type-size-sm · 14px
Peso
--type-weight-medium
Leading
--type-leading-snug
Tracking
--type-tracking-normal
Papel
Subtítulo de bloco fino. Uso raro — hierarquia leve dentro de seção densa.
H6Detalhe da operação
Família
--type-family-sans
Tamanho
--type-size-xs · 12px
Peso
--type-weight-medium
Leading
--type-leading-tight
Tracking
--type-tracking-normal
Papel
Quase nunca usado. Heading semântico de último nível — não confundir com kicker visual (que usa uppercase tracking-loose). H6 mantém case original.
Texto corrido e link
<p>Você gastou R$ 420 acima do previsto esse mês. Dá pra remanejar do próximo.
Família
--type-family-sans
Tamanho
--type-size-md · 16px
Peso
--type-weight-regular
Leading
--type-leading-normal
Tracking
--type-tracking-normal
Cor
--color-ink-primary
Largura
max-width: 65ch (legibilidade)
Papel
Body padrão. Estilo canônico em .peppe-foundation__paragraph (foundation.css).
<a>Saiba mais sobre a régua de leading nesta página.
Cor
--color-functional-info
Decoration
underline (transparente no rest, cor info no :hover)
Offset
3px
Focus
outline 2px sólido --color-functional-info
Demais
herda família, tamanho, peso, leading do contexto
Papel
Link inline. Estilo canônico em .peppe-foundation__callout a (foundation.css).

Hierarquia

Hierarquia se constrói pelo trio peso + tracking + alternância sans/serif. Escalada de pixel sozinha não constrói hierarquia — dois tamanhos vizinhos de 1px de diferença somem no olho do leitor. O limite de três pesos simultâneos por tela é o que mantém o ritmo legível; quatro ou mais pesos competem entre si e dissolvem a grade. Tracking ajustado em display (tight em serif grande, loose em xs uppercase); em corpo, o tracking fica normal.

TokenValorPapel típico
--type-weight-regular400Corpo de texto, descrições, conteúdo de leitura longa
--type-weight-medium500Labels, kickers, itens de nav, texto que precisa de presença sem bold; títulos serif (display ≥32px) — H1/H2 de página, valor de destaque (Balance Card), headline de seção. Combina com tracking-tight e flavor Soft (SOFT 50). Refino M.13 (2026-05-04): peso de títulos serif migrado de SemiBold 600 pra Medium 500.
--type-weight-semibold600Reservado — sem consumidor ativo após Refino M.13 (2026-05-04). Token preservado pra reversibilidade caso a calibragem visual de Medium 500 em títulos serif precise voltar pra 600.
--type-weight-bold700Destaque pontual em corpus — nunca título inteiro em bold (serif medium já carrega o peso visual necessário em títulos)
--type-tracking-tight-0.04emDisplay e xl em serif — compacta o tipo grande, melhora a leitura em tamanhos altos. Refinado em Story M.10 (de -0.02em pra -0.04em) após avaliação visual com Fraunces; mantido após Refino M.13 que migrou peso de títulos pra Medium 500.
--type-tracking-normal0Corpo e texto de UI — padrão sem intervenção
--type-tracking-loose0.08emKickers e labels em xs uppercase — abre o tipo pequeno para legibilidade
--type-leading-tight1.1Display — entrelinha compacta para blocos de tipo grande
--type-leading-snug1.3H2/H3, subheaders — entrelinha intermediária
--type-leading-normal1.5Corpo de texto — entrelinha confortável para leitura contínua

Regras de uso

  • Serif somente em tamanhos ≥ 32px (limiar duro). A família --type-family-serif é autorizada em: --type-size-heading-lg (32px fixo — limiar exato, H3), --type-size-2xl (48px desktop · 40px tablet/mobile, H2), --type-size-xl (40px desktop · 32px tablet/mobile), --type-size-display (64px desktop · 56px tablet/mobile) e --type-size-display-lg (80px desktop · 64px tablet/mobile). Em --type-size-heading-md (24px), --type-size-lg (20px), md, sm e xs a serif é violação de gramática — usar sans. Texto corrido nunca recebe serif, independente do tamanho.
  • Mínimo 2px de diferença entre tamanhos vizinhos. Saltos menores (ex.: 14px e 15px juntos) são imperceptíveis e introduzem ruído na grade tipográfica sem construir hierarquia.
  • Máximo 5 tamanhos em uma mesma tela. A escala tem 7 tamanhos; usar todos ao mesmo tempo é violação. Cada tela escolhe os tamanhos necessários para a sua hierarquia, sem uso decorativo de variação.
  • Alternância sans/serif é semântica, nunca decorativa. Sans = leitura. Serif = voz. Trocar de família por "ficar bonito" desfaz a distinção que faz o pareamento funcionar.
  • Máximo 3 pesos simultâneos. regular + medium + bold em uma tela é o limite. Usar os três pesos ao mesmo tempo é exceção — o padrão é dois.
  • Faces canônicas: Instrument Sans (UI) + Fraunces (display). Sans definitiva desde polish #95 (2026-04-21); Fraunces fixada em 2026-05-03 fechando o placeholder de Instrument Serif. Decisões de layout devem continuar agnósticas a métricas específicas da face — a troca de qualquer face é via token único (--type-family-sans ou --type-family-serif), e o sistema deve seguir funcionando sob qualquer face que respeite o pareamento sans editorial + serif retrô-70s.
  • Cor de texto sempre em --color-ink-*. Nunca usar cor funcional (--color-functional-*) nem acento V-B em texto corrido. Cor funcional em texto aparece apenas em chips e badges de estado, nunca em body, heading ou label.

Amostras por papel

Seis configurações canônicas — cada uma combina tamanho, família, peso, tracking e leading conforme o papel na interface. São o ponto de partida para qualquer novo componente ou superfície.

Display — H1 / valor de destaque
R$ 2.140
Família
--type-family-serif
Tamanho
--type-size-display (64px desktop · 56px tablet+mobile)
Peso
--type-weight-medium
Tracking
--type-tracking-tight
Leading
--type-leading-tight
XL — título de seção / componente
Cenografia mutável
Família
--type-family-serif
Tamanho
--type-size-xl (40px desktop · 32px tablet+mobile)
Peso
--type-weight-medium
Tracking
--type-tracking-tight
Leading
--type-leading-snug
Nota
H2 web usa --type-size-2xl (48px desktop · 40px tablet/mobile). XL continua ativo em componentes (Balance Card, section hero).
LG — destaque UI / subheader
Semana tranquila
Família
--type-family-sans
Tamanho
--type-size-lg (20px)
Peso
--type-weight-medium
Tracking
--type-tracking-normal
Leading
--type-leading-snug
Nota
H3 web usa --type-size-heading-lg (32px serif fixo). LG continua ativo em componentes (Commitment Card, Quick Actions).
MD — corpo padrão
Nenhum vencimento nos próximos 7 dias.
Família
--type-family-sans
Tamanho
--type-size-md (16px)
Peso
--type-weight-regular
Tracking
--type-tracking-normal
Leading
--type-leading-normal
Nota
H4 web usa --type-size-heading-md (24px sans semibold fixo). MD continua como corpo padrão e em componentes.
SM — texto de apoio
Boleto pago. R$ 127,30. Saldo projetado: R$ 2.140.
Família
--type-family-sans
Tamanho
--type-size-sm (14px)
Peso
--type-weight-regular
Tracking
--type-tracking-normal
Leading
--type-leading-normal
XS — kicker / label
SALDO PROJETADO EM 15/MAI
Família
--type-family-sans
Tamanho
--type-size-xs (12px)
Peso
--type-weight-medium
Tracking
--type-tracking-loose
Leading
--type-leading-tight
Transform
uppercase

Relação com a voz

Serif carrega voz; sans carrega UI. Quando o usuário vê um valor grande em serif, lê como dado que o Peppe entregou — é a voz do produto materializada em forma. Quando vê um label em sans caps, lê como etiqueta do sistema. A alternância tipográfica opera a mesma distinção de registros A/B do content design, mas em forma visual: sans = leitura funcional; serif = momento de voz. Ver .claude/content-design/voice-and-tone.md §3.1 e .claude/ui-design/visual-language.md §8 (paralelismo voz-forma).

Referência operacional de voz: Content › Voz & Tom §3.1 — matriz de tom por superfície.

Anti-padrões referenciados

Anti-padrão com relação direta a decisões tipográficas. O arquivo-fonte está em .claude/ui-design/anti-patterns.md. Link permanente será atualizado quando a seção de anti-padrões visuais for publicada.

  • #9 — Variação excessiva de tamanho tipográficoUsar mais de 5 tamanhos distintos numa mesma tela, ou construir hierarquia escalando pixels em vez de peso e tracking. A escala de 7 tamanhos é o vocabulário total — cada tela usa o subconjunto necessário.

Consultar .claude/ui-design/anti-patterns.md na íntegra para demais anti-padrões visuais.