Como emparelhar tipos de letra

James Bierly Segue 15 de jul · 5 min ler Foto de Kristian Strand no Unsplash

Uma das decisões que os designers de interface do usuário geralmente precisam fazer é a escolha de tipos de letra específicos. Há muitas maneiras de responder a essas perguntas, mas gosto de considerá-las como uma espécie de acessórios: como escolher uma bolsa ou uma gravata para combinar com uma roupa específica. Descobrir um muito bem e o outro seguirá.

Para o nosso exemplo, vamos começar simples e clássico com o cavalo de batalha da web: Arial.

Conheça Arial, uma excelente escolha para o texto

Arial é uma fonte para todos os fins. Você pode encontrá-lo por toda a web, como um padrão em aplicativos de processamento de texto e até mesmo em e-books. A onipresença da Arial no texto técnico vem de sua seleção inicial como o tipo de letra para as impressoras a laser IBM®. Como já era o que as pessoas esperavam que as impressões de computador parecessem, a Microsoft decidiu usá-lo para seu sistema operacional 3.1.

Lembre-se, no passado, os primeiros computadores de muitas pessoas só davam saída usando impressão, então era natural que um sistema operacional gráfico usasse o mesmo texto que as impressoras estavam usando. Havia uma conexão clara entre os dois na mente das pessoas. Além disso, o Arial é fácil de ler¹.

Arial era bom para computadores antigos e impressoras pela mesma razão que continua a ser usado em todos os lugares hoje, é simples, fácil de ler (em todos os tamanhos diferentes) e altamente personalizável com muitas versões diferentes de si mesmo na existência.

Foto de bert sz no Unsplash

Os traços diagonais em Arial são angulados, sem decorações extravagantes no final (esporas, serifas etc.), apenas uma forma diagonal simples².

Arial Exibindo

Arial não é uma fonte que você realmente pensa. Está ali, fazendo tudo o que não pode para atrapalhar a leitura do seu conteúdo de maneira agradável e alegre. Essa legibilidade é aprimorada pela “altura x” da fonte.³ Essa é apenas uma maneira sofisticada de dizer o quão altas são as letras minúsculas. Geralmente, você quer que seu texto tenha uma altura x alta, pois isso facilita a leitura. No entanto, as manchetes podem usar uma altura de x menor para fazer com que as palavras saltem mais para fora da página. Arial tem um x-height de 52, colocando-o em direção ao high-end em comparação com outras fontes da web comumente usadas?.

Conheça a EB Garamond – uma excelente escolha para títulos

Considerando que o Arial é um produto da era digital, os tipos de letra baseados nos designs do designer de tipos do século XVI Claude Garamond se esforçam para recriar a sensação da caligrafia grega antiga, de acordo com a sensação humanista de seu dia?. O EB Garamond é uma versão moderna de código aberto para a web?.

Ao contrário de Arial, Garamond é uma fonte Serif, o que significa que tem pequenas decorações pontiagudas nas extremidades dos traços individuais. Geralmente, é uma boa idéia usar duas fontes diferentes para uma delas ter serifas e a outra para não tê-las, o que dá um bom senso de simetria à página e faz com que os cabeçalhos se destaquem.

EB Garamond no Google Fonts

As serifas de Garamond combinam bem com Arial porque não são particularmente pronunciadas. Em vez disso, eles são pequenos e elegantes, dando a sensação de um Arial ligeiramente melhorado, em vez de algo radicalmente diferente. Como o Arial, ele deveria ser usado para grandes porções de texto inicialmente e, portanto, tem alta legibilidade.

No entanto, sua legibilidade é um pouco prejudicada, mas seu impacto como um cabeçalho é aprimorado, pelo fato de ter uma altura de x muito menor que Arial. Colocando Arial versus Garamond neste estimador online de x-height, você verá que a carta parece um tanto desarrumada na versão Garamond.

Com serifs e x-height baixo para estilo, mas um visual limpo e legível, Garamond combina bem com Arial quando é o cabeçalho e Arial é o texto.

Os dois juntos, felizes como podem ser

Então, o que aprendemos?

Então, a partir dessa comparação, aqui estão algumas dicas gerais:

  • Use alturas altas x para texto, altura x baixa para cabeçalhos
  • Se você usar serif para cabeçalhos, use sans serif para o corpo ou vice-versa
  • Pense em quão diferente você quer que os dois sejam um do outro em termos de impacto visual imediato. Eu escolhi uma fonte sem serifas e uma com pequenas serifas para manter uma aparência contínua. Mas você pode querer algo mais descontínuo. Pense nisso.
  • Pense também na "história" e "sentir" que cada fonte transmite. Aqui, escolhemos fontes com diferenças sutis, mas reais, em relação a elas. Um é moderno e utilitarista, o outro tem quatro séculos e é humanista. Esta é uma maneira mais sutil, mas real, de obter contraste.

Além disso, escolha fontes que tenham pelo menos 10 pesos diferentes no Google Fonts (isso mostra um alto nível de suporte e ajuste para a web) ³ e, quando em dúvida, não se sinta mal em ver os principais sites que você acha que ficam bem e seguindo sua tipologia. Embora às vezes eles possam estar usando fontes protegidas originais, normalmente você pode encontrar algo semelhante o suficiente para obter a sensação que está procurando.