Como Escolher as Fontes de um Site Sem Ficar no Chute

A maioria dos guias sobre como escolher as fontes de um site te entrega uma galeria de tipos bonitos e deseja boa sorte. Esse é o lugar errado para começar. Uma fonte não é enfeite. É o que o seu cliente lê antes de decidir se te liga, te agenda ou fecha a aba. Escolha mal e um negócio sólido parece amador. Escolha bem e uma pequena loja local parece ter uma equipe de design por trás.

Este guia é para o dono que não é designer e não quer virar um. Você vai aprender a escolher fontes que leem com clareza, carregam rápido, combinam com o tipo de trabalho que você faz e se seguram na tela do celular. Mais ou menos metade do que vem a seguir funciona não importa a ferramenta com que você construa o seu site.

Comece pela função, não pela aparência

Antes de olhar uma única fonte, deixe claro o que a fonte precisa fazer. Um tipo que parece charmoso em um cartaz pode ser sofrível de ler em um parágrafo longo. Divida o seu raciocínio em duas funções.

• A função de título. Texto grande no topo de uma página: o nome do seu negócio, a sua promessa principal, os títulos das seções. Esse texto pode carregar personalidade porque as pessoas leem em rajadas curtas.
• A função de corpo. Os parágrafos, as descrições de serviço, as letras miúdas. Esse texto tem um dever acima de todos os outros, que é ser sem esforço de ler para alguém passando os olhos no celular na pausa do almoço.

Quase todo bom site resolve essas duas funções com no máximo duas fontes. Uma para títulos, uma para o corpo. Às vezes uma única família bem construída faz as duas. No momento em que você parte para uma terceira ou quarta fonte, a página começa a parecer um bilhete de sequestro e a sua credibilidade cai.

As cinco coisas que realmente importam

Bonito é subjetivo. Estas cinco qualidades não são. Avalie cada fonte contra elas.

1. Legibilidade em tamanhos pequenos

Leia um parágrafo inteiro de texto real no tamanho em que o corpo realmente aparece, por volta de 16 a 18 pixels. Não julgue uma fonte pelo nome dela mostrado gigante. Fique de olho em letras que borram juntas, em uma caixa-baixa que parece apertada ou em números que você precisa apertar os olhos para ler. Uma fonte com caixa-baixa mais alta, o que os designers chamam de altura-x generosa, tende a se manter legível quando encolhe.

2. Uma separação clara entre letras parecidas

Algumas fontes desenham um I maiúsculo, um l minúsculo e o número 1 quase idênticos. Em uma página cheia de telefones, preços e endereços, isso é um problema de verdade. Digite a sequência Il1 e O0 e confira que você distingue na hora. Sites de serviços residenciais vivem e morrem com um telefone sendo lido corretamente.

3. Pesos suficientes para montar uma hierarquia

Um peso é a espessura dos traços. Você quer pelo menos um regular e um negrito, e de preferência um médio no meio. Os pesos são como você faz um título parecer importante e uma legenda parecer discreta sem trocar de fonte. Uma fonte que vem com um único peso vai te prender rápido.

4. Itálicos de verdade, não inclinação falsa

Boas fontes incluem um itálico desenhado para dar ênfase. Fontes mais baratas ou de última hora fingem inclinando as letras retas, o que fica levemente estranho mesmo que o leitor não saiba dizer por quê. Se você planeja enfatizar palavras, confirme que existe um itálico verdadeiro.

5. Ela sobrevive no celular

Mais da metade do tráfego de negócios locais vem de um celular na mão, a um braço de distância, com luz ruim. Seja o que você colocar na lista, olhe em um celular de verdade antes de decidir, não só no seu notebook. Uma fonte que parece elegante em uma tela grande pode ficar fina e apagada em uma tela pequena.

Serifa ou sem serifa: um jeito simples de decidir

Você não precisa da história completa da tipografia. Você precisa de uma leitura honesta sobre a sensação que você quer.

• Fontes com serifa têm pezinhos nas pontas dos traços. Elas leem como estabelecidas, cuidadosas e tradicionais. Servem para um escritório de advocacia, um contador ou uma empresa de restauração que quer sinalizar décadas de experiência.
• Fontes sem serifa não têm pezinhos. Limpas e diretas. Elas leem como modernas, diretas e acessíveis. Servem para a maioria dos serviços residenciais, estúdios de bem-estar e qualquer coisa que queira parecer atual e sem enrolação.
• Fontes de script e decorativas imitam a caligrafia ou apostam pesado em um clima. Use só em um logo ou em um título ocasional, nunca em parágrafos. São o tempero, não o prato.

Um padrão confiável para um negócio local: uma sem serifa para tudo, em dois ou três pesos. É difícil deixar errado. Se você quer mais personalidade, combine uma serifa nos títulos com uma sem serifa no corpo, ou o contrário. Esse contraste lê como intencional.

Como combinar duas fontes sem diploma de design

Combinar fontes parece uma arte obscura. É basicamente duas regras.

• Combine por contraste. Junte duas fontes que claramente diferem, como um título em sem serifa negrito sobre um corpo em serifa. A diferença deve ser óbvia. Duas fontes que são só levemente diferentes parecem um erro, não uma escolha.
• Combine por família. Muitas fontes modernas vêm como uma família com uma serifa e uma sem serifa combinando, feitas para conviverem. Usar dois membros de uma família é o par mais seguro do mundo porque alguém já fez a parte difícil.

Na dúvida, não combine. Uma fonte forte em vários pesos vence um par desajeitado toda vez.

Um teste rápido: cubra as fontes e peça a um amigo para descrever o negócio em três palavras com base só nas formas. Se as palavras baterem com como você quer ser visto, você escolheu bem.

As partes que ninguém conta aos donos de pequenos negócios

É aqui que a maioria dos conselhos sobre fonte para, e onde os sites desmoronam em silêncio. Estes pontos raramente aparecem nos guias populares, e importam tanto quanto a aparência.

A velocidade de carregamento faz parte da escolha

Toda fonte personalizada é um arquivo que o celular do seu visitante precisa baixar antes de o texto aparecer. Carregue quatro fontes, ou uma fonte em oito pesos, e você adiciona um atraso real. Texto lento te custa visitantes que saem antes de a página se ajeitar, e derruba a sua posição nos mecanismos de busca. Duas regras te mantêm seguro: use no máximo duas famílias de fonte e carregue só os pesos específicos que você usa. Se você não está usando o peso fino ou o extra-preto, não os inclua.

Defina uma reserva para o texto nunca sumir

Enquanto uma fonte personalizada baixa, o navegador precisa mostrar alguma coisa. Se você não disser o quê, os visitantes podem encarar um espaço em branco por um instante. A solução é nomear uma fonte de reserva comum do mesmo estilo, para que fontes de sistema comuns preencham na fração de segundo antes da sua chegar. É um pequeno ajuste com um efeito enorme em quão rápida uma página parece.

Contraste e acessibilidade não são opcionais

Uma fonte pode ser perfeita e ainda assim ser ilegível se for cinza-claro sobre branco, muito pequena ou muito espremida. Busque um contraste forte entre texto e fundo, mantenha o corpo do texto em um tamanho confortável e dê espaço aos parágrafos com um bom espaçamento entre linhas. Isso não é só cortesia com clientes mais velhos ou com quem tem baixa visão. É também como você evita perder alguém que simplesmente não teve paciência de forçar a vista. Tipografia clara é boa educação e bom negócio ao mesmo tempo.

Confira a licença antes de se apaixonar

Se você baixa uma fonte de algum lugar aleatório, pode não ter o direito de usá-la em um site comercial. Fique com bibliotecas gratuitas para uso comercial, como o Google Fonts, ou com fontes que você licenciou corretamente. Uma notificação jurídica sobre um tipo de letra é uma dor de cabeça que nenhum negócio local precisa.

Teste com as suas próprias palavras

Texto de amostra é uma cilada. Uma fonte pode ficar linda soletrando o alfabeto e depois tropeçar no nome real do seu negócio, na sua cidade ou no seu serviço mais comprido. Cole os seus títulos reais, o seu telefone real, o seu parágrafo mais longo e o nome de rua estranho do seu endereço. Julgue a fonte pelas palavras que os seus clientes vão realmente ler.

Como escolher as fontes de um site em sete passos

Se você quer um plano em vez de um sermão, faça nesta ordem.

• Defina a sensação em uma palavra: estabelecido, moderno, acolhedor ou premium.
• Escolha uma sem serifa que leia com clareza em tamanhos pequenos e tenha pelo menos três pesos.
• Decida se você chega a precisar de uma segunda fonte. Muitas vezes não precisa.
• Se precisar, adicione uma fonte de título contrastante, ou use um membro da mesma família.
• Carregue só os pesos que você usa e nomeie uma reserva de sistema.
• Cole o seu conteúdo real e leia no celular.
• Confira contraste e tamanho para alguém que não está se esforçando para enxergar.

Siga esses sete passos e você vai ficar à frente da maioria dos concorrentes locais, que tendem a aceitar qualquer padrão que o construtor de sites entregou.

Quando você prefere não mexer em nada disso

Muitos donos leem tudo isso acima e pensam: eu toco uma equipe de telhados, não quero fazer teste de tipo de letra. É justo. Este é um dos lugares em que uma abordagem feita pra você vale o seu peso. A Saynovo cria o próprio site de um negócio e define um sistema de fontes para combinar com ele como parte dessa construção, então o par de título e corpo, os pesos e as reservas ficam resolvidos em vez de virarem lição de casa. Se depois você achar que os títulos ficaram formais ou barulhentos demais, é só falar em palavras simples e a tipografia muda, sem menu de fontes. Para donos que querem um visual pensado sem aprender tipografia, deixar o par ser decidido por você remove um passo que derruba muitos sites pequenos.

A versão curta

Saber como escolher as fontes de um site se resume a algumas checagens honestas, não ao gosto. Resolva a função de título e a função de corpo com no máximo duas fontes. Teste a legibilidade em tamanhos reais, em um celular real, com as suas palavras reais. Carregue só o que você usa e defina uma reserva para nada sumir. Mantenha o contraste forte para todo mundo conseguir ler, e confirme que você tem o direito de usar a fonte. Faça isso e a sua tipografia vai cumprir o trabalho em silêncio, que é sair do caminho e deixar o cliente decidir te contratar.

Fontes que vale ler a seguir:

• Choosing Web Fonts, a Beginner's Guide, do Google Design
• How to Choose Website Fonts, da Squarespace
• How To Choose The Right Font For Your Website, da CareerFoundry
• How to Choose the Best Fonts for Your Website, da Wix