🔤 Anatomia da Tipografia
Antes de escolher fontes, e preciso entender o vocabulario. Conhecer os termos tecnicos permite comunicar com precisao - tanto com designers quanto com IAs.
📐 Termos Essenciais
Serif vs Sans-serif
Serif tem "pes" nas letras (Times). Sans-serif nao tem (Arial).
Font Weight
Espessura: Light (300), Regular (400), Medium (500), Bold (700)
Line-height
Espacamento entre linhas. Ideal: 1.5-1.75 para corpo de texto.
Letter-spacing (Tracking)
Espaco entre caracteres. Titulos podem ser mais apertados.
X-height
Altura das letras minusculas. Afeta legibilidade.
Kerning
Ajuste de espaco entre pares especificos de letras.
👁️ Comparacao Visual: Serif vs Sans-serif
🎯 Vocabulario para Prompts
Use: fonte sans-serif moderna (Inter, SF Pro),
font-weight 600 para titulos,
line-height 1.6 para legibilidade,
letter-spacing -0.02em em headlines.
📏 Escala Tipografica
Uma escala tipografica e um sistema de tamanhos harmonicos. Assim como notas musicais, tamanhos de fonte que seguem uma proporcao matematica criam ritmo visual.
🎵 Escalas Comuns
Major Third (1.25)
Base 16px: 16 → 20 → 25 → 31 → 39 → 49
Perfect Fourth (1.333)
Base 16px: 16 → 21 → 28 → 38 → 50 → 67
💻 Escala do Tailwind CSS
Tailwind usa uma escala pre-definida que funciona bem para a maioria dos projetos:
🎯 Vocabulario para Prompts
Use: escala tipografica consistente,
tamanhos Tailwind (text-sm, text-xl, text-4xl),
proporcao Major Third,
hero title 48-64px.
📖 Legibilidade vs Leiturabilidade
Dois conceitos relacionados mas distintos. Legibilidade e sobre distinguir caracteres individuais. Leiturabilidade e sobre conforto ao ler blocos de texto.
📝 Legibilidade
- • Distinguir "I", "l", "1" facilmente
- • X-height generoso
- • Caracteres bem diferenciados
- • Contraste claro com fundo
📚 Leiturabilidade
- • Line-height adequado (1.5-1.75)
- • Largura de linha 50-75 caracteres
- • Paragrafos bem espacados
- • Tamanho minimo 16px em telas
⚖️ Comparacao: Largura de Linha
✓ Ideal (~65 caracteres)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
✗ Muito Larga (100+ caracteres)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
🎯 Vocabulario para Prompts
Use: max-width 65ch para paragrafos,
fonte com boa legibilidade (Inter, system-ui),
line-height 1.6-1.75 para corpo,
tamanho minimo 16px.
🎭 Personalidade Tipografica
Cada fonte tem personalidade. A escolha da fonte comunica valores e emocoes antes mesmo de ler as palavras. Escolher a fonte errada pode sabotar sua mensagem.
🎨 Personalidades Tipograficas
Tradicional, elegante, confiavel, editorial (Times, Georgia, Playfair)
Moderna, clean, tech, minimalista (Inter, SF Pro, Helvetica)
Tecnica, codigo, retro, precisa (Fira Code, JetBrains Mono)
Impactante, chamativa, headlines (Montserrat Bold, Poppins)
💼 Fontes por Setor
Tech / Startups
Inter, SF Pro, Roboto, Poppins
Financas / Legal
Times, Georgia, Merriweather
Moda / Luxo
Playfair Display, Cormorant
🎯 Vocabulario para Prompts
Use: fonte moderna e tech (Inter),
tipografia elegante serif para editorial,
headlines impactantes em Montserrat Bold,
personalidade profissional e confiavel.
🤝 Pareamento de Fontes
Usar duas fontes cria interesse visual. A regra de ouro: contraste com harmonia. Fontes muito parecidas criam confusao; muito diferentes, caos.
📋 Regras de Pareamento
- 1. Maximo 2 fontes - Uma para titulos, uma para corpo
- 2. Serif + Sans-serif - Combinacao classica que sempre funciona
- 3. Mesma superfamilia - Ex: Roboto + Roboto Slab
- 4. Contraste de peso - Titulo bold, corpo regular
✨ Combinacoes Populares
⚠️ Erros Comuns
- ✗ Usar 3+ fontes diferentes
- ✗ Combinar duas fontes muito similares (Arial + Helvetica)
- ✗ Duas fontes decorativas/display juntas
- ✗ Fontes com personalidades conflitantes
🎯 Vocabulario para Prompts
Use: pareamento Playfair + Inter,
serif para headlines, sans-serif para corpo,
maximo 2 familias tipograficas,
contraste tipografico entre titulo e texto.
📱 Tipografia Responsiva
Tamanhos de fonte que funcionam no desktop podem ser enormes no mobile. Tipografia responsiva adapta tamanhos conforme a tela.
📐 Tecnicas de Tipografia Responsiva
1. Breakpoints Fixos
Tamanhos diferentes para cada breakpoint
text-2xl md:text-4xl lg:text-5xl
2. Clamp()
Escala fluida entre minimo e maximo
font-size: clamp(1.5rem, 4vw, 3rem)
3. Viewport Units
Tamanho proporcional a viewport
font-size: calc(1rem + 2vw)
📊 Guia de Tamanhos por Dispositivo
| Elemento | Mobile | Tablet | Desktop |
|---|---|---|---|
| Hero Title | 32-40px | 48-56px | 64-80px |
| Section Title | 24-28px | 32-36px | 40-48px |
| Body Text | 16px | 16-18px | 16-18px |
| Caption | 12-14px | 12-14px | 12-14px |
🎯 Vocabulario para Prompts
Use: tipografia responsiva com clamp(),
hero title 32px mobile, 64px desktop,
tamanhos Tailwind responsivos (text-2xl md:text-4xl),
corpo 16px fixo em todos devices.
📝 Resumo do Modulo
Proximo Modulo:
1.4 - Teoria das Cores: Psicologia e sistemas de cor