Minitutorial - Um guia para combinações de fontes

Publicados: 2022-03-11

“A tipografia é uma arquitetura bidimensional, baseada na experiência e na imaginação, e guiada por regras e legibilidade.” —Herman Zapf

Apenas alguns anos atrás, os designers foram severamente restringidos em sua escolha de fontes da web. As opções eram geralmente limitadas a fontes do sistema e esperando que os visitantes do site tivessem essas fontes instaladas.

Embora as fontes da web fossem tecnicamente possíveis no final dos anos 90, elas não se tornaram amplamente utilizadas até 2009, quando o formato WOFF se tornou disponível e parte dos padrões abertos do W3C. Isso abriu um mundo inteiramente novo de opções tipográficas para designers.

E aí está o dilema: agora que existem literalmente milhares de fontes disponíveis para web designers, como criar combinações de fontes que funcionem bem juntas e suportem o conteúdo apresentado?

Combinações de fontes não — A combinação de Muli e Playfair Display (usado como tipo de corpo) em dois estilos diferentes é simples, mas eficaz. (via Behance)

Uma boa tipografia e o uso das melhores combinações de fontes elevam o design de seus pares e criam uma experiência de usuário mais agradável. Combinações de tipos eficazes adicionam interesse visual a um design que pode manter um visitante na página por mais tempo.

O tipo ruim, por outro lado, pode tornar o conteúdo mais difícil de ler e menos prazeroso para a pessoa que o lê.

Aprender a combinar fontes de forma eficaz é um passo importante na educação de um designer e que deve ser continuamente refinado e aprimorado. Designers que dominam a tipografia podem tornar até o design mais simples mais eficaz. Seguir as diretrizes básicas de tipografia para combinar fontes é o melhor lugar para começar. Uma vez que essas “regras” são dominadas, os designers podem se ramificar e experimentar para criar combinações tipográficas que dobram ou quebram essas regras.

Combinar fontes é tão antigo quanto o próprio design tipográfico.

Características do tipo

Com as centenas de milhares de fontes disponíveis, tentar descobrir por onde começar pode ser difícil, mesmo para designers avançados. Compreender as características de diferentes tipos de letra é o primeiro passo para aprender a combiná-los de forma eficaz.

Aprender como essas características se relacionam permite aos designers combinar fontes com confiança e experimentar combinações inesperadas. A experimentação e a prática são onde os designers podem realmente aprimorar suas habilidades de combinação de fontes e criar designs que os diferenciam de outros especialistas. Às vezes, ouvir a intuição deles é a melhor maneira de criar uma combinação de fontes que realmente brilhe.

Classificação

A classificação do tipo de letra é um dos conceitos mais fundamentais para entender. Existem quatro classificações principais para aprender: serifa, sem serifa, escrita e decorativa.

Os tipos de letra com serifa e sem serifa são adequados tanto para títulos como para o corpo do texto. Script (às vezes também chamado de fontes manuscritas) e tipos de letra decorativos, no entanto, geralmente são aceitáveis apenas para títulos e títulos ou outros pequenos pedaços de texto.

As fontes que combinam geralmente vêm de classificações diferentes. — As quatro principais classificações tipográficas.

As fontes com serifa são consideradas mais legíveis para pedaços longos de texto (como o corpo do texto), particularmente em designs impressos, onde o recurso de serifa pode ajudar a guiar o olhar do leitor ao longo de cada linha. Mas os tipos de letra sem serifa também podem ser altamente legíveis e se destacar em tamanhos menores (como os usados para legendas ou meta-informações).

As fontes sem serifa também são mais populares para uso na web e acredita-se que sejam mais legíveis do que as fontes com serifa. Parte disso vem dos primórdios da computação, quando as telas de resolução mais baixa tornavam as fontes serif um pouco embaçadas, dependendo do tamanho. Com as telas HD e Retina modernas, isso é um problema menor e as fontes com serifa e sem serifa podem ser usadas de forma eficaz.

Combinar fontes de diferentes classificações geralmente é mais simples do que combinar dentro de classificações, pois há um nível de contraste entre as fontes já incorporadas. Dito isso, também é possível combinar efetivamente tipos de letra na mesma classe, desde que outras características sejam consideradas.

Peso

Peso refere-se à espessura de uma fonte dentro de um tipo de letra. Fino, regular, seminegrito, negrito e preto são exemplos de pesos.

O contraste entre os pesos é essencial ao combinar tipos de letra. Combinar uma fonte muito grossa com uma muito leve geralmente parece desequilibrada. Mas combinar tipos de letra com o mesmo peso também pode ser um desafio.

Em vez disso, especialmente ao começar com combinações de fontes, é mais fácil encontrar tipos de letra que tenham diferenças de peso perceptíveis, mas não extremas. Os designers podem se ramificar a partir daí para distinções mais proeminentes.

As melhores combinações de fontes são equilibradas. — O peso dos tipos de letra tem um forte impacto sobre o quão bem eles combinam. Muita diferença pode fazer com que o tipo de letra mais leve praticamente desapareça.

Estilo

Embora o estilo às vezes seja usado de forma intercambiável com classificação, nesse caso, ele se refere a uma fonte normal , itálica ou oblíqua .

Ao combinar fontes onde estilos diferentes são usados, é importante certificar-se de que os estilos itálico ou oblíquo funcionem tão bem juntos quanto o estilo normal. Às vezes, os estilos em itálico são muito diferentes do estilo normal da mesma fonte, o que pode fazer com que fontes que de outra forma funcionariam bem juntas entrem em conflito.

Contraste

O contraste na combinação de tipos de letra pode ser complicado. Pouco contraste pode fazer as fontes colidirem, enquanto muito contraste pode fazer o mesmo.

Contraste ao combinar fontes refere-se a qualquer maneira em que as fontes sejam diferentes, incluindo classificação, peso, estilo e estrutura.

Ao começar, é melhor se concentrar no contraste entre apenas uma ou duas dessas coisas, certificando-se de que as outras sejam muito semelhantes. O peso é uma das maneiras mais fáceis de criar contraste entre as fontes. Como já mencionado, muito contraste no peso pode ser tão chocante quanto muito pouco.

Todas essas fontes são boas fontes para sites, mas isso não — O peso desempenha um papel substancial no contraste das fontes. Muito é chocante, muito pouco é praticamente imperceptível, mas a quantidade certa permite que cada tipo de letra brilhe.

Outra maneira fácil de criar contraste é combinar diferentes classificações de fontes, como sans serif e serif ou script e serif, etc. Nesses casos, é essencial garantir que o humor das duas fontes corresponda.

Por exemplo, combinar uma fonte mais casual como Amatic SC com uma fonte muito formal como Baskerville irá colidir em vez de contrastar. Mas combinar algo como Amatic SC com outra fonte casual como Josefin Slab funciona lindamente.

Diferentes tipos de fontes que combinam... ou não. — Combinar o humor de uma fonte é importante ao combinar tipos de letra.

Altura X

X-height refere-se à altura de caracteres individuais dentro de um tipo de letra, especificamente o x minúsculo. Fontes com alturas x semelhantes funcionarão melhor juntas do que aquelas com alturas x variáveis.

Estrutura

A estrutura subjacente de um tipo de letra inclui todas as suas características, além de coisas como a forma básica dos caracteres e seu espaçamento. Criar contraste com a estrutura das fontes é um método estabelecido de combinar fontes. Mas é uma boa ideia escolher fontes que tenham pelo menos alguns elementos estruturais em comum (como altura x ou o peso do estilo “normal”) em vez daqueles que são totalmente diferentes.

Humor

O humor é uma das áreas mais subjetivas da tipografia. Refere-se a quão formal ou informal é um tipo de letra, bem como se é divertido, feminino, masculino, casual, sério, etc.

Por exemplo, Comic Sans é uma fonte extremamente informal que é inadequada para uso na maioria das situações. O Bickham Script, por outro lado, é muito formal, mas dá a impressão errada para coisas como correspondência comercial.

Ao combinar fontes, é importante encontrar fontes com humores semelhantes. Combinar uma fonte divertida com uma muito séria será chocante aos olhos.

Combinações de fontes eficazes devem levar em consideração o humor. — O humor é uma consideração essencial ao combinar o tipo.

Decoração, cor e textura

Essas coisas não são características inerentes aos tipos de letra, mas são úteis ao combinar fontes. Unificar (ou criar mais contraste) por meio de cor, decoração (como sublinhado) e textura pode ser uma técnica muito eficaz.

Fontes que combinam não — Alterar algumas palavras para verde destaca o contraste entre Fontin e Fontin Sans, que não têm uma grande quantidade de contraste de outra forma (observe que as *fontes* e o último *contraste* não se destacam muito). Alterar os pesos, adicionar um sublinhado ou adicionar textura teria um efeito semelhante.

Combinações de fontes eficazes

Há um suprimento aparentemente infinito de sites com tipografia bonita por aí, junto com um suprimento igualmente infinito daqueles com tipo ruim ou apenas sem brilho. Estudar sites que acertam é uma ótima maneira de aprender a combinar fontes quando os designers estão começando ou tentando levar suas habilidades para o próximo nível.

Work Notes combina o tipo serif Adobe Caslon Pro com o sans serif Interstate para criar uma combinação de tipos que remete à tradição sem parecer obsoleto ou antiquado. A combinação de diferentes pesos e estilos adiciona interesse visual adicional e faz com que a tipografia pareça mais complexa do que realmente é.

Combinações de fontes eficazes: Adjuvant Capital

A Adjuvant Capital usa a moderna fonte com serifa ligeiramente caprichosa Orpheus Pro combinada com a moderna fonte sem serifa GT America. Para uma empresa de serviços financeiros, esta é uma escolha muito moderna, mas funciona bem com sua missão de investimento global socialmente responsável.

Usando diferentes tipos de fontes: Bloomscape

A Bloomscape usa a fonte casual com serifa Morion junto com a sans serif Raisonne para criar um design tipográfico moderno e marcante. Morion não seria necessariamente uma escolha óbvia para o tipo de corpo devido às suas formas de letras mais decorativas, mas quando usado em um tamanho apropriado (como está aqui), é ótimo para partes mais curtas do texto do corpo. A Raisonne tem formas de letras decorativas semelhantes, o que faz com que as duas fontes da web funcionem lindamente juntas.

A Vogue usa a moderna e elegante fonte serifada Savoy combinada com a grotesca sans serif Franklin Gothic, que foi originalmente projetada em 1902. A combinação das duas cria um design tipográfico sofisticado que atrai o público culto que a revista visa.

Combinações de fontes para sites: Garden & Gun

A revista de estilo de vida do sul Garden & Gun tem tipografia mais complexa em seu site do que as outras incluídas aqui, o que realmente a diferencia. O site usa quatro tipos de letra principais: Os títulos principais dos artigos são a serifa Domaine Display; o corpo do texto e alguns títulos na página inicial são a fonte com serifa Domaine Text; meta-informações, navegação e cabeçalhos de seção usam o Avenir Next sem serifa; e cabeçalhos de seção adicionais na página inicial estão no Domaine Sans Display.

Usar várias fontes de uma família de tipos maior é uma maneira comprovada de criar um design de tipografia complexo que coordena perfeitamente. Adicionar o Avenir Next divide as coisas e adiciona interesse visual adicional.

Sua escolha do tipo de letra é tão importante quanto o que você faz com ele.
-Bonnie Siegler

Conclusão

Combinações de fontes eficazes são uma marca registrada de um bom design. Os designers devem dominar essa habilidade se quiserem criar designs excepcionais que os diferenciem de seus contemporâneos.

Considere as diretrizes incluídas aqui como pontos de partida para explorar como combinar o tipo de forma eficaz. Uma base sólida permite uma experimentação mais eficiente, sem gastar horas em combinações completamente inadequadas. A partir daqui, os designers podem praticar a criação de seu próprio estilo e métodos para combinar fontes de forma eficaz, desviando-se das diretrizes conforme necessário, com mais confiança de que seu produto final será um deleite para os usuários.

• • •