Guia de Combinação de Fontes

Pick a headline font and get two or three body fonts that pair well with it, with the reasoning and a live preview.

Por Marshkalk

Escolha uma fonte de título para ver duas ou três fontes de texto que combinam bem com ela, e porquê. A pré-visualização usa a fonte real se estiver instalada no seu aparelho, caso contrário um substituto parecido mantém o mesmo ar serifado ou sem serifa, por isso este guia continua a ser em texto, sem carregar nenhum ficheiro de fonte externo.

-
Categoria da fonte de título

Lógica de combinação para esta fonte:

A lógica por trás de uma boa combinação de fontes

Uma combinação funciona quando as duas fontes são suficientemente diferentes para se distinguirem à primeira vista, sem serem tão opostas que entrem em conflito. Três abordagens cobrem a maioria dos casos. O contraste de peso coloca um título marcado e pesado diante de um corpo de texto mais leve, ou o inverso, para que o olhar separe os dois papéis de imediato. O contraste de estilo combina uma serifada com uma sem serifa, já que a presença ou ausência dos pequenos remates no final da letra é o sinal visual mais claro que um leitor consegue captar. A combinação dentro da mesma família, como a Roboto Slab com a Roboto, usa duas fontes desenhadas com proporções equivalentes para que a página inteira pareça coerente, mantendo formas de letra diferentes a separar título e corpo de texto. Evite duas fontes quase idênticas, porque a diferença vai parecer um descuido em vez de uma escolha de design.

Verificar se uma fonte trata bem o til, a cedilha e os acentos do português

Nem todas as fontes têm suporte completo para caracteres como ã, õ, ç e acentos usados no português. Antes de fixar uma combinação para um projeto em produção, veja a página de amostra no Google Fonts ou no site da fundição para o idioma em causa, e escreva uma frase real com til, cedilha e acentos em vez de confiar apenas no nome da fonte. Uma fonte que parece ótima num título em inglês pode mostrar um caractere acentuado com espaçamento desalinhado, espessura de traço diferente ou um glifo de substituição, o que quebra a combinação em qualquer sítio onde esse caractere apareça, e no português esses casos surgem em palavras muito comuns como "não" ou "ação".

Limites: a escolha continua subjetiva e depende do contexto

Não existe uma única resposta correta para uma combinação de fontes. As sugestões deste guia são um ponto de partida de referência, não uma regra fixa, e o que parece elegante numa brochura impressa pode parecer antiquado num ecrã de telemóvel, enquanto uma combinação pensada para um parágrafo pequeno pode falhar num tamanho de cartaz. Teste sempre uma combinação com o conteúdo real, o comprimento real dos títulos e os tamanhos de ecrã reais do projeto, em vez de a avaliar a partir de uma única linha de exemplo.

Uma regra prática simples

Limite-se a duas famílias de fontes na maioria dos projetos: uma para títulos, outra para o corpo de texto. Adicione uma terceira apenas como fonte de destaque, usada com moderação em rótulos, citações ou pequenos detalhes de interface, nunca em grandes blocos de texto. Isto mantém uma página rápida a carregar, fácil de manter e visualmente calma, o que importa mais do que encontrar a combinação teoricamente perfeita. Veja também o Construtor de Sistema de Grelha e a Calculadora da Proporção Áurea para outras bases de layout que combinam bem com boas escolhas tipográficas.