Fontes

Como escolher as melhores fontes para seu site?

Especialmente aqueles que não conhecem muito sobre os fundamentos de design para a Web, podem achar que a escolha das melhores fontes para o seu site, segue mais ou menos os mesmos critérios da definição das cores do site, das proporções entre os diferentes elementos, bem como os demais elementos.

Ou seja, geralmente a preocupação com a fonte escolhida, baseia-se em critérios meramente subjetivos e estéticos, como “eu gosto”, “eu não gosto”, “eu acho bonita”, “eu não acho bonita”.

Mas escolher uma fonte apropriada para um site, exige ir bem além desse tipo de enfoque!

Você sabe que critérios se basear para escolher as melhores fontes para seu site? Se até hoje isso se resumia ao que lhe agrada, chegou a hora de enxergar um pouco além, como por exemplo, entendendo o que é tipografia digital.

O que é tipografia digital?

Em termos resumidos, a tipografia digital é a arte de combinar os tipos (fontes), partindo da sua escolha para compor o texto, objetivando a legibilidade e organização das palavras, por meio do tamanho dos caracteres, o espaçamento entre eles, bem como entre as palavras e as linhas, para uso nos meios digitais, como websites, aplicativos e documentos eletrônicos.

O conceito de tipografia – não a digital – é anterior à transformação digital, sendo usado na impressão – livros, jornais e revistas, por exemplo – mas a partir do surgimento e crescimento dos meios digitais, como o uso nos computadores e mais recentemente nos celulares, recebeu novos enfoques e preocupações.

Quando pensamos na variedade de dispositivos digitais pelos quais fazemos a leitura de diversos tipos de conteúdos, a tipografia digital ganhou importância inquestionável.

Ela representa o conjunto de fontes adotado para textos, títulos, subtítulos, menus, links, enfim cada elemento textual presente no site ou mesmo em um aplicativo, como os programas que você tem instalado no seu notebook ou os apps do smartphone.

Assim, podemos dizer que a tipografia digital, deve considerar os seguintes aspectos na escolha das fontes mais adequadas:

As características que as fontes escolhidas devem ter (forma, tamanho, cor, espaçamento, etc) para apresentar os diversos textos presentes nas páginas;
A preocupação em favorecer o consumo e compreensão do conteúdo por parte do leitor;
Precisam se harmonizarem com a aparência (layout e design);
Reforçarem ou combinarem com a imagem da marca que se quer dar ao visitante;
Contribuir com a navegabilidade, quando usadas em um menu ou em um link, por exemplo.

Qual a importância das fontes no site?

Como você já deve imaginar, a escolha das fontes usadas no site institucional, no blog ou no e-commerce, vai bem além da sua aparência e o quanto ela lhe agrada.

Embora na maioria das vezes o visitante não faça uma avaliação consciente e crítica das fontes usadas em cada site que ele visita, quando o conjunto usado é inadequado, o consumo do conteúdo que depende de uma fonte, como naturalmente os textos, é afetado negativamente.

A leitura se torna cansativa, difícil e a chance do internauta não concluir a leitura e abandonar o site, aumenta.

Isso sem contar outros problemas, como erros decorrentes de fontes que perdem definição ao serem reduzidas, leitura incorreta de informações importantes, problemas na responsividade do site, entre outros.

Objetivamente, a importância de escolher as fontes certas, está ligada aos seguintes fatores:

Legibilidade – em qualquer site, a legibilidade é um dos principais fatores ao se definir a tipografia digital. Fez inclusive com que nas menores telas, nas versões mobile dos sites, os ícones ganhassem mais importância, como meio de tornar a identificação mais fácil e rápida aos visitantes;
Design – impossível dissociar ou isolar cada elemento do site (botões, menus, ícones, etc) das fontes usadas em cada palavra, em cada porção de texto. As formas, proporções e linhas que cada uma utiliza, são essenciais na aparência de cada página;
Comunicação visual – as diferentes famílias de fontes também cumprem papel na comunicação visual, ao se escolher para usos específicos, como em títulos, nomes de seções ou quem sabe, aplicando algum estilo para destacar uma informação. Tem também relevância no trabalho de imagem que a marca pretende construir na mente do consumidor;
Segurança – outro aspecto pouco lembrado, mas crucial, é a segurança. Tanto a relacionada com a origem / procedência da fonte utilizada e que não coloque em risco o visitante do site, como a ideia de segurança relacionada – e indiretamente, confiança – à marca;
Desempenho – fontes mais pesadas – tamanho do arquivo para download – e em especial quando se faz uso daquelas que não são fontes web seguras, em alguma medida afetam o desempenho do site;
Função – ao optar por uma fonte específica, essa pode cumprir papel funcional, como evidenciar algum recurso ou destacar o que é importante. Tem também papel funcional, quando contribui para acessibilidade, por exemplo;
Experiência do usuário – ao influenciar o desempenho, a legibilidade, a funcionalidade e navegabilidade, por consequência favorece a experiência do usuário na página.

Por isso, definir o conjunto de fontes que será empregada no seu site, é um dos aspectos mais relevantes e que ganha importância na proporção direta do volume de texto que ele possui.

Também é importante destacar que não é porque um site de e-commerce tem muito menos texto do que um blog, a escolha da fonte, tamanho, cor e espaçamento, é menos importante.

Imagine os problemas que podem ocorrer, se os valores dos produtos ou outro dado técnico importante dos produtos, não aparecem com a clareza necessária, nos ajustes possíveis para se acomodarem às diferentes resoluções e tamanhos de telas.

Nas mais diversas situações, a determinação da tipografia digital usada, é parte inseparável do resultado visual e funcional que se tem.

Uma boa fonte, no tamanho e cores apropriados, pode inclusive contribuir para orientar ou induzir o visitante por outros conteúdos do site.

Em outras palavras, uma fonte tem também papel funcional.

Quais os tipos de fontes?

Convencionou-se agrupar as muitas fontes existentes em 5 grandes grupos, definidos de acordo com as principais características que elas têm em comum.

Fontes com serifa (Serif fonts)

O aspecto que determina ou caracteriza essa família ou grupo de fontes, é uma pequena linha nas extremidades de cada letra ou símbolo. Fontes dessa família, também são chamadas fontes serifadas.

São tidas com uma tipografia mais antiga e tradicional, bastante usadas em material impresso, em textos longos, como em jornais, livros e revistas, isso porque a serifa – o traço na terminação de cada caractere – torna as letras individuais mais fáceis de serem reconhecidas pelo cérebro.

Já em telas de dispositivos digitais, essa característica não é tão notada, em parte por conta das resoluções que podem ser bastante inferiores aos textos impressos.

Exemplos clássicos de fontes serifadas, entre os mais usados e presente na maior parte dos sistemas operacionais, são a Times New Roman, Courier New e Georgia.

Fontes sem serifa (Sans-Serif fonts)

As fontes sem serifas, em oposição às fontes serifadas e como você já deve supor, constitui a família de fontes nas quais os caracteres não têm serifas. O termo “sans” que precede o nome, vem do francês e significa “sem”.

São consideradas fontes mais modernas.

Geralmente as fontes não serifadas, conferem melhor visualização mesmo quando são utilizadas em tamanhos menores.

Em telas digitais, as fontes sem serifas, são mais fáceis de reconhecimento por parte do olho humano como um bloco, resultando em maior legibilidade e facilitando a leitura mais dinâmica.

Portanto, é a classe ou família mais usada nos sites cujo conteúdo predominante, é texto.

Entre as mais usadas e que constam de boa parte dos sistemas, estão a Arial, Verdana e Helvética.

Fontes cursivas (Cursive fonts)

A família das fontes cursivas, é representada pelas fontes que se assemelham à escrita a mão. Também podem ser chamadas de caligráficas ou manuscritas, sendo essa última denominação menos frequente, embora em inglês (handwritting) seja bastante usada.

Nas fontes de melhor qualidade, existe a preocupação que a terminação de uma letra, conduz ao início da seguinte, tal como ocorre nas “letras de mão”, quando escrevemos.

Esteticamente podem ter uma aparência agradável, mas devem ser usadas com moderação e para pequenos conjuntos de palavras e quando o tamanho for maior, pois a legibilidade é inferior aos outros grupos.

A vantagem do seu emprego, é quando se tem a necessidade de passar uma conotação mais humana ou algum sentimento, como por exemplo em um poema ou um convite de casamento.

Exemplos populares desse grupo, são a Brush Script, Freestyle Script e Harlow.

Fontes fantasia (Fantasy fonts)

As fontes fantasia se caracterizam por conter elementos decorativos nas letras ou quando elas são estilizadas para passar uma ideia ou conceito.

Assim por exemplo, uma fonte dessa família, quando tem um nome conjugado com a palavra 3D ou block, geralmente tem cada caractere com uma representação tridimensional.

São fontes muito apropriadas para temática infantil, relação com personagens e mesmo temas populares, como por exemplo, filmes ou marcas famosas.

Dois exemplos que fazem uso desse conceito, são a fonte da marca Coca-Cola e do nome do filme Star Wars.

Fontes monoespaçadas (monospaced)

Esse grupo tem como aspecto diferenciador, o fato das letras ocuparem o mesmo espaço horizontal, em contraposição aos demais grupos, no quais o espaço da letra “i”, não é o mesmo ocupado pela letra “a”, por exemplo.

Máquinas de escrever são um exemplo em que este tipo está presente.

Atualmente o seu emprego ocorre em editores voltados a edição de programação, telas de terminais e situações em que a legibilidade depende de espaços bem definidos e fixos para cada caractere usado.

Que critérios usar para escolher o tipo de fonte para o site?

Alguns aspectos já devem estar evidentes, outros nem tanto, quando a questão é que fatores observar ao escolher cada fonte presente no website.

Por essa razão, vamos listar todos os critérios que precisam ser observados na escolha do tipo de fonte usada no site:

1. Fontes web seguras

São consideradas fontes seguras, ou web-safe fonts, as fontes que são padrão na maior parte dos sistemas operacionais e nos navegadores web. Em outras palavras, significa ao utilizá-las, o site seja visualizado da mesma forma por todos os usuários, independente do dispositivo.

Além disso, como já estão instaladas no sistema operacional, não exigem carregamento adicional, contribuindo para a velocidade de carregamento da página, bem como são reconhecidas por leitores de tela, melhorando a acessibilidade do seu site, ou seja, favorece a acessibilidade.

Não é consenso absoluto e não há um padrão rígido, porque isso pode mudar com o tempo e com a versão de cada sistema operacional, porém as mencionadas a seguir são encontradas em todos eles atualmente:

Arial (sans-serif);
Verdana (sans-serif);
Times New Roman (serif);
Tahoma (sans-serif);
Calibri (sans-serif);
Georgia (serif);
Courier New (monospace);
Trebuchet MS (sans-serif);
Garamond (serif)

Naturalmente são definidas como seguras, por já fazerem parte do sistema operacional do dispositivo.

2. Velocidade de carregamento

Embora seja possível determinar um link para download, por meio de instrução no CSS ou diretamente no HTML das páginas do site, caso haja necessidade ou interesse na utilização de uma fonte específica e incomum, sempre que isso ocorrer, uma fração de tempo a mais é acrescida ao carregamento da página, a fim de baixar a fonte que não é nativa do sistema operacional do dispositivo.

Portanto, considere o tamanho dos arquivos das escolhidas, bem como de onde a fonte é baixada.

O ideal se for possível, é optar pelas fontes web seguras, pois conforme já mencionamos, não é necessário efetuar o download para serem renderizadas pelo navegador.

3. Fontes True Type

Criadas por uma parceria entre Microsoft e Apple, as fontes true type têm a vantagem de poderem ser dimensionadas para qualquer tamanho, sem perda da legibilidade ou da definição.

São recomendadas quando é preciso usar uma fonte leve, mas que imprima bem e tenha uma boa qualidade e visibilidade nas telas dos dispositivos.

Também são bem exibidas quando sujeitas a redimensionamento.

4. Famílias de fontes

A adoção de fontes de acordo com sua separação em famílias, pode levar em consideração vários fatores, mas em linhas gerais, os seguintes critérios prevalecem:

Fontes sem serifas – são mais indicadas para conteúdo predominantemente em texto e especialmente em sites responsivos ou mobile, nos quais há uma redução apreciável no tamanho visível de cada caractere;
Fontes serifadas – também podem ser usadas em sites com boa quantidade de texto, desde que o tamanho usado não seja pequeno (inferior a 10px). Para tamanhos grandes, como em títulos ou em pequenas porções de texto, também podem ser usadas sem restrições, bem como quando se tem designs mais conservadores e tradicionais, como o site institucional de um escritório de advocacia, por exemplo;
Fontes cursivas – devem ser restritas a pequenas quantidades de texto, quando absolutamente necessário e o enredo do site for apropriado, como nos exemplos que já citamos anteriormente;
Fontes fantasia – assim como as cursivas, devem ser usadas com parcimônia, reservando-se a títulos, cabeçalhos, infográficos ou em situações bem específicas;
Fontes mono espaçadas – é indicada para sites voltados a assuntos mais técnicos, como por exemplo, na transcrição de um trecho de programação, mas não nos demais textos do site.

5. Google Fonts

Sendo uma ótima e popular alternativa para fontes na web, o Google Fonts é um enorme banco de fontes gratuitas e open source, criado e mantido pelo Google.

Além da gratuidade, há outras vantagens em utilizá-lo:

As fontes disponíveis são em geral de alta qualidade, garantindo que a tipografia dos projetos web seja adequada;
A procedência assegura que não haverá riscos à segurança do site;
Como as fontes são hospedadas no Google, a velocidade de download costuma ser boa, não comprometendo o desempenho do site;
Por meio do visualizador online, é possível avaliar as diferentes fontes e estilos, antes de escolher a ideal para o projeto no qual será usada;
As fontes são otimizadas para web e são disponibilizadas em diversos formatos, garantindo compatibilidade com diferentes navegadores e dispositivos.

6. Acessibilidade e usabilidade

A usabilidade e acessibilidade, são aspectos fundamentais, mas que pouquíssimos desenvolvedores se preocupam.

Avalie esses fatores, respondendo às seguintes perguntas:

Seu site é funcional e a fonte contribui para esse fator?
O que as pessoas que nele navegam relatam?
Lembre-se que nem todos têm uma vista perfeita. A família de fontes escolhida, a cor, o tamanho, o espaçamento favorecem a leitura por parte de qualquer pessoa?
Os leitores de tela funcionam adequadamente nas páginas?

Evite os extremos, ou seja, excesso de contraste entre fundo e cor da fonte, pode ser tão prejudicial ao leitor, como pouquíssimo contraste.

Se não for fácil a leitura, você pode perder visitantes que não tenham absoluta necessidade de estar no site.

7. Licença de uso

Ao buscar e avaliar fontes não padrão, atente para o fato de que apesar de haver várias gratuitas para download e uso, outras estão sujeitas a licenças de uso e podem ter custo para uso.

Algumas podem até exigir a veiculação do crédito para determinados usos, como comercial ou publicitário.

É essencial comparar os principais sites de fontes e os termos de uso de cada site, bem como as licenças e restrições de uso.

8. Caracteres disponíveis

Pesquise a fonte que deseja usar, quanto a filtrar a todas as letras, números e símbolos comuns e garantir que tudo seja exibido como se espera. Há fontes que podem não contemplar caracteres especiais ou exclusivos de um idioma, como o “ç” ou “ñ”, por exemplo, ou até mesmo acentuação.

9. Considerações adicionais

A tipografia digital é um assunto bastante amplo e vai muito além da simples escolha de uma fonte que lhe agrade.

Formas, cores, tamanhos, espaçamentos e como tudo isso se harmoniza com os demais elementos que compõem o site, devem produzir um resultado atraente visualmente, mas também funcional ao internauta.

Há naturalmente exceções e situações especiais, como um site com temática artística, com conteúdo prioritariamente composto por imagens, vídeos, ou qualquer coisa que não exija muita leitura.

Em casos assim, há alguma liberdade para ousar e utilizar fontes menos convencionais e tradicionais.

Sobretudo, colha feedback do público-alvo do site e de um universo amplo de possíveis usuários, testando sua visualização e se ela é amigável e fácil em diferentes dispositivos, os quais têm telas com maiores e menores resoluções e, portanto, fidelidades visuais distintas.

Também é aconselhável considerar o público-alvo que você pretende alcançar, além do propósito geral e identidade visual. Por exemplo, se sua marca fala a um um público mais velho, usar fontes fortes, com negrito e serifa pode produzir melhores resultados. Por outro lado, um site voltado ao público feminino, recomenda-se optar por fontes mais elegantes e modernas, como por exemplo, a Playfair Display, disponível no Google Fonts.

Quais os melhores sites para fontes?

Saber onde encontrar a melhor fonte para projetos de desenvolvimento de sites pode ajudar a economizar tempo e dores de cabeça com fontes de procedência duvidosa.

Para isso, elaboramos uma lista dos sites mais usados:

DaFont – o antigo e popular DaFont oferece milhares de fontes categorizadas por estilo, aparência e tema, contendo tanto as gratuitas, quanto as pagas, sendo possível encontrar uma fonte nova para praticamente qualquer projeto;
FFonts – outro nome bem conhecido na tipografia digital, é o F Fonts. São mais de 100.000 fontes disponíveis para download diretamente no site do serviço, sem redirecionamentos ou links para outros sites;
Google Fonts – embora ofereça um acervo bem menor do que os anteriores, o já mencionado banco de fontes do Google é uma escolha bastante confiável e adequada para os mais diversos projetos;
Adobe Fonts – o Adobe Fonts é outro site que fornece um bom acervo de fontes diferenciadas, ressaltando que há várias fontes que são pagas e que contam com licenças de uso mais específicas e, portanto, é preciso estar atento ao fazer a escolha;
FontSpace – se você busca fontes diferenciadas e não quer ou não pode arcar com os valores do Adobe, há uma chance de encontrar algo no FontSpace, que oferece um bom acervo de fontes gratuitas e com procedência.

Conclusão

As fontes têm um papel que vai bem além de simplesmente traduzir as ideias e conceitos do conteúdo, em palavras. Elas também têm função estética, funcional e até contribuem com a navegação para a experiência do usuário no site.