Fonte CSS

É importante escolher a fonte correta para seu site!

A escolha da fonte é importante

Escolher a fonte correta pode ter um grande impacto no experiência do usuário do site.

Fontes corretas podem criar uma imagem forte para sua marca.

É importante usar fontes fáceis de ler. As fontes aumentam o valor do seu texto. É importante escolher a cor correta e o tamanho do texto das fontes também.

Famílias de fontes genéricas

No CSS, há cinco famílias de fontes genéricas:

  • Fontes com serifa (Serif) - há um pequeno traço na borda de cada letra. Elas criam uma sensação de formalidade e elegância.
  • Fontes sem serifa (Sans-serif) - as linhas das fontes são simples (sem pequenos traços). Elas criam uma aparência moderna e simples.
  • Fontes monoespaciais (Monospace) - todas as letras têm a mesma largura fixa. Elas criam uma aparência mecânica.
  • Fontes de caligrafia (Cursive) - imitam a caligrafia humana.
  • Fontes de fantasia (Fantasy) - são fontes decorativas/charmosas.

Todos os nomes de fontes diferentes pertencem a uma dessas cinco famílias de fontes genéricas.

Diferença entre Serif e Sans-serif

Serif vs. Sans-serif

Dica:Na tela do computador, as fontes sem serifa são consideradas mais fáceis de ler do que as fontes com serifa.

Alguns exemplos de fontes

Famílias de fontes genéricas Exemplo de nome de fonte
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

Propriedade font-family do CSS

No CSS, usamos a propriedade font-family para definir a fonte do texto.

A propriedade font-family deve conter vários nomes de fontes como 'reserva' para garantir a maior compatibilidade entre navegadores/sistemas operacionais. Comece com a fonte que você precisa e termine com a série genérica (se não houver outras fontes disponíveis, deixe o navegador escolher uma fonte semelhante na série genérica). Os nomes das fontes devem ser separados por vírgula.

Notas:Se o nome da fonte tiver mais de uma palavra, deve ser colocado entre aspas, por exemplo: "Times New Roman".

Exemplo

Definir diferentes fontes para três parágrafos:

.p1 {
  font-family: "Times New Roman", Times, serif;
}
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Experimente você mesmo