Um Guia Para Iniciantes Sobre Como Combinar Fontes

Combinar Fontes

Combinar fontes pode ser complicado. Selecionar duas ou mais fontes que combinem é uma coisa – selecionar duas que trabalhem juntas e consigam alcançar o objetivo pode dar uma bela dor de cabeça. Que tal tentarmos evitar essas dores de cobeça? Esse guia mostrará a você o que é preciso para combinar fontes para a web.

Combinar fontes pode ser complicado. Selecionar duas ou mais fontes que combinem é uma coisa – selecionar duas que trabalhem juntas e consigam alcançar o objetivo pode dar uma bela dor de cabeça. Que tal tentarmos evitar essas dores de cobeça? Esse guia mostrará a você o que é preciso para combinar fontes para a web.

Felizmente, tipografia já existe há um bom tempo. Regras e convenções tipográficas tiveram tempo e oportunidades suficientes para se estabelecerem, e você pode encontrar diversos recursos úteis. O único problema é que, ao pesquisar pela internet, você se deparará com milhões de opiniões opostas, conflitantes! Vamos tentar esclarecer um pouco as coisas.

Eis os tópicos do que cobriremos nesse guia:

  • Seu Objetivo
  • Quantas Fontes Devo Usar?
  • Comprar ou Não Comprar?
  • Qual a Natureza do meu Conteúdo?
  • Como Combinar Fontes com Sucesso?
  • Combinação 1: Harmonia
  • Combinação 2: Contraste
  • Combinação 3: Conflito

Pense sempre no essencial. Quando for selecionar várias fontes para alguma combinação, é crucial que você mantenha tanto a homogeneidadequanto a variedade.

O número de fontes que você pode usar só depende de você, porém, tenha em mente o efeito que deseja alcançar. Fontes, assim como pessoas, tem personalidade. E as personalidades das fontes, assim como as das pessoas, podem entrar em conflito. Imagine suas fontes como convidados em uma mesa de uma recepção de casamento; uma pessoa mais desenvolta, geralmente, é mais que suficiente por mesa, uma vez que, personalidades fortes podem criar uma atmosfera embaraçosa, como se fosse um episódio do Big Brother.

Tenha certeza que há alguma relação para o grupo; oito pessoas com pouca coisa a dizer uma para as outras, resulta numa espera sem fim pelos discursos dos noivos.

Ele já não existe mais, mas o site do Fusion Ads de 2001 é um dos excelentes exemplos que vem à minha mente quando penso em combinação de múltiplas fontes, empilhadas uma sobre as outras

Não há regras específicas sobre quantas fontes você deve ou não usar no layout de uma página. Usar várias fontes juntas pode ser difícil, alcançar harmonia entre eles é desafiador, mas, se você conseguir passar por isso, o resultado será bem chamativo. Ao usar menos fontes, sua tarefa se torna bem mais simples e direta. Tente usar o que puder dos dois mundos, selecionando fontes com múltiplas variações e espessuras. Dessa forma, você poderá lançar mão de uma variedade de estilos, tendo certeza que elas complementarão muito bem umas às outras.

Há inúmeros serviços gratuitos que forncem fontes para web (via @font-face em seu CSS): google fontsfonts.comfontsquirrel’s font kit generator, mas não exclua a opção da compra de fontes se o projeto merecer. O custo de uma licença para um único domínio varia, mas há diversas vantagens que devemos levar em consideração.

Qualidade. O cuidado e atenção empenhados na produção de fontes comerciais, geralmente, torna-se bastante evidente na qualidade da fonte. Não quer dizer que os projetistas de fontes que criam fontes gratuitas são meros macacos de circo, longe disso, mas, geralmente, há uma grande diferença na qualidade. A diferença é notável nos menores detalhes, na espessura do traço, no espaço em branco, no kerning (espaço entre os caracteres).

Compare essas duas fontes bem parecidas…

Quicksand e Museo Sans Rounded

kerning aplicado na Museo é superior. Sem os devidos ajustes, o kerning na Quicksand é imperfeito (preste atenção no ‘o’ e no ‘i’, por exemplo), e realizar ajustes no kerning na web não é muito intuitivo. Existem ferramentas como o kern.js, por exemplo, que permitem especificar o kerning caractere por caractere, mas, grandes trechos de texto tornam isso impraticavel.

“Grande coisa, a diferença é quase imperceptível!”, você argumenta. Mas, o grande lance está nos detalhes.

Originalidade. Outra vantagem é a possibilidade de se destacar ao usar trabalhos originais, únicos. Ao pagar por suas fontes, há uma enorme chance que seu projeto seja singular.

Comunidade. Abrir a sua carteira é sempre uma ótima maneira de encorajar o crescimento da indústria. As empresas criadoras de fontes dependem dos bons ventos de seus comércios para continuarem a criar novas peças. De qualquer modo, nós estamos analisando um custo que pode ser adicionado ao projeto e repassado ao cliente.

Quando estiver selecionando suas fontes, é importante considerar a natureza do trabalho que você está realizando. Nós trabalharemos só com corpo de texto? Há vários cabeçalhos e/ou sub-cabeçalhos? Talvez seja uma revista com decks e citações? Ao usar várias fontes, tenha certeza de estabelecer todos os papéis necessários. Se uma fonte for usada como sub-cabeçalho, não use outra fonte em outro cabeçalho. Deixe claro o propósito da fonte.

Por hora, seguiremos simples e selecionaremos alguns pares de fontes. Nós consideraremos as circunstâncias nas quais elas funcionam bem juntas e perguntaremo-nos o porque.

Talvez você já tenha ouvido isso antes. Combinar fontes de forma bem sucedida depende da harmonia, ou contraste, mas não do conflito. Isso quer dizer que suas fontes podem funcionar muito bem juntas se elas compartilharem algumas qualidades ou forem totalmente diferentes umas das outras. Entretanto, combinações de fontes podem conflitar de diversas formas – sendo bem parecidas, quase uma só fonte.

Vamos examinar cada uma das possibilidades de sucesso.

Descrever duas fontes como harmoniosas sugere a presença de características iguais em ambas. Talvez o kerning delas seja parecido, talvez suas proporções, a altura das letras maísculas seja a mesma. Dê uma olhada nesses exemplos do Kerry Scott Jenkins e você perceberá algumas semelhanças entre as proporções delas.

Uma maneira de alcançar essa harmonia entre fontes é combinar duas da mesma família. Se elas são da mesma família, é certo que elas combinarão, certo?! De qualquer modo, a família Droid, projetada pelo Steve Matteson para o uso em aparelhos Android do Google, compreende vários estilos e espessuras, serifadas e não serifadas. Talvez não seja tão criativa, mas elas funcionam muito bem juntas. Uma funciona como cabeçalho e a outra como corpo do texto.

Droid Serif e Droid Sans

Seja como for, é uma ótima combinação.

Droid Sans e Droid Serif

Elas são simples e modernas, e além disso (como você já deve esperar), elas funcionam bem para a web e para aparelhos com telas menores, devido a sua grande altura-x.

altura-x de uma fonte descreve a altura que vai da linha base até a média de altura máxima dos caracteres minúsculos, como o x. Uma altura-x proporcionalmente grande ajuda na legibilidade e, essas duas, compartilham dessa qualidade.

Igualmente, fontes do mesmo projetistas, geralmente, compartilham das mesmas qualidades o que ajuda a alcançar a harmonia. Preste atenção no quão similar essas fontes de exibição são nas proporções (atente ao ‘o’)..

Cowboyslang e Supria Sans Condensed por Hannes von Döhren

Atente a qualidade do traço dessas duas fontes. Talvez elas pareçam não ter algo em comum, a primeira vista, mas duas fontes nitidas bem executadas podem funcionar muito melhor do que você pensa:

Bevan e Arapey Italic

Linhas mais delicadas funcionam muito bem também:

Anodyne e Poulaire

Contraste entre fontes, geralmente, são uma combinação vencedora, mas, de que formas, fontes podem contrastar? Eis algumas qualidades que devemos procurar:

  • Estilo: Dê uma olhada em qualquer site de fontes e verá que elas são categorizadas como Góticas, Monoespaçadas, Caligráficas, Serifadas, etc. Fontes com diferentes estilos, geralmente, constratarão.
  • Tamanho: Fontes grandes, fontes pequenas. Não é preciso dizer mais nada.
  • Espessura: Variar a espessura das fontes é uma maneira comum de estabelecer hierarquia visual. Hierarquia alcançada por contraste.
  • Forma: Considere as proporções de uma fonte. O comprimento relativo dos descendentes, a curvatura dos ombros, a direção do movimento delas.
  • Cor: Não é algo que focaremos aqui, mas a cor pode determinar, facilmente, se duas fontes funcionam juntas ou não.

Começando pelo mais simples, considere o contraste entre fontes serifadas e fontes não serifadas.

É uma maneira clássica de combinação. Escolha uma fonte serifada decorativa para o cabeçalho e uma fonte firme e não serifada para o corpo. Ou escolha uma fonte não serifada que não seja absurdamente estranha para o cabeçalho e combine-a com uma fonte serifada bem legível para o corpo de texto. Combinação vencedora na maioria dos casos. Vejamos alguns exemplos, usando duas fontes que vem no sistemas operacionais. Sim, isso mesmo. Até elas funcionam bem, juntas.

Georgia e Arial

Onde encontramos elas duas em ação? Dê uma olhada no skeleton. Removidos todos os estilos, Georgia e Arial funcionam muito bem nesse ambiente.

Para um pouco mais de refinamento..

PT Serif e PT Sans

Não esqueça da função do texto para o qual está escolhendo fontes. Nos casos acima, nós mostramos hierarquia através dos tamanhos das fontes; os cabeçalhos são maiores que o corpo do texto. Há outras maneiras de estabelecer quem é que manda, sendo que a espessura é uma das maneiras mais óbvias.

Lora Bold e Istok Web

Digamos que não estamos preocupados com um layout de página completamente textual. Talvez estejamos lidando com dois cabeçalhos e nada mais (uma mensagem de “Em Construção”, por exemplo). Nós podemos arriscar um pouco mais, uma vez que não precisamos lidar com linhas grandes de texto ou com corpos de texto muito grande. Que tal um h1 chamativo combinado a um h2 consolidante?

Fontes condensadas sempre funcionam bem para chamar a atenção, uma vez que elas tomam bastante espaço vertical.

Bebas Neue e Alex Brush

Eis um exemplo de uma combinação desse tipo funcionando muito bem:

O trabalho característico de Gerren Lamson e Simon Walker

E para aqueles interessados, eis os tipos das fontes usadas:

E, novamente, qualidades completamente contrastantes, porém, com hierarquia clara através da cor, o que previne que elas tomem as funções umas das outras…

E, que tal, duas fontes não serifadas? O próximo cabeçalho (Conqueror) é uma fonte inline projetada para trabalhos em títulos. Ela sendo uma fonte totalmente maiúscula, talvez você precise ajustar um pouco o espaçamento entre as letras, como no exemplo abaixo.

Inline são as fontes com linhas em branco, dentro dos traços dos caracteres. – fonts.com

Infelizmente, ela não está disponível para ser usada na web (ainda), então, você terá de usá-la no design impresso, por enquanto… Ela, definitivamente, é uma das minhas fontes favoritas, agora.

AW Conqueror Inline e Gudea

Veja essa fonte serifada: pouco trabalho e máximo impacto.

Alpha Slab One e Mako

Fontes serifadas são, altamente, efetivas em chamar atenção, mas podem chamar demais a atenção, caso não seja cuidadoso. Quase como um toro em uma loja de porcelanato. O exemplo acima funciona muito bem com seu parceiro mais delicado, por serem contrastantes e, ao mesmo tempo, compartilharem algumas qualidades. Elas parecem fontes diferentes, mas, se você examinar bem as curvas, você verá que elas não são tão diferentes quanto você imaginou da primeira vez.

Algumas fontes são tão boas que é difícil de você errar. Tome como exemplo a Buttermilk; suntuosa, elaborada e decorativa. Ela se sairá muito bem com qualquer outra fonte que você tente combinar (desde que você não tente roubar seu brilho!). Aqui, estamos combinando com a Georgia:

Buttermilk e Georgia

E com Aller, uma fonte não serifada e delicada:

Buttermilk e Aller

Esse seria o meu exemplo de combinação entre personalidades conflitantes – personalidades muito fortes. Mas, sabe de uma coisa? Eu gostei disso. Acho que você nunca pode afirmar as coisas com 100% de certeza…

Buttermilk e Eccentric

Não foquemos muito naquilo que não funciona bem. Não queremos azedar as outras comninações desse guia, não é? Isso dito, vamos ilustrar como duas fontes, que são bastante parecidas, podem parecer bem estranhas juntas.

Almendra e Stoke

Mas, por que elas não funcionam bem juntas? A ideia não era constratar e, ao mesmo tempo, garantir algum elemento de semelhança?

Elas são de estilos diferentes; uma é Gótica, a outra Serifada Romana.

Elas tem proporções diferentes; uma é condensada com uma altura-x relativamente grande, enquanto a outra é mais alargada, com ascendentes mais altos.

Ainda assim, elas compartilham a espessura e tamanho, e ambas tem aquelas esporas esquisitas ao fim de cada caractere.

É aí que mora o problema. Ao compartilhar esses três detalhes (espessura, tamanho e decoração), elas ficaram muito parecidas. Elas estão tentando realizar o mesmo papel, mas as pequenas diferenças são conflitantes, gerando um efeito esquisito.

A curvatura das esporas, por exemplo, são completamente esquisitas:

Seus eixos não estão ‘regulados’:

E a forma como a fonte Gótica foi criada, dá uma leve direção a ela, de forma oposta à natureza vertical da fonte Serifada Romana:

Essas diferenças podem não ser problemáticas em outros exemplo, mas, aqui, temos duas fontes que (em um primeiro momento) parecem ser a mesma. É quase como se você estivesse vendo uma celebridade logo ao lado de um boneco de cera dela, lá no Madame Toussauds. Nunca é uma visão confortável.

É difícil dizer o que ‘funciona’ e o que ‘não funciona’. Geralmente, será algo instintivo. Você saberá. Uma vez que você perceba que uma combinação não dá certo, descubra o porque delas não funcionarem. Isso ajudará você a tomar decisões de forma mais rápida no futuro.

Por esses dias, se você for ao diretório de fontes web do Google, você verá sugestões de combinações para cada fonte. Muito legal.

Espero que seu processo de combinação de fontes tenha ficado mais simples, após a leitura desse guia para iniciantes. Se tem uma regra que você tem de levar com você é: “Você não seberá até tentar!”

Aventure-se. Sendo projetistas web, nós temos repositórios cada vez maiores de fontes para usar em nossos trabalhos. Primeiro, faça o básico, depois experimente. Sem dúvida alguma, você terá grandes surpresas com o que conseguirá.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Fonte: Por Ian Yates em tutsplus.com


Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *