Faz o texto ser entendido rápido
Uma fonte boa para texto precisa ser confortável. Em sites, a pessoa não quer “decifrar” o conteúdo. Ela precisa bater o olho e entender.
Todos os itens deve seguir o Alinhamento
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Contraste é muito importante
Contraste é muito importante
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Contraste é muito importante
Contraste é muito importante
Espaçamento dentro dos itens
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Espaçamento entre os itens dos itens
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Espaçamento dentro dos containers
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Espaçamento dentro dos containers
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Repetição de formas, cores, espaçamentos e fontes
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Proporção
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Hierarquia
Este é o título
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Sobre Mim
Oi, eu sou a Micaela Soares
Sou empresária e criadora do canal Descomplicando Sites, a maior referência em WordPress e Elementor do Brasil. Fundadora da DS Criação de Sites, comecei do zero trabalhando como estudante e criando conteúdo, até transformar web design no meu negócio principal.
Nos últimos anos, ajudei mais de 200 mil pessoas a aprender a criar sites com WordPress, sem enrolação e com foco no que gera resultado real para quem vive disso. Agora chegou a hora de te ensinar a dominar o serviço que mais paga bem no mercado de web design: landing pages profissionais para lançamentos.
Sobre Mim
Oi, eu sou a Micaela Soares
Sou empresária e criadora do canal Descomplicando Sites, a maior referência em WordPress e Elementor do Brasil. Fundadora da DS Criação de Sites, comecei do zero trabalhando como estudante e criando conteúdo, até transformar web design no meu negócio principal.
Nos últimos anos, ajudei mais de 200 mil pessoas a aprender a criar sites com WordPress, sem enrolação e com foco no que gera resultado real para quem vive disso. Agora chegou a hora de te ensinar a dominar o serviço que mais paga bem no mercado de web design: landing pages profissionais para lançamentos.
Tipografia: como escolher e combinar fontes
A fonte muda a sensação do projeto antes mesmo da pessoa ler o texto. Nesta aula, você vai entender como escolher fontes para sites, landing pages e artes digitais sem deixar o visual amador ou confuso.
1. O que a tipografia resolve em uma página?
A tipografia organiza a leitura. Ela mostra o que é título, o que é texto de apoio, onde a pessoa deve clicar e qual sensação aquele projeto quer transmitir.
Mostra o que vem primeiro
Tamanho, peso e estilo ajudam a guiar o olhar. O título chama, o subtítulo explica, o botão conduz para a ação.
Passa a sensação certa
Uma clínica pede clareza e confiança. Uma marca infantil pode pedir arredondamento e leveza. Uma empresa de tecnologia pode pedir precisão e modernidade.
2. Principais famílias de fontes
Antes de combinar, é preciso reconhecer o papel de cada tipo de fonte.
Sans serif
Moderna e limpa
Muito usada em sites, sistemas, landing pages e marcas digitais. Ex.: Inter, Poppins, Montserrat, Lato.
Serif
Elegante e clássica
Passa sofisticação, tradição e autoridade. Funciona bem em títulos. Ex.: Playfair Display, Lora, Merriweather.
Monospace
Código e precisão
Lembra programação, dados e tecnologia. Boa para detalhes, etiquetas e interfaces técnicas. Ex.: Roboto Mono.
Display
Personalidade
Fontes mais marcantes. Use pouco, geralmente em títulos, selos ou chamadas específicas.
3. Regras simples para escolher fonte
Essas regras ajudam a evitar o visual bagunçado e deixam o projeto com mais intenção.
1
Use no máximo 2 famílias principais
Uma fonte para títulos e uma fonte para textos já resolve a maioria dos projetos. Com muitas fontes, a página parece um mural de recados.
2
Crie contraste sem brigar
Você pode combinar uma serif elegante com uma sans limpa, ou uma sans forte no título com uma sans mais neutra no corpo. O contraste precisa ajudar a leitura, não disputar atenção.
3
Escolha fonte de texto pela leitura, não pela beleza
Texto corrido precisa ser simples, espaçado e confortável. Fontes muito desenhadas podem ficar lindas no título, mas cansativas em parágrafos.
4
Use pesos para criar hierarquia
Em vez de trocar de fonte toda hora, use variações da mesma família: regular no texto, semibold no subtítulo, bold ou extra bold no título.
5
Teste em tamanho real
Uma fonte pode parecer boa no print do Google Fonts e ficar fraca no layout. Sempre teste no botão, no título, no parágrafo e no celular.
4. Exemplo: quando a combinação dá errado ou certo
O problema geralmente não é a fonte em si. É a falta de papel claro para cada uma.
Confuso
Site profissional
Você merece um projeto completo, moderno e pensado para atrair mais clientes todos os dias.
Agende sua consultoria
Mais coerente
Site profissional
Você merece um projeto completo, moderno e pensado para atrair mais clientes todos os dias.
Agende sua consultoria
5. Combinações prontas para usar
Aqui estão combinações que funcionam bem em sites e landing pages. Use como ponto de partida e ajuste ao nicho.
Elegante + legível
Consultoria premium
Playfair Display no título cria sofisticação. Lato no texto mantém a leitura simples.
Digital + moderno
Produto digital
Space Grotesk no título dá um ar tecnológico. Inter segura bem texto e interface.
Forte + limpo
Landing page de venda
Montserrat chama atenção no título. Open Sans deixa o conteúdo claro.
Autoridade + conforto
Artigo ou blog
Merriweather funciona bem para títulos editoriais. Source Sans 3 deixa a página mais leve.
Leve + amigável
Clínica humanizada
Nunito traz arredondamento e acolhimento. Lato evita que o visual fique infantil.
Criativo + comercial
Cardápio especial
Abril Fatface chama atenção em chamadas gastronômicas. Rubik mantém o restante organizado.
6. Fontes muito usadas em sites
Essas fontes aparecem bastante em projetos digitais porque são versáteis, têm boa leitura e geralmente possuem vários pesos.
| Fonte | Exemplo visual | Quando usar |
|---|---|---|
| Roboto | Texto limpo para interfaces | Apps, tecnologia, sites institucionais e áreas com muito conteúdo. |
| Open Sans | Leitura simples e segura | Textos longos, sites profissionais, blogs e páginas com muita explicação. |
| Montserrat | Título forte e moderno | Landing pages, capas, botões, headings e marcas com presença mais digital. |
| Lato | Profissional sem ficar frio | Saúde, educação, serviços, páginas institucionais e projetos mais humanos. |
| Poppins | Geométrica e chamativa | Produtos digitais, páginas de venda, infoprodutos, dashboards e marcas jovens. |
| Inter | Ótima para telas | SaaS, sistemas, interfaces, sites modernos e projetos com foco em usabilidade. |
| Oswald | Compacta e impactante | Chamadas curtas, banners, títulos de impacto e páginas com estética editorial. |
| Raleway | Elegância minimalista | Moda, beleza, portfólios, arquitetura e marcas com visual mais refinado. |
| Noto Sans | Neutra e consistente | Projetos que precisam de suporte amplo a idiomas e leitura estável. |
| Roboto Mono | 0101 código e dados | Tecnologia, programação, inteligência artificial, dashboards e detalhes técnicos. |
7. Fontes por nicho e sensação
A mesma página pode parecer tecnológica, acolhedora, sofisticada ou divertida só pela escolha da fonte.
Tecnologia
Sistema inteligente para sua empresa
Fontes com desenho limpo, geométrico ou técnico ajudam a passar inovação, precisão e modernidade.
Interinterface e SaaS
Space Groteskmoderna e futurista
Roboto Monocódigo e dados
Manropetech premium
Saúde
Cuidado próximo e atendimento seguro
Na saúde, a fonte precisa transmitir confiança, limpeza e acolhimento. Arredondamentos leves ajudam a humanizar.
Latoprofissional e humano
Nunitoacolhedora
Source Sans 3clara e neutra
DM Sanslimpa e atual
Beleza
Beleza com delicadeza e presença
Para beleza, estética e moda, fontes com contraste e traços elegantes ajudam a criar sensação de sofisticação.
Playfair Displaysofisticada
Cormorant Garamonddelicada e editorial
Ralewayminimalista
Loraelegante e legível
Comida
Sabor de receita feita com carinho
Gastronomia combina bem com fontes marcantes, calorosas e fáceis de ler em cardápios, banners e chamadas.
Abril Fatfaceimpacto e apetite
Merriweatherartesanal e confiável
Rubikmoderna e amigável
Pacificotoque artesanal
Infantil
Aprender pode ser divertido
No infantil, fontes arredondadas e amigáveis funcionam bem, mas ainda precisam ser legíveis.
Fredokadivertida e legível
Baloo 2fofa e expressiva
Quicksandsuave e arredondada
Comic Neueinformal, use com cuidado
Regra prática
Como decidir rápido?
Pense em 3 palavras que a marca precisa transmitir. Depois escolha uma fonte que ajude a reforçar essas palavras.
InovaçãoInter, Space, Manrope
AcolhimentoNunito, Lato, DM Sans
SofisticaçãoPlayfair, Cormorant, Lora
DiversãoFredoka, Baloo, Quicksand
8. Tamanho, peso e espaçamento
Fonte boa com tamanho errado continua parecendo ruim. Esses ajustes dão acabamento profissional.
Use impacto com intenção
Título de seção pode ter 40px, 48px ou mais no desktop. Em celular, reduza para manter conforto.
Leitura acima de tudo
Texto de site geralmente fica confortável entre 16px e 20px, com altura de linha entre 1.5 e 1.8.
Clareza e ação
Botões funcionam bem com fonte sem serifa, peso alto e texto curto. Evite fontes difíceis em chamadas de ação.
9. Checklist para escolher e combinar fontes
Use este checklist para avaliar se a tipografia escolhida faz sentido para o projeto antes de aprovar o visual.
Leitura e clareza
- A fonte do parágrafo é fácil de ler no celular?
- O texto tem tamanho confortável para leitura?
- A altura da linha deixa o conteúdo respirar?
- O botão usa uma fonte simples, clara e objetiva?
Combinação e personalidade
- O título tem personalidade, mas continua legível?
- A combinação combina com o nicho e com o público?
- Estou usando no máximo duas famílias principais de fonte?
- As fontes parecem conversar entre si dentro do mesmo projeto?
Hierarquia visual
- O título chama mais atenção do que o parágrafo?
- O subtítulo aparece como apoio, sem competir com o título?
- Pesos diferentes estão sendo usados com intenção?
- A pessoa entende rapidamente onde começa cada seção?
Consistência no projeto
- A mesma regra de fonte se repete nas seções parecidas?
- Os botões mantêm o mesmo estilo ao longo da página?
- As escolhas de fonte reforçam a mensagem da marca?
- Consigo explicar por que escolhi essa fonte?