5 dicas para uma Tipografia Impactante

Ao trabalhar com projetos baseados fortemente em tipografia, é de extrema importância criar uma hierarquia distinta no design, acrescentando ênfase nos lugares certos. Esse sentido de progressão lógica de um elemento para outro ajudará os usuários a entenderem melhor o seu site, a interface e as ferramentas de navegação.

Criar hierarquia vai muito além de apenas alterar o tamanho da fonte. Os melhores projetos usam uma combinação harmônica de famílias tipográficas, tamanhos, pesos e contraste para criar um visual global eficaz e profissional.

Avaliando estas cinco dicas fundamentais, ficará muito mais fácil montar uma tipografia impactante para o seu próximo projeto.

1. O Tamanho e a Escala

Variando os tamanhos de fonte, podemos criar um claro senso de escala e de hierarquia.

Normalmente, o tamanho das palavras usadas para o texto principal (corpo do texto) deve ser inversamente proporcional ao volume de texto. Em outras palavras, as manchetes (títulos) devem ser maiores que os subtítulos, e os subtítulos devem ser maiores do que o texto corrido.

Não existe uma regra absoluta sobre os tamanhos exatos em pixels ou pontos, mas o critério principal é que tudo deve ser perfeitamente legível. O teste de ouro é o “teste do olho”: ao experimentar as fontes na tela, confie na sua percepção visual. Se o texto parecer muito grande (o que tende a soar menos profissional) ou pequeno demais (cansativo), ajuste. Na maioria dos casos, é melhor manter o uso de textos gigantes restrito apenas a manchetes bem curtas.

2. A Composição e a Largura das Letras

A estrutura geométrica e a largura das suas seleções tipográficas também afetam dramaticamente o modo como o texto é percebido.

Observe as fontes na imagem. Mesmo quando possuem exatamente o mesmo tamanho de ponto (ou pixel), as larguras variam drasticamente. Variações como condensed ou compressed sempre parecerão menores ou mais “apertadas” do que suas contrapartes normais ou estendidas (extended).

A forma geral das letras dita o ritmo da leitura:

• Fontes com formas mais redondas tendem a ter uma largura maior, gerando espaços internos abertos e uma sensação mais amigável.
• Fontes mais ovais tendem a ser mais altas e estreitas, diminuindo o espaço em branco ao redor das letras, ideais para locais com pouco espaço horizontal.

O kerning (espaçamento horizontal entre caracteres individuais) também é vital. Um kerning extremamente apertado, onde as letras quase se tocam, pode parecer agressivo e intimidador em grandes blocos de texto. Textos de leitura devem ter um espaçamento confortável, enquanto o kerning extremo (muito junto ou muito afastado) deve ser reservado para logotipos ou pequenos títulos em situações especiais de design.

3. A Espessura do Traçado (Peso)

Um dos fatores mais marcantes ao escolher uma fonte é a espessura do seu traçado, também conhecida como “peso” (weight). As linhas grossas ou finas que compõem cada letra carregam uma energia visual considerável.

É muito comum que as melhores famílias tipográficas ofereçam uma ampla gama de pesos (Thin, Light, Regular, Medium, Bold, Heavy, Black).

Assim como as fontes mais arredondadas transmitem uma sensação de abertura, fontes com traços espessos (Bold/Black) têm mais força, urgência e impacto. Para obter os melhores resultados:

• Use pesos médios ou regulares (Regular / Medium) para os blocos longos de texto.
• Use versões bem finas (Thin/Light) ou bem grossas (Bold/Black) para criar acentos visuais em títulos grandes ou pequenas chamadas (tags).

Tenha cuidado ao usar fontes que misturam traços extremamente grossos e finos na mesma letra (como a clássica Bodoni) em textos longos. Elas causam fadiga visual e funcionam melhor apenas como fontes de destaque.

4. O Contraste e as Cores

A combinação entre a cor de fundo e a cor da fonte afeta diretamente o “peso” visual de cada palavra. O contraste criado pelas cores dita se a tipografia vai brilhar ou desaparecer na tela. (Para se aprofundar nisso, confira nosso artigo sobre a Roda de Cores).

Referência: Austin Eastciders

Combinações de alto contraste (como texto preto sobre fundo branco ou branco sobre preto puro) funcionam de forma excelente com pesos médios ou pesados e tamanhos maiores. No entanto, se você usar uma fonte extremamente fina (Thin) em um fundo de altíssimo contraste (como branco no preto), as letras podem “sumir” ou parecer borradas devido ao brilho das telas.

Textos muito finos costumam funcionar melhor com um contraste ligeiramente suavizado (como um cinza muito escuro ao invés de preto puro, ou fundos coloridos em tons pastéis).

Referência: Night Owl Interactive

Em contrapartida, projetos com baixo contraste (como um fundo azul-marinho com texto em azul-claro ou o tema marrom da Night Owl Interactive) exigem tipos de letras mais espessos (Bold). Fontes pequenas ou finas acabam desaparecendo quando o contraste é baixo. Nesses casos, o peso da tipografia é quem faz o trabalho duro de garantir a legibilidade.

5. O Toque de Talento e a Moderação

Finalmente, você pode adicionar peso e destaque visual através do uso inteligente das cores ou de fontes decorativas (novelty fonts).

Adicionar uma cor contrastante a uma única palavra, frase ou citação pode deixá-la em total destaque na tela, mesmo que ela não seja maior ou mais grossa do que o restante do texto. Contudo, evite usar muitas cores no mesmo parágrafo, o que cria um aspecto amador e uma enorme distração (fazendo exatamente o oposto do que você pretendia).

O mesmo vale para as fontes decorativas, como as scripts (simulando caligrafia) ou fontes super estilizadas. Uma letra distinta pode chamar muita atenção, desde que usada com extrema moderação (apenas em um título ou detalhe), enquanto o restante do layout permanece limpo.

Conclusão

Os sites e materiais gráficos mais eficazes combinam múltiplas propriedades tipográficas para criar uma sensação única, sem nunca perder a clareza da hierarquia. Misture categorias (uma fonte Serifada para os títulos e uma Sans-Serif para os textos, por exemplo) e brinque com os tamanhos para obter o melhor efeito.

Mas lembre-se da regra de ouro: a moderação. Projetos guiados pela tipografia estão entre os mais difíceis de dominar. Quando você quiser criar um design criativo e visualmente atraente, a facilidade de leitura deve ser sempre a sua prioridade absoluta. Evite a “salada de fontes” e não use muitas famílias diferentes.

Na maioria dos casos, selecione apenas uma ou duas famílias tipográficas para o seu projeto e explore ao máximo as variações dentro de cada família (seus diferentes pesos, itálicos e tamanhos) junto com as cores para criar o contraste necessário.

Aproveite as dicas e crie com impacto!

(Inspirações deste post: Codrops e o artigo da Finalizart sobre Roda de Cores)