Typography - Catálogo de Fontes

Catálogo de fontes de qualidade com contexto emocional e de design para cada uma.

Regra de Ouro

NUNCA usar fontes padrão do sistema:

• •❌ Arial, Helvetica, Verdana
• •❌ Times New Roman, Georgia
• •❌ Sans-serif/serif genérico

📚 CATÁLOGO DE FONTES

SANS-SERIF

Inter

• •Vibe: Neutra, profissional, tech
• •Sentimento: Confiável, moderna, eficiente
• •Quando usar: SaaS, dashboards, apps, interfaces, documentação técnica
• •Marcas similares: GitHub, Figma, Linear
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 600, 700

Plus Jakarta Sans

• •Vibe: Moderna, amigável, startup
• •Sentimento: Acessível, jovem, otimista
• •Quando usar: Startups, produtos consumer, landing pages friendly
• •Marcas similares: Notion, startups modernas
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 600, 700

DM Sans

• •Vibe: Geométrica, clean, minimal
• •Sentimento: Sofisticada, premium, discreta
• •Quando usar: Fintech, produtos premium, design minimalista
• •Marcas similares: Stripe (vibe similar)
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 700

Space Grotesk

• •Vibe: Futurista, tech, bold
• •Sentimento: Inovador, cutting-edge, ousado
• •Quando usar: Tech companies, crypto, AI, produtos futuristas
• •Marcas similares: Empresas de AI, Web3
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 700

Outfit

• •Vibe: Contemporânea, versátil, arredondada
• •Sentimento: Acolhedora, moderna, equilibrada
• •Quando usar: Saúde, wellness, apps de lifestyle, produtos inclusivos
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 600, 700

Poppins

• •Vibe: Geométrica, friendly, popular
• •Sentimento: Acessível, clara, universal
• •Quando usar: Apps mobile, produtos mass market, educação
• •Marcas similares: Duolingo (vibe)
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 600, 700

Manrope

• •Vibe: Clean, moderna, legível
• •Sentimento: Profissional, contemporânea, clara
• •Quando usar: Corporativo moderno, SaaS B2B, produtos enterprise
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 600, 700

Work Sans

• •Vibe: Humanista, editorial, versátil
• •Sentimento: Séria mas acessível, profissional
• •Quando usar: Mídia, editorial, corporativo, government
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 600, 700

Bricolage Grotesque

• •Vibe: Quirky, character, única
• •Sentimento: Criativa, divertida, memorável
• •Quando usar: Marcas criativas, agências, produtos com personalidade
• •Link: Google Fonts
• •Pesos recomendados: 400, 600, 700

Satoshi (similar: General Sans)

• •Vibe: Trendy, design-forward, premium
• •Sentimento: Sofisticada, atual, desejável
• •Quando usar: Agências de design, produtos de moda, portfolios
• •Link: Fontshare (grátis)
• •Pesos recomendados: 400, 500, 700

SERIF

Playfair Display

• •Vibe: Elegante, luxuosa, clássica
• •Sentimento: Romântica, sofisticada, tradicional com twist
• •Quando usar: Casamentos, moda, luxo, editorial elegante, restaurantes finos
• •Marcas similares: Revistas de moda, marcas de luxo
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 600, 700

Instrument Serif

• •Vibe: Editorial moderna, intelectual
• •Sentimento: Refinada, contemporânea, cultural
• •Quando usar: Blogs premium, revistas online, produtos culturais
• •Link: Google Fonts
• •Pesos recomendados: 400

Fraunces

• •Vibe: Warm, quirky, amigável
• •Sentimento: Acolhedora, autêntica, com personalidade
• •Quando usar: Food & beverage, marcas artesanais, produtos orgânicos
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 700

Source Serif Pro

• •Vibe: Clássica, legível, profissional
• •Sentimento: Confiável, séria, acadêmica
• •Quando usar: Publicações longas, documentos, jornalismo, livros
• •Link: Google Fonts
• •Pesos recomendados: 400, 600, 700

Libre Baskerville

• •Vibe: Tradicional, literária, atemporal
• •Sentimento: Clássica, confiável, estabelecida
• •Quando usar: Advocacia, academia, instituições tradicionais
• •Link: Google Fonts
• •Pesos recomendados: 400, 700

Lora

• •Vibe: Contemporânea-clássica, balanced
• •Sentimento: Elegante mas acessível, storytelling
• •Quando usar: Blogs, narrativas, biografias, conteúdo pessoal
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 600, 700

DM Serif Display

• •Vibe: Bold, impactante, editorial
• •Sentimento: Forte, confiante, statement
• •Quando usar: Headlines de impacto, magazines, campanhas
• •Link: Google Fonts
• •Pesos recomendados: 400

DISPLAY (Headlines)

Syne

• •Vibe: Bold, artística, experimental
• •Sentimento: Criativa, ousada, avant-garde
• •Quando usar: Agências criativas, arte, música, cultura
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 600, 700, 800

Unbounded

• •Vibe: Futurista, arredondada, fun
• •Sentimento: Playful, moderna, tech-friendly
• •Quando usar: Games, apps divertidos, tech consumer, kids
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 700, 900

Climate Crisis

• •Vibe: Variável, ativista, impactante
• •Sentimento: Urgente, ambiental, consciente
• •Quando usar: Causas ambientais, ONGs, projetos sociais
• •Link: Google Fonts
• •Pesos: Variable

Bebas Neue

• •Vibe: Condensada, impactante, bold
• •Sentimento: Forte, direta, esportiva
• •Quando usar: Esportes, fitness, headlines de impacto
• •Link: Google Fonts
• •Pesos recomendados: 400

MONOSPACE

JetBrains Mono

• •Vibe: Developer, técnica, legível
• •Sentimento: Profissional, código, precisa
• •Quando usar: Code blocks, dev tools, terminais, documentação técnica
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 700

Fira Code

• •Vibe: Developer, ligatures, moderna
• •Sentimento: Coding elegante, developer-friendly
• •Quando usar: IDEs, code snippets, produtos para devs
• •Link: Google Fonts
• •Pesos recomendados: 400, 500, 700

Space Mono

• •Vibe: Retro-futurista, quirky
• •Sentimento: Tech vintage, artística
• •Quando usar: Projetos criativos tech, retro-modern
• •Link: Google Fonts
• •Pesos recomendados: 400, 700

🎯 GUIA RÁPIDO POR CONTEXTO

💡 DICAS DE IMPLEMENTAÇÃO

Google Fonts (recomendado)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Tailwind v4

@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Playfair Display", serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

CSS Variables

:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
}

🎨 PAIRINGS CLÁSSICOS

⚡ PERFORMANCE

1. •Sempre usar preconnect
2. •Limitar pesos (máx 4 por fonte)
3. •display=swap sempre
4. •Subset se possível (latin)

📋 CHECKLIST DE PROJETO

• • Definir contexto/vibe do projeto
• • Escolher fonte principal (body)
• • Escolher fonte display (opcional)
• • Definir pesos necessários
• • Implementar com preconnect
• • Testar em mobile
• • Verificar loading performance

Catálogo curado por Pip + Matheus. Fontes: Google Fonts, Fontshare, Typewolf.