02.02 — Tipografia
TIPO É ARMA. NÃO DECORAÇÃO.
Duas famílias principais. Uma grita (display), outra fala (body). Uma técnica (mono). Nunca confundir os papéis.
Display Primária
Bebas Neue
Google Fonts — free
MARKETING SEM ROI É VAIDADE
Uso
Headlines de posts, títulos de carrossel, texto grande em Reels.
Regra
SEMPRE UPPERCASE. Sempre. Letter-spacing: 0–4px.
Display Alternativa
Oswald
Google Fonts — free
ENGRENAGEM 01 — ATRAIR DEMANDA
Uso
Subtítulos, labels grandes, quando Bebas é excessivo.
Regra
Uppercase preferido. Weights: 600 e 700.
Conteúdo sem estratégia alimenta ego. Conteúdo com estratégia alimenta o caixa.
Uso
Corpo de texto, legendas, descrições, qualquer texto longo.
Regra
NUNCA uppercase em DM Sans. Weights: 300, 400, 500, 700.
Monoespacada
JetBrains Mono
Google Fonts — free
AGÊNCIA DIGITAL — DARK N' BLACK
Uso
Labels, badges, categorias, tags, dados técnicos, código.
Regra
Sempre uppercase. Letter-spacing 2–4px. Mínimo absoluto: 14px.
Escala Tipográfica Oficial
8 tamanhos. Nenhum abaixo de 14px. Cada token mapeia para um papel semântico — usar o token certo garante consistência visual em toda a aplicação.
--text-hero
72px · Regular (único disponível)
Título principal de página, hero section. Um por página.
--text-display-lg
48px · Regular / 700
Título de seção prioritária, H2. Máximo 3 por página.
--text-display-md
36px · 700
Subseção com impacto, H3. Títulos de bloco em manuais.
--text-display-sm
24px · 600
Títulos de card, H4, nomes de componente em destaque.
--text-body-lg
18px · 400 / 500
Duas famílias principais. Uma grita, outra fala.
Introdução de página, subtítulos, lead paragraph.
Conteúdo sem estratégia alimenta ego. Com estratégia, alimenta o caixa.
Corpo padrão de documentação, parágrafos, descrições.
Especificações técnicas e contexto de suporte ao conteúdo principal.
Conteúdo secundário, captions, specs em tabelas, notas.
--text-label
14px · 400 / 700
Labels, badges, categorias, metadata. UPPERCASE + letter-spacing. Mínimo absoluto do sistema.
Tokens CSS
src/styles/tokens.css — famílias
--font-display: 'Bebas Neue', sans-serif;
--font-display-alt: 'Oswald', sans-serif;
--font-body: 'DM Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
src/styles/tokens.css — escala de tamanhos
/* Escala tipográfica — mínimo absoluto: 14px */
--text-hero: 72px; /* H1 de página / hero */
--text-display-lg: 48px; /* H2 de seção prioritária */
--text-display-md: 36px; /* H3 subseção com impacto */
--text-display-sm: 24px; /* H4 títulos menores */
--text-body-lg: 18px; /* Subtítulos e introduções */
--text-body: 16px; /* Corpo padrão de documentação */
--text-body-sm: 14px; /* Conteúdo secundário */
--text-label: 14px; /* Labels, captions, mono — mínimo absoluto */
Use os tokens CSS. var(--text-body), var(--text-label), etc. Nunca declare fontSize arbitrário — o token garante consistência.
Nenhum texto abaixo de 14px. Nunca. Nem labels, nem captions, nem badges. 14px é o limite absoluto do sistema.
Hierarquia visual clara. Cada página deve ter uma progressão legível: hero → display → body. O contraste de tamanho cria o ritmo.
Sem mistura de papéis. DM Sans não é display. Bebas Neue não é corpo. JetBrains Mono não é título de seção.
