Tipografia: um processo para escolher fontes

Escolher fontes é processo complexo, que exige experiência (e uma pitada de talento). Para ajudar, conheça este guia com um processo para escolher fontes.

Ir para o artigo

Escolher fontes é um processo custoso e complexo, que exige experiência (e talvez uma pitada de talento). Para escolher a fonte certa — ou, para ser mais técnico, o tipo certo — para o design certo é tarefa difícil, complexa.

Para facilitar, disponibilizamos este guia com um processo para escolher fontes para que você possa ficar ciente de algumas técnicas e métodos necessários para um bom match entre fonte e design.

Processo para escolher fontes: imagem bonita com todas as letras do alfabeto

Uma das habilidades mais importantes que você pode aprender como designer é como escolher a tipografia (ou como escolher fontes). Isso ocorre porque o texto é uma das principais maneiras pelas quais designers podem se comunicar com as pessoas. A tipografia pode fazer ou quebrar um design.

Há beleza e complexidade na tipografia. Algumas pessoas dedicam suas carreiras inteiras a tipos. Felizmente, o trabalho delas está bem documentado, por isso temos toneladas de recursos online para tipografia.  :-)

Este artigo foi concebido para servir como ponto de partida para ajudar você a aprender como escolher o tipo de seus projetos. Ele incentivará você a explorar fontes e combinações de fontes além daquelas com as quais você está familiarizado.

Identifique seu propósito

Antes de fazer qualquer outra coisa, primeiro identifique o propósito do seu projeto. Quais informações você deseja transmitir? Qual é o meio para o seu design?

Um bom design alinha tipografia com finalidade. Isso ocorre porque a tipografia é fundamental para definir o humor, o tom e o estilo em seus designs.

Por exemplo, se você estiver criando um cartão comemorativo com uma ilustração pesada, escolha uma fonte que se ajuste ao estilo da ilustração. Harmonize a fonte com o resto do design.

Processo para escolher fontes: exemplo de como aplicar uma fonte de maneira harmoniosa.

Se você está projetando uma página de destino (landing page) com enfoque mais visual, escolha uma fonte simples que não prejudique suas imagens. Use o tipo como forma de enfatizar informações para comunicar o significado.

Processo para escolher fontes: exemplo de landing page
Se imagens são o foco, escolha fontes simples para que elas tenham destaque.

Identifique seu público

Depois de determinar o objetivo do design, identifique seu público. Este passo no processo de escolher uma fonte é crucial porque a idade, interesse etc. influenciarão as opções de fonte.

Depois de esclarecer o propósito do design, identifique seu público. Essa etapa é crucial, pois as informações sobre seus público-alvo, como idade, interesses e aspectos culturais, podem influenciar as decisões que você toma sobre tipografia.

Por exemplo, algumas fontes são mais apropriadas para crianças. Ao aprender a ler, as crianças precisam de fontes altamente legíveis com formas de letra generosas. Um bom exemplo disso é a fonte Sassoon Primary.

Sassoon Primary foi desenvolvida por Rosemary Sassoon a partir de sua pesquisa sobre o tipo de letras que as crianças acharam fácil de ler.

Processo para escolher fontes: exemplo da fonte Rosemary Sassoon

Outras fontes são mais apropriadas para idosos: fontes amigáveis para uso sênior usam tamanhos legíveis, cores de alto contraste e evitam estilos decorativos.

Ao escolher o tipo, leve em consideração seu público e suas necessidades. Simplificando, tenha empatia com seu público.

Procure inspiração ao escolher fontes

Veja o trabalho de outros designers. Tente entender como eles tomaram suas decisões.

Inspiração de fontes

Para inspiração, The 100 Best Free Fonts  é um ótimo artigo para colocar você na mentalidade certa para escolher tipos. No artigo, CreativeBloq explica as motivações por trás de cada fonte.

Outro recurso útil é o 100 Greatest Free Fonts Collection for 2015  da Awwwards.

O Invision também compilou um gigantesco repositório de recursos de tipografia. Você encontrará muitas fontes de inspiração lá.

Processo para escolher fontes: screenshot do site Typ.io
Typ.io, para inspiração de fontes

Para inspiração de sites reais, confira Typ.io. O site seleciona a inspiração da fonte em toda a web. Além disso, o site fornece definições de fontes CSS na parte inferior de cada amostra de inspiração.

Além de procurar em sites dedicados de inspiração para fontes (que, certamente, ajuda muito ao escolher fontes), visite seus sites favoritos e confira as fontes que eles usam.

Uma boa ferramenta para isso é WhatTheFont. WhatTheFont é uma extensão do Chrome que permite inspecionar as fontes da web passando o mouse sobre elas.

Aliás, já citamos ele aqui no dpw, em nosso artigo sobre identificadores de fontes.

Inspiração para emparelhamento de fontes

Mas é preciso ir além de somente escolher as fontes; é preciso também a atenção/inspiração para emparelhamento de fontes. O emparelhamento de fontes é tão importante quanto as próprias fontes.

Um bom pareamento de fontes ajuda a estabelecer a hierarquia visual e melhorar a legibilidade de seus projetos.

Processo para escolher fontes: screenshot do site Typewolf

Para inspiração, comece com o Typewolf. Typewolf faz curadoria de emparelhamento de fontes para inspiração de sites diferentes. Além disso, eles também têm recomendações de fontes e guias de tipografia detalhados. É um tesouro para tipógrafos!

A FontPair também organiza a inspiração de emparelhamento de fontes, especificamente para o Google Fonts. Você pode classificar por combinações de estilo de tipo, como sans-serif e serif, ou serif e serif.

Processo para escolher fontes: screenshot do site FontPair

Por último, há toneladas de coleções de emparelhamento de fontes criadas por designers online. Por exemplo, Tipografia: Combinações de fontes do Google e tipografia: Combinações de fontes do Google Volume 2. Basta pesquisar “emparelhamento de fontes” em sites como Behance e Dribbble.

Escolha suas fontes

Armado de pesquisa e inspiração, você está pronto para escolher o seu tipo. Quando se trata de escolher o tipo, tenha em mente os seguintes princípios: legibilidade e finalidade.

Processo para escolher fontes: imagem ilustrativa, mostrando harmonia entre fonte e cores
Antes de escolher uma fonte, pesquise a finalidade pretendida.

Escolha fontes convencionais e fáceis de ler. Evite fontes altamente decorativas em favor de fontes simples e práticas. Além disso, esteja atento ao propósito de uma fonte.

Por exemplo, algumas fontes são mais adequadas para cabeçalhos do que para texto do corpo.

Por esse motivo, antes de escolher uma fonte, pesquise sua finalidade.

Processo para escolher fontes: imagem ilustrativa, mostrando harmonia entre fonte e cores

Em termos de pareamento de fontes, mantenha-o simples com no máximo 3 fontes diferentes. Além disso, pareie fontes que se contrastam entre si. Isso ajudará a guiar os olhos dos leitores, primeiro para os cabeçalhos e depois para os textos do corpo.

Você também pode criar contraste visual usando diferentes tamanhos de fonte, cores e pesos.

Para fontes da Web, você pode usar o Google Fonts, Typekit e Font Squirrel. O Google Fonts é gratuito, o Typekit e o Font Squirrel têm fontes gratuitas e pagas.

Determine os tamanhos das fontes

O próximo passo para escolher fontes depois de estabelecer uma combinação, é determinar o tamanho das fontes. Uma ótima ferramenta para isso é a Modular Scale de Tim Brown, o chefe de tipografia da Adobe — inclusive, é uma das indicações de nossos Recursos front end.

O Modular Scale é um sistema para identificar proporções historicamente agradáveis para criar escalas para determinar os tamanhos de tipos.

Processo para escolher fontes: screenshot da ferramenta Modular Scale

Por exemplo, você pode usar uma escala com base na proporção áurea. Aqui seriam suas primeiras cinco opções de tamanho de fonte computada:

Um problema que você pode encontrar é que sua proporção é muito grande. Dê uma olhada no que acontece com os últimos intervalos da nossa escala com base na proporção áurea.

Como você pode ver, os intervalos entre os números começam a ficar muito grandes. Para a maioria das interfaces, você precisa de intervalos menores. Felizmente, a Modular Scale tem uma variedade de proporções baseadas em geometria, natureza e música.

Portanto, em vez de usar a proporção áurea, você pode usar uma proporção que produz intervalos menores, como o Quarto Perfeito.

Depois de ter definido em uma escala, você pode escolher tamanhos de fonte da sua lista e arredondá-los para o decimal mais próximo.

O método Modular Scale usa precisão matemática para gerar tamanhos de fonte. No entanto, é apenas um guia. Use este método como ponto de partida e ajuste os tamanhos com o olho.

Crie um guia de estilo (styleguide) de tipografia

A última etapa do processo é criar um guia de estilo (styleguide) para sua tipografia para ajudar a padronizar o tipo em seus projetos.

Processo para escolher fontes: screenshot de uma tela do programa Sketch com um style guide de fontes
Estilos compartilhados no Sketch.

Em programas como o Sketch, você pode criar estilos de texto compartilhados para inserir rapidamente texto com estilos já aplicados a partir de sua guideline.

É durante essa etapa do processo que você pode ajustar e finalizar seus atributos de texto, como cor, peso e tamanho.

Uma palavra sobre cores: ao escolher a cor, leve em conta sua paleta de cores. Escolha cores para o seu tipo que se harmonizam com sua paleta de cores.

Processo para escolher fontes: screenshot de uma tela do programa Sketch com um style guide de fonte

Em seu guia de estilo, certifique-se de incluir pelo menos os seguintes itens:

  • Definições de fonte
  • Tamanhos de fonte
  • Cores de fonte
  • Usos de exemplo.

As diretrizes de tipografia de material design do Google são um bom exemplo do que incluir em um guia de estilo. Alguns outros exemplos incluem os guias de tipografia do Mailchimp, Apple e Focus Labs.

Tipografia é sobre experimentação; é ao mesmo tempo ciência e arte

Repetindo para dar ênfase, tipografia é sobre experimentação; é ao mesmo tempo ciência e arte.

Se fosse fácil escolher fontes para projetos de design e web, todos fariam isso muito bem, certo? Mas, voltando ao mundo real, trata-se de um processo bastante complexo, que demanda muito esforço e estudo para ser feito com maestria.

Processo este que, caso queira, você deve dominar através de muita prática e experimentação.

Desafiamos você a sair da sua zona de conforto e explorar mais possibilidades de fontes em seu designs!