Dominando a Tipografia

A escolha da tipografia ideal para uma interface deve ocorrer desde a criação da marca.

A tipografia deve ser selecionada levando em consideração o contexto específico de personificação da marca e todos os elementos que a cercam. Assim como a interface como um todo, a tipografia deve agir como uma extensão da marca, refletindo sua personalidade, características e valores.

Em uma marca que terá fortes pontos de contato com meios digitais, como sites e aplicativos, é necessário ter um cuidado ainda maior na escolha tipográfica. Afinal, essa fonte precisa ser implementada na web de forma fácil e rápida para não prejudicar a usabilidade do usuário.

Algumas dicas para você poder escolher de forma facilitada uma fonte nesses casos:

• Google Fonts: É uma biblioteca de fontes de código aberto que, desde 2010, tem a iniciativa de tornar a web mais rápida e moderna. Além de possuir uma boa curadoria de suas fontes, todas possuem licença de uso comercial, são de fácil implementação e oferecem uma ampla gama de fontes para escolher.
• De olho no Kerning: O kerning, seja em um texto, logotipo ou interface, é uma característica extremamente importante de uma fonte. Escolher uma fonte com um bom kerning entre as letras é imprescindível em uma interface. No código, não podemos ficar alterando o espaçamento entre cada letra o tempo todo, então ter essa noção deixará seu sistema muito mais leve e harmonioso.
• Variáveis são uma ótima escolha: A utilização de fontes variáveis em seu projeto pode oferecer um controle muito melhor sobre a hierarquia de todas as informações presentes na tela. Definir pesos específicos para cada estilo de fonte pode ser extremamente útil em alguns casos.

Classificações dentro da interface

Dentro do Material Design, as fontes possuem 5 classificações diferentes, com 3 estilos cada uma, que auxiliam na criação de uma boa hierarquia visual e aceleram o processo de definição tipográfica dentro do Design System.

Para a definição de tamanhos, é utilizada uma escala tipográfica que inicia em 14px e é multiplicada ou dividida por 1.125 para a definição do próximo tamanho (ou do anterior). Essa escala permite que não seja necessário fazer adaptações entre dispositivos móveis e desktop, agilizando o desenvolvimento e facilitando o trabalho.

As tipografias também são classificadas como “Brand” e “Plain” dentro do Material Design, sendo as “Brand” tipografias mais marcantes e chamativas para textos grandes, e as “Plain” mais sóbrias e legíveis para textos menores.

Cada classificação do Material Design define um uso específico para a fonte no Material. A seguir, vou descrever cada um deles:

Display

Fontes Display são utilizadas para textos mais curtos e importantes dentro do sistema e funcionam melhor em telas grandes. Esse estilo permite o uso de fontes mais chamativas e com estilo de escrita.

Headline

Cumprem uma função semelhantes a Display, porém é melhor aproveitado em telas menores, como celulares e tablets. Assim como a Display, fontes mais chamativas caem muito bem aqui.

Title

As fontes Titles são um pouco menores que as “Headlines” e são utilizadas para dar ênfase média aos textos. Nesse caso, é mais arriscado utilizar fontes com estilo de escrita.

Body

Para as fontes do Body, não é recomendável utilizar fontes chamativas e diferentes, pois isso pode dificultar a leitura do usuário, prejudicando sua experiência. Essas fontes são utilizadas para blocos de texto maiores em diferentes tamanhos.

Label

As fontes do tipo Label são menores e geralmente utilizadas em botões, chips e outros componentes do design system. Por serem menores, recomenda-se o uso de fontes mais sóbrias e legíveis.

As imagens acima são do Design System da Atlas, onde utilizamos a fonte Epilogue, uma tipografia moderna e variável para toda a construção da marca e sistema.

Agora, vou compartilhar algumas dicas que aprendi durante o desenvolvimento da Atlas e meus estudos:

1. Cuidado com o peso das fontes: Dependendo do tamanho de cada fonte, o peso pode dificultar a leitura. Por exemplo, fontes muito leves podem ser ruins em textos pequenos devido à baixa qualidade de alguns monitores, enquanto fontes muito negritas podem dificultar a leitura. Estudar e testar cada caso é extremamente necessário.
2. Tamanho das linhas: Linhas muito longas cansam os olhos só de olhar, além de tornar a leitura mais difícil e complicada. O ideal é manter as linhas de texto entre 40 e 60 caracteres.
3. Altere pouco os padrões do Material: As características pré-estabelecidas pela Google já são muito boas, portanto, alterações são necessárias apenas em casos específicos.
4. Pense em todos os tipos de usuários: Pensando em acessibilidade, devemos presumir que todos os tipos de usuários irão utilizar a interface, então tenha cuidado com os tamanhos das fontes e o contraste delas com o fundo. Teste e experimente tudo com diferentes pessoas.

Resumindo tudo, escolher a tipografia certa pra sua interface é super importante. Tem que combinar com a marca e ser fácil de implementar nos sites e apps. As dicas que a gente deu, tipo usar o Google Fonts, prestar atenção no espaçamento entre as letras e considerar as fontes variáveis, vão te ajudar muito nessa escolha. Seguir as diretrizes do Material Design também é uma boa ideia. E não esquece da acessibilidade, tá? Testa com diferentes pessoas pra ver se todo mundo consegue ler direitinho. Assim, você vai criar uma interface pika, que representa bem a sua marca e realmente agregue valor ao seu trabalho.