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.
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.
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.
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.
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á.
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.
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.
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.
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.
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.
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:
|
1 |
Golden Ratio (1:1.618) |
|
1 2 3 4 5 |
1.000 x 1.618 = 1.618 1.618 x 1.618 = 2.618 2.618 x 1.618 = 4.236 4.236 x 1.618 = 6.854 6.854 x 1.618 = 11.089 |
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.
|
1 |
Golden Ratio (1:1.618) |
|
1 2 3 4 5 6 |
... 11.089 x 1.618 = 17.942 17.942 x 1.618 = 29.03 29.030 x 1.618 = 46.971 46.971 x 1.618 = 75.999 75.999 x 1.618 = 122.966 |
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.
|
1 2 3 4 5 |
Minor Second 15:16 Major Second 8:9 Minor Third 5:6 Major Third 4:5 ... |
Portanto, em vez de usar a proporção áurea, você pode usar uma proporção que produz intervalos menores, como o Quarto Perfeito.
|
1 |
Perfect Fourth (3:4) |
|
1 2 3 4 5 6 7 |
... 9.969 x 1.333 = 13.288 13.288 x 1.333 = 17.713 17.713 x 1.333 = 23.612 23.612 x 1.333 = 31.475 31.475 x 1.333 = 41.956 41.956 x 1.333 = 55.927 |
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.
|
1 |
Font Sizes |
|
1 2 3 4 5 |
Header 1: 55px Header 2: 42px Header 3: 31px Header 4: 24px Header 5: 14px |
|
1 2 |
Body: 17px Caption: 14px |
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.
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.
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!