Qual fonte utilizar em meu site?

Publicado em | por Márcio Brasil

Dicas e técnicas para se utilizar fontes em websites

Essa é uma questão que certamente passa pela cabeça de todo designer. Qual fonte utilizar? Por isso vamos discutir rapidamente alguns conceitos e conhecer algumas dicas para efetuar a melhor escolha na hora de representar os textos em seu website.

Família de fontes

Quando você especificar uma fonte para a sua página web, é importante que você não especifique apenas uma única fonte, mesmo que seja uma fonte que você acha que a maioria das pessoas têm, como a onipresente fonte “Arial”.

Se você escolhe apenas uma fonte, corre o risco de em um outro sistema operacional, o usuário não conseguir interpretar corretamente seu texto, ou ainda causar danos no layout.

Por exemplo, você pode definir uma família de fontes no código CSS da seguinte maneira:

font-family: Arial, Helvetica, sans-serif ;

Algumas regras

  1. Não utilize mais de 3-4 fontes em uma só página.
  2. Não alterar a fonte no meio da frase a menos que você tenha uma razão muito boa.
  3. Sans-serif para texto on-line, serif para impressão.
  4. Monoespaçadas para exemplos de código.
  5. Script e fantasia para os acentos.

Fontes Sans-serif

Fontes sans-serif são aquelas fontes que não têm “serifas”: o pequeno gancho no fim das letras. As páginas web são destinadas a serem vistas por navegadores em monitores de computador. E monitores de computador não têm resolução tão tão boa como o papel. Isso significa que quando os seus leitores virem uma página cheia de serifas na tela, o texto pode parecer desfocado e começar a ficar mais difícil de ler.

Alguns exemplos de fontes sans-serif são:

  • Arial
  • Geneva
  • Helvetica
  • Lucida Sans
  • Trebuchet
  • Verdana

Fontes Serif

Embora as fontes com serifa sejam difíceis de ler on-line, elas são perfeitas para impressão. Se você tiver versões de impressão do seu site, este é o lugar perfeito para usar fontes com serifa. As serifas, na impressão, tornam mais fácil de ler, pois permitem que as pessoas a diferenciem as letras de forma mais clara. Devido a impressão ter uma resolução maior, elas podem ser vistas mais claramente e não aparecem desfocadas quando estão juntas.

Alguns exemplos de fontes serif são:

  • Garamond
  • Georgia
  • New York
  • Times
  • Times New Roman

Fontes monoespaçadas

Embora sejam ideais para representar códigos de linguagens de programação, mesmo que seu site não seja sobre informática, você pode usar monospace para fornecer instruções e dar exemplos. Fontes monoespaçadas têm a mesma largura para cada caractere, para que eles sempre tenham a mesma quantidade de espaço na página.

Alguns exemplos de fontes monoespaçadas são:

  • Courier
  • Courier New
  • Lucida Console
  • Monaco

Fontes fantasy ou cursive

Fantasia e fontes cursivas não são tão difundidas em computadores, e em geral podem ser difíceis de ler em pedaços grandes. Enquanto você pôde gostar do efeito que uma fonte cursiva pode dar, os leitores podem ter problemas. Além disso, fontes fantasia e cursiva nem sempre incluem caracteres acentuados ou outros caracteres especiais, o que limita o seu texto para o Inglês.

Use fantasia e fontes cursivas em imagens ou cabeçalhos. Mantenha-os curtos e esteja ciente de que qualquer fonte que você escolher não estará provavelmente na maioria dos computadores dos seus leitores.

Alguns exemplos de fontes fantasia e cursivas são:

  • Copperplate
  • Desdemona
  • Impact
  • Kino

Deixe uma resposta