Fonte base e espaçamento
Fonte base define o texto corrido de toda a interface — configure após a fonte principal.
Fonte principal vs. fonte base
A evob permite configurar dois níveis de tipografia:
| | Fonte principal | Fonte base | |---|---|---| | Aplicada em | Títulos, cabeçalhos, botões | Texto corrido, descrições, parágrafos | | Impacto visual | Alto — define a personalidade da interface | Mais sutil — define a legibilidade | | Quando configurar | Primeiro | Depois, se necessário |
Para a maioria das operações, configurar apenas a fonte principal já é suficiente. A fonte base é útil quando você quer usar uma família tipográfica para os títulos e outra para o corpo de texto — uma prática comum em design editorial.
Onde configurar
Plataforma > Configurações > Identidade visual > Tipografia > Fonte baseQuando usar fonte base diferente da principal
| Situação | Recomendação | |---|---| | Mesma família para tudo | Não precisa — deixe a fonte base igual à principal | | Título display + corpo legível | Configure fonte base como fonte de leitura (ex: Inter, Open Sans) | | Marca com tipografia editorial complexa | Configure combinações como Playfair Display (título) + Nunito (corpo) |
Configurações de espaçamento
Junto à fonte base, você pode configurar:
| Parâmetro | O que controla | Padrão | |---|---|---| | Tamanho base | Tamanho do texto corrido em px | 16 px | | Altura de linha | Espaço entre linhas do texto corrido | 1,5 | | Espaçamento entre letras | Rastreamento do texto (letter-spacing) | 0 |
Esses valores afetam a legibilidade em toda a vitrine e no AVA. O padrão de 16 px com altura de linha 1,5 é considerado o mais seguro para leitura longa em tela.
Boas práticas
✅ Faça
- Mantenha o tamanho base em 15–17 px — abaixo de 14 px dificulta a leitura para parte dos alunos
- Use altura de linha entre 1,4 e 1,7 para texto corrido — muito comprimido cansa, muito espaçado desconcentra
- Teste a configuração em um parágrafo longo de descrição de curso antes de publicar
❌ Não faça
- Reduzir o tamanho base para "caber mais conteúdo na tela" — alunos em mobile já enfrentam telas pequenas; diminuir mais prejudica a experiência
- Usar fontes decorativas como fonte base — fontes ornamentais ficam ilegíveis em corpo de texto longo
- Configurar um espaçamento entre letras negativo — pode melhorar visualmente em títulos grandes, mas prejudica leitura em texto corrido
Erros comuns
"Configurei a fonte base mas o texto de descrição de curso não mudou"
Algumas áreas do editor de conteúdo têm estilo próprio que sobrescreve a fonte base. Para forçar a aplicação, use CSS personalizado em Loja > Aparência > CSS personalizado com a regra `body, p, div { font-family: 'NomeDaFonte', sans-serif !important; }`.
"A combinação de fontes ficou estranha — uma parece muito maior que a outra"
Fontes de corpos ópticos diferentes têm alturas aparentes distintas mesmo no mesmo tamanho em px. Ajuste o tamanho base da fonte de corpo para compensar — se a fonte de título parece maior, reduza o tamanho base em 1–2 px.
"Não sei qual fonte usar como base"
Se a fonte principal for decorativa ou display (Oswald, Bebas Neue), use Inter, Nunito ou Open Sans como base. Se a fonte principal for neutra (Poppins, Montserrat), você pode usar a mesma para tudo — não há necessidade de fonte base diferente.
"O espaçamento entre linhas ficou muito apertado em mobile"
O espaçamento configurado é aplicado igualmente em desktop e mobile. Em mobile, prefira altura de linha de pelo menos 1,5 para garantir legibilidade. Se estiver abaixo disso, aumente via CSS personalizado apenas para mobile usando media queries.
Próximos passos
- 📖 Tipografia personalizada
- 📖 Acessibilidade e contraste
- 📖 Preview de identidade visual
- 📖 Performance e tempo de carregamento
Foi útil este artigo? 👍 👎 Falar com CS (em produção) · Pergunte ao Vob 🤖 (em produção) Última atualização: 2026-05-06