Tipografia da web: Como encontrar a fonte perfeita para o teu site

7 min.
perfect-web-typography

Uma fonte adequada torna o teu site visualmente muito mais interessante. As fontes têm uma influência decisiva sobre se as secções de texto são ignoradas ou lidas. Neste post, vou mostrar-te como encontrar a fonte perfeita para o teu site!

A boa tipografia é o resultado de anos de estudo de fontes e design. No entanto, algumas dicas básicas podem ajudar-te a treinar os teus olhos adequadamente e a usar a fonte certa para o teu projeto web.

Melhores práticas, dicas e diretrizes em web design

Web design é mais do que estética. Pelo menos tão importantes são: um bom UX, acessibilidade e SEO. Neste artigo vou mostrar-lhe as melhores práticas para sites de sucesso e utilizadores satisfeitos.

O primeiríssimo site ...

Ou: O que acontece quando carregas um site sem CSS. No passado, os sites eram exibidos nas fontes que eram integradas no respetivo sistema operativo. Estes ainda hoje são carregados se não for possível aceder à fonte. O primeiro site ainda hoje está online e tem a mesma aparência de quando entrou em funcionamento em dezembro de 1990:

Tipografia da web: Como encontrar a fonte perfeita para o teu site
O primeiríssimo site

A forma como o site é exibido no teu navegador não depende do site - mas do sistema operacional que estás a usar. E se fizeste alguma alteração às dafault settings.

Para utilizadores/as de Windows, as fontes Serif são exibidas em Times New Roman por padrão. No Mac OS X, por outro lado, a fonte padrão é Times ou Times Roman. Arial é utilizado pelo Windows como fonte Sans Serif. Mac OS X usa Helvetica como fonte padrão.

Zach Leatherman desenvolveu um projeto no qual ele testou vários sistemas operacionais e as fontes correspondentes. A ferramenta Família de Fontes lhe dá uma visão interessante das fontes fallback - e como elas se parecem no final. 

Georgia und Verdana

Em meados da década de 1990, Georgia e Verdana, que foram especialmente desenhadas para a web por Matthew Carter, foram adicionadas às fontes padrão. Construir bons sites com uma seleção escassa de cinco fontes deu origem a um hábito questionável: fontes que normalmente não existiam na web foram incorporadas como arquivos de imagem.

As desvantagens disto são óbvias:

  • A representação adequada em diferentes dispositivos pode resultar num tedioso trabalho de minúcia.
  • As palavras não podem ser encontradas ou traduzidas usando a função de pesquisa.
  • Além disso, cada mudança de texto representa um enorme esforço adicional.

Desenhando para o desconhecido

Felizmente, a tecnologia tem-se desenvolvido bastante. Apesar de tudo, também é necessário um conhecimento fundamental na área técnica, porque é importante perceber o que acontece no teu site quando a fonte desejada não está disponível. Isto pode ter várias razões. Por exemplo, uma má ligação à internet, o que leva a um atraso no carregamento do teu ficheiro CSS.

Ao contrário do design gráfico, o seguinte se aplica na web: uma fonte má (inadequada) é melhor do que nenhuma fonte.

Por isso, enquanto estás a tentar perceber qual a fonte que melhor suportará visualmente o teu site, há também questões técnicas básicas a colocar:

  • O teu texto será exibido mesmo que o ficheiro CSS não seja carregado? 
  • A sua página ainda é legível em serif padrão e sans serif? 
  • Forneces uma fonte alternativa? Como é exibida? Podes fazer qualquer outra configuração que te dê mais controle sobre as tuas fontes alternativas?

Em primeiro lugar, é importante que os conteúdos sejam exibidos. A legibilidade geral é o "início" e o "fim" na escolha da tipografia. 

No seu artigo Loading Web Fonts with the Web Font Loader, Robin Rendle dá uma base interessante sobre FOUT vs. FOIT (quando a fonte é carregada).

Podes encontrar mais informações sobre este tópico aqui:

De onde vem a tua fonte?

Agora que já trataste das questões técnicas e das fontes de recurso, ainda há um aspeto muito importante, nomeadamente, de onde a tua fonte é realmente carregada. Como mencionado anteriormente, cada sistema operacional tem suas próprias fontes padrão. Além disso, cada utilizador/a pode instalar fontes no seu computador. Por isso, é impossível saber quais estão ou não disponíveis. 

Para não exibirmos os nossos sites apenas em Arial e Times New Roman, estamos a recorrer cada vez mais a serviços de fonte baseados na web. A vantagem é óbvia: as restrições que temos ao utilizar fontes padrão são contornadas. A seleção de fontes disponíveis é aumentada.

Provavelmente as mais conhecidas aqui são Google Fonts (gratuitas) e Adobe Fonts (com custos associados). No entanto, existem outros fornecedores. Na Alemanha, em particular, as diretrizes mais rigorosas de proteção de dados levam a que se procure mais frequentemente uma alternativa ao Google. Não há apenas fontes para incorporar, mas também plataformas que alojam as tuas fontes, para que não haja limites à tua criatividade. Naturalmente, o pré-requisito é que sejas proprietário dos direitos ou licenças.

A Smashing Magazine já experimentou vários fornecedores e recolheu aqui as suas experiências.

Elementos de design de Fonts

De forma a te decidires por uma fonte adequada, deves conhecer algumas características das tipografias. Basicamente, pode-se dizer que os parágrafos devem ser compostos por fontes bem legíveis. Se se tornar demasiado cansativo, os/as visitantes vão parar de ler a tua página. As informações que apresentares não serão consumidas. 

Outro aspeto aqui é prestar atenção à forma como a fonte muda quando o seu tamanho é reduzido. Uma fonte legível no desktop pode ser difícil de ler num formato menor num telemóvel. 

Existem indicadores que te podem ajudar a escolher a fonte certa.

Tipografia da web: Como encontrar a fonte perfeita para o teu site
Artigo: O que é tipografia?

A altura de x

No exemplo a seguir, vês três exemplos diferentes. A altura de x descreve a altura vertical da letra x. Se esta for muito pequena, o texto torna-se mais difícil de acessar, especialmente com fontes de tamanho menor. Se a altura de x for muito grande, torna-se mais difícil distinguir as letras maiúsculas das minúsculas.

Tipografia da web: Como encontrar a fonte perfeita para o teu site
Fonte: Profissional
Tipografia Web

Apertures

Apertures são as aberturas que encontramos nas letras. Regra geral, quanto mais generosas forem, mais agradável será ler longas secções de texto com este tipo de letra.

Letter Spacing e Kerning

Enquanto Letter Spacing descreve a distância ou espaçamento geral entre as letras, entendemos Kerning como a distância entre determinadas letras. Devido ao formato natural das letras, esta distância entre letras pode ser maior ou menor:

Tipografia da web: Como encontrar a fonte perfeita para o teu site
Artigo: Tipografia em 60 Segundos

O espaçamento uniforme faz com que a tua fonte pareça mais harmoniosa. Isto torna-o mais legível. A propósito, ambos podem ser ajustados via CSS, caso tenhas a sensação de que a fonte escolhida ainda precisa de ser melhorada:

.kerning {font-kerning: normal;}

.spacing {letter-spacing: 0.1em;}

Terminals, Ascenders e Descenders

Os terminais ocorrem nas letras a, ä, c, f, j, r, e y:

Tipografia da web: Como encontrar a fonte perfeita para o teu site
Fonte: Profissional
Tipografia Web

Ascendentes e descendentes são semelhantes, mas significam os prolongamentos em, por exemplo, f, q, e j:

Tipografia da web: Como encontrar a fonte perfeita para o teu site
Fonte: Profissional
Tipografia Web

Em relação a estes, o seguinte se aplica: quanto mais discretos forem, menos adequado é o seu uso para textos pronunciados. As fontes Serif, em particular, são especialmente bem definidas em terminais, ascendentes e descendentes, razão pela qual estas fontes foram consideradas durante muito tempo um compromisso seguro para secções de texto mais longas .

Contraste

Fontes com muito contraste (esquerda) são menos adequadas para fontes de tamanho pequeno, como as utilizadas em secções, e mais adequadas para títulos.

Tipografia da web: Como encontrar a fonte perfeita para o teu site
Fonte: Profissional
Tipografia Web

Negrito e Itálico

Ao escolher as tuas fontes, deves também certificar-te de que elas estão disponíveis em diferentes espessuras e estilos. Isto porque os estilos de fonte que não estão disponíveis podem ser adulterados pelo browser e podem assim ficar com este aspeto:

(À direita, o estilo da fonte "falsificado" pelo browser)

Tipografia da web: Como encontrar a fonte perfeita para o teu site
Tipografia da web: Como encontrar a fonte perfeita para o teu site
Fonte: Profissional
Tipografia Web

Com base nestes critérios, podes agora procurar a fonte do corpo para o teu site. Como a escolha é geralmente mais complicada e há mais a considerar aqui, recomendo começares com a escolha da(s) fonte(s) dos cabeçalhos com base na fonte do corpo (e não o contrário).

Você pode obter uma visão mais abrangente e mais explicações sobre os termos aqui: https://www.shillingtoneducation.com/blog/what-is-typography/.

Serif, Sans Serif e Monospace

Existe uma vasta gama de categorias para as fontes, sendo que as três mais comuns são, provavelmente,

  • Serif, por exemplo, Times New Roman
  • Sans Serif, por exemplo, Arial
  • Monoespace, por exemplo, Source Code

Quando se trata de combinações de fontes, há dois procedimentos simples que podes seguir. Não são, de forma alguma, uma obrigação, mas apenas diretrizes que te podem ajudar, especialmente se não tens muita experiência na combinação de fontes:

  1. Usa a mesma fonte para o corpo e os cabeçalhos - mas altera a espessura, o espaçamento entre letras e o tamanho, por exemplo, Lato:
Tipografia da web: Como encontrar a fonte perfeita para o teu site
Use a mesma fonte para Corpo e Cabeçalhos
  1. Combine uma fonte Serif e uma fonte Sans Serif, por exemplo Baskerville e Open Sans:
Tipografia da web: Como encontrar a fonte perfeita para o teu site
Uma combinação de fontes pode se parecer com isto

Há também uma ferramenta online que o ajuda a descobrir e experimentar rapidamente diferentes combinações de fontes: https://fontjoy.com/#.

Conclusão

Outro tópico importante que deixei completamente de fora é o uso de cores. Dependendo do facto da tua fonte estar sobre um fundo claro ou escuro, naturalmente vai ter um aspeto diferente. Além disso, podes criar variações da mesma fonte, não apenas exibindo-a em espessuras diferentes, mas também em cores diferentes. Ao escolheres uma cor, dever ter em mente o guia de estilo e a tua marca.

Além de analisar outros sites, é também uma boa idéia olhar para as tendências atuais para se inspirar. Você notará rapidamente que certos pares de fontes são sempre repetidos aqui e que há pouco de novo. No entanto, dependendo do projeto e dos requisitos, pode ser necessário recorrer ao familiar em vez de ser particularmente inovador - você pode encontrar mais detalhes neste artigo.

Outros recursos sobre o tema

As tuas perguntas: A fonte perfeita

Que perguntas você tem sobre tipografia na web? Esteja à vontade para usar a função de comentários. Você quer ser informado sobre novos artigos sobre web design e desenvolvimento? Depois siga-nos no Twitter, Facebook ou através da nossa newsletter.

Depois de estudar design de jogos e escrita criativa na verde Auckland, na Nova Zelândia, a Sonja especializou-se em design de web e aplicações e seu desenvolvimento. O seu foco é a gamificação e a exploração da motivação e experiência do utilizador, aliado à paixão e curiosidade pelas tendências tecnológicas.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com *.