O Poder das Fontes: Por que sua página de destino se parece estranha e sua typeface é a razão

Você entrega a página. A cópia é afiada. As cores parecem boas. Mas tudo parece de alguma forma genérico, ou de alguma forma errado, e você não consegue dizer por quê.

Tente isso: mude a fonte. Mesmas palavras, mesmo layout, typeface diferente. De repente a página lê como um produto real em vez de um template.

Type é a voz de sua página. Visitantes a ouvem antes de ler uma palavra. Escolha uma fonte que não combina com seu produto e você está minando cada outra decisão que fez.

O que "o poder das fontes" realmente significa

Cada fonte carrega um sentimento. Uma typeface de horror áspero e um script suave podem soletrar a mesma palavra exata e contar coisas completamente diferentes a você.

"Tipografia é uma voz. Pode ser formal ou casual, amigável ou autorativa." , Ellen Lupton

O "poder" é psicológico. Um bold pesado lê como confiante. Um light fino parece delicado. Uma sans geométrica parece engenheirada. Uma serif de alto contraste parece considerada. Escolha aquela cujo sentimento combina com o que você vende.

Por que isso importa em uma página de destino

Confiança de primeira impressão

Visitantes decidem se sua página parece legítima em bem menos de um segundo. Type é um dos primeiros sinais. Uma typeface limpa e bem-definida sinaliza "essa é uma empresa real." Um font do sistema genérico em um título de herói sinaliza "isso foi jogado junto."

Hierarquia

O tamanho e peso de sua type diz aos visitantes para onde olhar. Um título de negrito de 48px faz o trabalho de uma seta. Uma parede de texto cinza de 14px faz o oposto.

Conversão

Se seu texto de botão CTA é difícil de ler, você perde dinheiro. A escolha de fonte mais cara é aquela que faz "Começar" parecer como miúda.

Encaixe de marca

Sua fonte deveria concordar com seu produto. Uma sans humanista amigável em um app de aprendizado para crianças. Sim. A mesma fonte em um dashboard de conformidade fintech. Visitantes pausam e não sabem por quê.

Como escolher a fonte certa

1. Decida como seu produto deveria soar

Antes de abrir Google Fonts, anote três palavras. Confiável. Moderno. Brincalhão. Premium. Técnico. Calmo.

Agora combine essas palavras com uma categoria de fonte. Sans geométrica para tech. Sans humanista para SaaS amigável. Serif para premium ou editorial. Slab serif para negrito e confiante.

2. Escolha entre serif e sans

A decisão mais comum:

• Serif - pés nas letras. Lê como tradicional, autorativo, considerado. Funciona para mídia, finança, bens premium.
• Sans-serif - sem pés. Lê como moderno, limpo, rápido. O padrão para SaaS e a maioria de produtos digitais.

Indo mais fundo: Serif ou Sans?.

3. Otimize para tela, não para Figma

Uma fonte que parece elegante a 80px em sua ferramenta de design pode parecer frágil a 16px em um laptop real. Teste nos tamanhos que você realmente entregará.

• Olhe para texto de corpo em um telefone, à luz do dia, com brilho abaixado.
• Verifique a altura-x (a altura das letras minúsculas). Alturas-x generosas leem melhor em telas.
• Evite pesos hairline para qualquer coisa que você realmente quer que pessoas leiam.

Para as configurações técnicas, veja Regras de Legibilidade.

4. Combine o tom

Uma fonte "divertida" arredondada em um app bancário cria a mesma fricção que uma fonte séria em um app para crianças. Visitantes sentem a falta de combinação mesmo quando não conseguem nomear. Escolha uma fonte cuja vibe concorda com o produto.

Maneiras comuns que construtores quebram isso

Usar muitas fontes

• O erro: Quatro ou cinco typefaces diferentes em uma página. O design se fragmenta.
• O conserto: Dois fonts máximo. Um para títulos, um para corpo. Use pesos para variedade, não novas fontes.

Ignorando contraste

• O erro: Cinza claro em branco porque "parece limpo." Visitantes apertam os olhos, então vão embora.
• O conserto: Execute suas cores através de um verificador de contraste. Apunte para 7:1 em texto de corpo.

Esquecendo altura de linha

• O erro: Texto de corpo com altura de linha padrão. As linhas se empilham uma na outra.
• O conserto: Defina altura de linha de corpo para aproximadamente 1.5x. Mais apertada para títulos.

Como produtos reais fazem isso

Disney

A cursiva customizada Disney é instantaneamente reconhecível e instantaneamente diz "magia, família, história." Essa fonte seria errada para quase qualquer outro produto. Para Disney é a marca inteira.

Google

Google usa Roboto em todo lugar. É geométrico o suficiente para parecer engenheirado, aberto o suficiente para parecer amigável. Escala de um rosto de smartwatch para um display 4K sem quebrar. Esse é o superpoder entediante de uma ótima fonte de corpo. Você para de percebê-la.

Princípios relacionados

Type é uma peça. Esses se emparelham com ela:

Regras de Legibilidade

Comprimento de linha, espaçamento, e configurações de contraste que tornam sua cópia confortável de ler.

Recursos e leitura adicional

Google Fonts

A biblioteca padrão para fontes livres e otimizadas para web.

Font Pair

Uma forma rápida de achar combinações de typeface que já funcionam bem juntas.

Perguntas frequentes