Tipografia em design

As primeiras impressões importam, como todo profissional de marca sabe. A maioria dos usuários sairá de uma página da web muito rapidamente se o conteúdo não for claro e atraente. Sua equipe criativa trabalha arduamente para transmitir a mensagem da sua marca em uma linguagem envolvente e acessível. Agora, eles contam com você para tomar boas decisões de tipografia e design, garantindo melhor legibilidade e maior engajamento com a marca.

Continue lendo para saber mais sobre:

• O que é tipografia e por que ela é importante
• 5 tipos mais populares de fontes e 6 elementos-chave da tipografia
• Como encontrar e explorar tipos de letra e fontes com o Figma

O que é tipografia?

Na prática do design, tipografia envolve criar ou selecionar um sistema de tipos de letra e fontes para expressar a palavra escrita. Essa forma de arte criativa pode evocar emoções fortes, usando letras visualmente atraentes e organizando o texto para expressar a personalidade da sua marca. Uma tipografia bem elaborada pode melhorar a comunicação clara, com boa legibilidade e leitura confortável.

Por que a tipografia é importante?

A tipografia desempenha um papel fundamental na criação de sites, apps, e-mails, eBooks e muito mais. Uma boa tipografia pode te ajudar a:

• Atrair usuários com tipos de letra e elementos tipográficos que chamam a atenção antes mesmo de começarem a ler.
• Estabelecer hierarquia visual com tamanhos e pesos de fonte consistentes, fontes com ou sem serifa, combinações de fontes e famílias tipográficas que orientam os usuários e melhoram a legibilidade.
• Construir reconhecimento da marca. Quando usada de forma consistente, uma boa tipografia ajuda os usuários a identificar sua marca por meio dos tipos de letra e estilos de fonte usados no conteúdo da marca.
• Apoiar objetivos de conteúdo. Espaçamento consistente entre letras, comprimento de linhas, uso de maiúsculas e minúsculas e outros elementos tipográficos aumentam a legibilidade, enquanto fontes usadas como elementos de design gráfico ampliam o tom e o significado.

Uma breve história da tipografia

Johannes Gutenberg ajudou a impulsionar a evolução da tipografia europeia no século XV, quando inventou a primeira prensa de impressão com tipos móveis de metal. Gutenberg utilizou formas de letras caligráficas em estilo antigo (também conhecido como gótico) para compor linhas mais longas de texto para manuscritos e textos religiosos. Os impressores na Itália logo criaram um tipo de letra mais simples e compacto — originalmente chamado Antiqua, agora mais conhecido como Roman. Em seguida, impressores europeus lançaram tipos itálicos, permitindo compor ainda mais palavras por página.

Avançando para o fim do século XVIII e o início do século XIX, surgiram no mercado as primeiras tipografias serifadas modernas. Depois vieram as tipografias sans serif, que dominaram o universo da impressão europeia até o século XX. Foi então que tipos mais limpos e legíveis, como Times New Roman, Futura, Helvetica e Arial, passaram a predominar. Hoje, designers gráficos e web designers do mundo todo têm acesso a grandes bibliotecas de tipos de letra e fontes.

5 tipos de fontes mais populares

Designers modernos geralmente escolhem entre cinco tipos populares de tipos de letra: serif, sans serif, script, monoespaçada e display. Cada tipo de letra inclui uma família de fontes, cobrindo os diferentes estilos desse tipo. Por exemplo, Helvetica é um tipo de letra, enquanto Helvetica Light e Helvetica Regular são fontes.

• Fontes serifadas: esse tipo de letra formal e mais tradicional possui pequenas linhas ou traços que se estendem das extremidades superiores e inferiores das letras. Marcas estabelecidas como New York Times, Sony e J.P. Morgan optam por tipos de letra serifados. Exemplos incluem Times New Roman e Garamond.
• Fontes sans serif: esse tipo de letra simples e moderno não inclui os adornos encontrados nas fontes serifadas. É uma escolha popular para marcas jovens e startups de tecnologia (como Target, Airbnb e DoorDash). Exemplos de tipos de letra sans serif incluem Helvetica, Arial e Calibri.
• Fontes script: esse tipo de letra fluido e cursivo pode variar de caligrafia elegante a estilos de escrita manual mais descontraídos. Não é ideal para texto corrido; fontes script funcionam melhor em citações, assinaturas e cabeçalhos curtos. Exemplos incluem Snell Roundhand, Pacifico e Scriptina.
• Fontes monoespaçadas: esse tipo de letra retrô, em estilo de máquina de escrever, exibe letras e espaçamento de largura fixa, de modo que cada caractere ocupa o mesmo espaço. Usadas em código-fonte para facilitar a leitura, as tipografias monoespaçadas também aparecem em diversos sites e designs gráficos. Exemplos incluem Courier, Bergen Mono e Source Code Pro.
• Fontes de exibição: também conhecidas como decorativas, essas tipografias chamativas podem adicionar personalidade e originalidade a logotipos, banners e cabeçalhos. Exemplos de fontes de exibição incluem Clearview, Johnston e Skywalker.

Principais elementos da tipografia

Você pode ajustar com precisão a aparência, a legibilidade e o tom de uma palavra, linha de texto ou produto ao modificar um ou mais elementos tipográficos.

Alinhamento

Para alcançar equilíbrio e ajudar os usuários a navegar facilmente pela página, alinhe elementos de design como logotipo, imagem, cabeçalho e corpo de texto. Equilibre cada elemento do design e utilize margens e espaçamento de forma consistente. Alinhe o texto à esquerda, à direita, justificado ou centralizado de acordo com as necessidades do seu projeto. Por exemplo, designers podem centralizar um título ou citação curta, mas alinhar à esquerda textos mais longos.

Cor

Selecione uma paleta de cores consistente com sua marca e que transmita sua mensagem com clareza. Ajuste a opacidade do texto e use cores complementares com bom contraste entre si para garantir legibilidade e acessibilidade. Você pode usar um gerador de círculo cromático para criar uma paleta bem equilibrada. Dica profissional: consulte as Diretrizes de Acessibilidade para Conteúdo Web (WCAG) para obter proporções de contraste ideais. Cores mais vibrantes e intensas podem funcionar melhor em títulos e subtítulos, enquanto cores neutras são mais adequadas para grandes blocos de texto.

Hierarquia

Desenvolver hierarquia na tipografia ajuda a priorizar e destacar informações essenciais, facilitando a leitura rápida e a assimilação do conteúdo. Faça os títulos maiores que os subtítulos, e os subtítulos maiores que o texto corrido. Por exemplo, o texto corrido de um site geralmente tem 16px, enquanto cabeçalhos H1 são definidos com 48px. Brinque com espaço em branco, alinhamento de texto, cor e diferentes tipos de letra para reforçar a hierarquia visual.

Kerning

Ajuste a quantidade de espaço entre letras individuais para que a distância pareça consistente. Um bom kerning ajuda a aumentar o apelo visual do texto e melhora a legibilidade.

Entrelinhas

Entrelinhas se refere à altura de linha — a distância entre a linha de base de uma linha de texto e a linha de base da linha acima dela. Em geral, uma altura de linha entre 1,125 e 1,200 vezes o tamanho da fonte (112,5%–120.0%) resulta em melhor legibilidade. Dito isso, cada tipo de letra exige ajustes finos — incluindo um espaçamento entre linhas cuidadoso.

Tracking

Você pode melhorar a legibilidade com tracking (também conhecido como espaçamento entre caracteres), que abrange o espaçamento geral entre letras em uma palavra ou linha de texto. Aumente o tracking para adicionar espaço e diminua o tracking para reduzi-lo. Palavras ou frases exibidas totalmente em letras maiúsculas às vezes ficam mais fáceis de ler com tracking aumentado.

Como escolher o tipo de letra certo

O processo de escolha de um tipo de letra se divide nestas etapas principais:

• Considere o escopo, os requisitos e os objetivos do seu projeto. Faça perguntas-chave sobre o conteúdo com sua equipe: como estamos entregando o conteúdo (via app, site, e-mail ou material impresso)? Quem é o nosso público e quais são suas necessidades? Quais tipos de letra e fontes nossos concorrentes usam? Tenha em mente que alguns tipos de letra funcionam melhor para cabeçalhos do que para texto de menu. Outros possuem grandes famílias de fontes, com scripts internacionais, glifos e outros caracteres especiais.
• Crie um mood board para desenvolver um tom visual, com base em pesquisas sobre usuários e concorrentes. Para começar, use o modelo de mood board do FigJam. Dica profissional: observar soluções comparáveis pode ajudar a identificar padrões e normas úteis.
• Explore opções de fontes no seu computador ou em sites como Google Fonts. Procure por uma fonte com pistas visuais que ecoem o que você deseja que seu produto ou marca transmita. Por exemplo, se o tom da sua marca é profissional em vez de descontraído, escolha uma fonte séria com poucos adornos. Qual destes exemplos de design da Figma parece mais profissional para você? Se você escolheu o módulo à esquerda, está no caminho certo. Esse módulo utiliza Roboto, uma fonte sans serif limpa e fácil de ler. O módulo à direita inclui Almendra, uma fonte baseada em caligrafia frequentemente usada em livros infantis.

• Escolha tipografias que sejam adequadas à marca e chamativas para apoiar as metas do seu projeto. Considere a construção geral das letras (por exemplo, alturas-x, alturas das maiúsculas, contraformas, ascendentes e descendentes), a capacidade de escala, a legibilidade, a personalidade e a decoração. Esses elementos influenciam a aparência geral e a sensação transmitida por um tipo de letra.
• Experimente suas fontes com conteúdo real e relevante. Esta é a melhor maneira de escolher uma fonte que envolva seus usuários. Experimente a fonte em alguns tamanhos diferentes para garantir que funcione tanto para texto grande quanto pequeno.
• Teste as cores da sua marca com o tipo de letra. Comececolocando texto preto em um plano de fundo branco e texto branco em um plano de fundo preto. Em seguida, aplique a cor principal da sua marca ao texto e veja como a tipografia funciona contra planos de fundo brancos e pretos. Inverta as cores para ver como o texto branco e preto fica em um plano de fundo na cor principal da sua marca.

Peso e estilo

Em um tipo de letra, por exemplo, a Montserrat, de Julieta Ulanovsky e estúdio, existem vários estilos e pesos — como regular, negrito, itálico, fino, preto, etc. — e cada um possui uma fonte. Uma fonte é um arquivo para instalar e usar um conjunto de caracteres em um peso de fonte e estilo de texto específicos. Um tipo de letra com vários pesos tem uma fonte para cada peso; juntas, elas são conhecidas como uma família tipográfica.

O tipo de letra Montserrat tem uma família tipográfica com 18 fontes: Thin, Thin Italic, Extra-Light, Extra-Light Italic, Light, Light Italic, Regular, Regular Italic, Medium, Medium Italic, Semi-Bold, Semi-Bold Italic, Bold, Bold Italic, Extra-Bold, Extra-Bold Italic, Black e Black Italic.

Peso se refere à espessura do traço de uma letra. Um tipo de letra pode variar em pesos que vão de hairline a ultra-black e ter muitas fontes intermediárias, enquanto alguns tipos de letra podem existir em apenas um peso. Esses pesos também têm uma associação numérica, o que é útil de entender ao programar ou colaborar com um desenvolvedor. Os pesos geralmente correspondem a números em uma escala de 100 a 900, em intervalos de 100: Regular 400, Medium 500, Semi-Bold 600, Bold 700 etc.

Estilo de fonte é o ajuste dos caracteres ou da caixa, como itálico e todas em maiúsculas, respectivamente. Alguns tipos de letra não têm opção de estilo e, às vezes, oferecem apenas o peso Regular.

Caixa das letras, também chamada simplesmente de “case”, é a distinção entre letras menores, como minúsculas, e letras maiores, como maiúsculas ou capitais. A maioria dos conjuntos tipográficos inclui letras nos dois formatos, enquanto fontes como a Bangers são definidas apenas em maiúsculas. Tipos de letra definidos apenas em maiúsculas ou apenas em minúsculas são bem menos comuns.

Em inglês, os diferentes estilos de caixa são usados de formas distintas, dependendo do contexto:

• Title Case é um estilo de caixa mista em que todas as palavras de uma frase são capitalizadas, com exceção de artigos, preposições curtas e conjunções. Essas exceções são relativamente subjetivas.
• Sentence case é o formato ao qual estamos acostumados a ver textos escritos, incluindo esta frase.
• CAIXA ALTA é quando todo o texto está em letras maiúsculas e é comumente usado em cabeçalhos, logotipos, texto de botões ou outros tipos de rótulos. Use esse estilo para dar ênfase, e não em textos longos, já que a ausência de ascendentes e descendentes pode dificultar a leitura em grandes quantidades. Caixa alta também é usado on-line para sugerir gritos; portanto, evite utilizá-lo em interfaces de chat e conversação.
• As versaletes são semelhantes às letras maiúsculas, mas têm a altura da altura x da fonte. As versaletes são usadas para se diferenciar do texto corrido e dos títulos; no entanto, não estão disponíveis em muitos tipos de letra.
• todo o texto em minúsculas é uma escolha estilística usada em alguns produtos e logotipos por motivos estéticos.

Tamanho

Definir e alterar o tamanho da fonte pode ser uma decisão difícil. Isso depende muito do meio em que o texto será exibido, como papel, celular ou outdoor, e pode variar conforme o dispositivo do visualizador ou a responsividade do design.

É importante estabelecer hierarquia com suas escolhas tipográficas, usando o tamanho como um dos elementos de ênfase.

No desenvolvimento web, alguns tamanhos precisam ser definidos, como os de título, subtítulo, texto corrido, texto de menu e rodapé, entre outros. Muitos designers começam pelo tamanho do título, também conhecido como H1, mas pode ser útil começar pelo tamanho do texto corrido, já que é assim que desenvolvedores front-end costumam implementá-lo. Quando um desenvolvedor trabalha com ems, uma unidade de medida baseada em escala, o tamanho do texto corrido é 1em, e todos os outros tamanhos de texto são múltiplos ou frações desse valor.

Por exemplo, um tamanho comum de texto corrido para a web é 16px. O H1 pode ser definido como 3em, ou seja, três vezes o tamanho do texto corrido — neste caso, 48px. Como a página da web será projetada para vários tamanhos de tela, os designs que você cria podem exigir tamanhos de fonte diferentes dependendo do dispositivo do usuário. O desenvolvedor pode fazer com que o tamanho do texto corrido mude conforme as dimensões do navegador do usuário, e todo o restante do texto será escalado de acordo.

Detalhes

Grande parte da tipografia está nos pequenos detalhes e nas nuances.

Por exemplo, ao diagramar um texto, um dos aspectos a se observar é o rag. O rag é a margem irregular de textos alinhados à esquerda ou à direita. Ele pode ser ajustado aumentando ou diminuindo a largura de uma caixa de texto ou alterando o espaçamento entre letras de todo o texto corrido.

Quando uma ou duas palavras acabam ficando sozinhas no final de um parágrafo, isso geralmente é chamado de “viúva”. Ou, no início da coluna seguinte, de “órfã”.

No entanto, como May-Li Khoe aponta:

Em vez disso, chame de "penduricalhos".

À medida que as caixas de texto são ajustadas para evitar penduricalhos, o comprimento da linha também é ajustado. Para texto corrido em inglês, limitar o comprimento da linha a aproximadamente 40 a 60 caracteres, incluindo espaços e pontuação, é ideal para acessibilidade e legibilidade. Se o comprimento das linhas precisar ser maior que 60 caracteres, aumente a entrelinha para melhorar a legibilidade.

Uma das formas mais simples de fazer um documento ou interface parecer bem projetado é manter consistência na forma como os elementos ocupam o espaço.

Digamos que a tela de um app tenha um título posicionado a 100px do topo do quadro ou da tela. Você vai querer que todas as outras telas do app com títulos semelhantes tenham esses títulos no mesmo lugar.

Guias e medições são suas aliadas aqui — basta clicar e arrastar a partir de uma régua no Figma para criar uma guia e manter a tecla Alt pressionada quando um objeto estiver selecionado para ver a distância até os objetos ao redor.

Considere o lado esquerdo, ou a margem vertical esquerda, de um site, pôster, tela de app, infográfico etc., que contenha um logotipo, uma imagem, um título e algum texto corrido. Alinhar esses elementos entre si facilita o movimento do olhar pela página e também faz com que o layout desse conteúdo pareça mais pensado e intencional.

Justificação é um conceito de alinhamento específico para blocos ou linhas de texto.

• Texto alinhado à esquerda é quando o início de cada linha começa no mesmo valor x ao longo da margem esquerda. Isso também é conhecido como alinhamento à esquerda e cria um rag à direita.
• Texto alinhado à direita é quando o final de cada linha fica alinhado à margem direita. Isso também é conhecido como alinhamento à direita e cria um rag à esquerda.
• Texto justificado é quando as extremidades esquerda e direita das linhas ficam alinhadas aos dois lados da caixa de texto. O espaçamento entre letras e entre palavras é ajustado para definir cada linha com uma largura consistente. Não há rag em texto totalmente justificado.
• Texto centralizado é a ausência de justificação.

Inicie suas explorações tipográficas com a Figma

A Figma oferece recursos de design profissionais para você começar, incluindo a ferramenta de design da Figma e exemplos de exploração de fontes. Você também pode construir uma moodboard de marca usando o criador de moodboards do FigJam.

Para mais dicas profissionais, consulte o artigo da Figma sobre como construir e implementar sistemas tipográficos no Figma.

Precisa de inspiração? Confira a robusta biblioteca de modelos de tipografia, exemplos e guias de estilo compartilhados pela Comunidade do Figma.

Pronto para encontrar uma fonte que eleva sua marca?