Mas pensando no digital, é bem mais do que estética.
A fonte é parte fundamental para representar a marca, dá o tom do discurso, se é leve ou pesado, estável e sólido, incisiva ou suave.
Aí você encontra aquela fonte perfeita, que atende a tudo que precisa representar, e por isso mesmo, ela deve estar presente no site, no impresso, nos e-mails…
No trabalho tivemos esse problema, e eu e a @Stella Burin conversamos muito a respeito, o que me fez começar a pesquisar sobre o assunto. Comecei com a acessibilidade, mas sabe como é… Um assunto puxa o outro e acabei descobrindo 6 pontos importantes a considerar quando se escolhe uma fonte:
- Custo
- Web Fonts
- Acesso e segurança
- E-mails
- Tempo de carregamento
- Acessibilidade
Sei que virou um textão, mas eu me diverti pesquisando, pode ser que possa ser útil para você =)
A seguir eu faço uma análise de cada um desses pontos:
1. Custo
Uma fonte é um software, e a licença funciona do mesmo modo. Cada criador de fonte pode escolher como vai cobrar a fonte. Outras empresas de software costumam comprar pacotes de fontes e incluir nos seus produtos. A Microsoft faz isso com o Windows e com o Office, a Apple com macOS, assim como a Adobe também já carrega uma série de fontes já licenciadas e embutidas nas aplicações.
Mas nem todas as fontes são assim. E o preço para ter no seu computador e usar na web variam muito.
2. Web fonts
Usar a fonte no site é o segundo problema. A fonte precisa ser uma versão otimizada para web. O preço de licença de uma fonte proprietária pode chegar a US$ 200,000 (dependendo de quantos estilos e quantos acessos tem o site).
Ah, e também temos o OFL – Open Font License, uma fonte open source, muito usada pelo Google, por exemplo. E eles até ajudam criando um link para você não precisar nem copiar a fonte para o seu servidor web!
Genial, né? Se não fosse o terceiro ponto…
3. Acesso e segurança
O servidor em que está o seu site deve permitir você acessar sites externos, senão não irá funcionar. Mas mesmo que o seu site permita que você use a fonte de outro local, pode ser quem esteja acessando tenha um firewall que não permita que o site faça links externos. E o que acontece? Sua fonte escolhida com carinho não aparece. E se no código não foi definida uma fonte secundária, pode não dar para ler nada. E por falar em fonte secundária…
4. E-mails
E-mail são os mais difíceis de conseguir uma consistência de fontes. É possível usar fontes importadas hoje em dia, mas depende muito do cliente de e-mail que o usuário estiver. A estratégia mais segura é usar uma das famosas fontes de sistema fontes presentes em quase todos os sistemas operacionais, como Arial, Tahoma, Verdana e Times New Roman.
5. Tempo de carregamento
De 2011 para 2018, houve um crescimento de 850% dos sites usavam fontes customizadas. E um impacto muito grande é o tempo de carregamento (principalmente para fontes de outros servidores). O keycdn.com fez um teste de performance e apenas uma fonte inserida pode levar até 200 ms a mais para carregar e renderizar na tela.
6. Acessibilidade
Sabemos que os usuários lêem somente 28% das palavras numa página (isso quer dizer que, ao contrário de você, a maioria das pessoas não chegou até aqui). Com essa baixa taxa de leitura, qualquer dificuldade, por menor que seja, vai reduzir ainda mais a leitura.
Legibilidade é o nível mais baixo de acessibilidade de um texto: é o que permite que a pessoa consiga distinguir entre os caracteres facilmente para identificar palavras. (por curiosidade, os outros pontos de acessibilidade do texto são “nível de leitura” – complexidade do texto e “compreensão” – que é a interpretação do texto).
Este estudo indica que fontes condensadas são mais difíceis de ler, assim como textos em maiúsculas.
E há um padrão recomendado:
Altura da linha (principal) pelo menos 1.5x o tamanho da fonte;
Espaçamento entre os parágrafos de pelo menos 2x o tamanho da fonte;
Espaçamento entre as letras (tracking) pelo menos 0.12x o tamanho da fonte;
Espaçamento entre as palavras de pelo menos 0.16x o tamanho da fonte
Fontes e referências:
Quando a referência está diretamente ligada, já coloquei o link no texto, mas li outras coisas que achei interessantes e deixei listado tudo aqui:
https://www.nngroup.com/articles/best-font-for-online-reading/
https://www.nngroup.com/articles/legibility-readability-comprehension/
https://dl.acm.org/doi/10.1145/3502222
https://uxdesign.cc/testing-fonts-for-accessibility-817f47011078
https://www.w3.org/TR/WCAG21/#text-spacing
https://www.nngroup.com/articles/glanceable-fonts/
https://designshack.net/articles/typography/what-is-a-font-license-and-do-i-need-one/
https://www.keycdn.com/blog/web-font-performance
Imagem: https://www.reddit.com/r/memes/comments/cr840h/font_matters/