Você conhece as famílias de fontes? O design tipográfico desempenha um papel importante no design do site. Um conteúdo de texto bem organizado e formatado ajuda um site a ter mais sucesso, criando uma experiência de leitura que é agradável e fácil de consumir.
Parte de seus esforços para trabalhar com o tipo será escolher as fontes certas para o seu design e, em seguida, usar CSS para adicionar essas fontes e estilos de fontes à exibição da página.
Isso é feito usando o que é chamado de pilha de fontes.
Pilhas de fontes
Quando você especifica uma fonte para usar em uma página da web, é uma prática recomendada incluir também opções de fallback, caso sua escolha de fonte não possa ser encontrada.
Essas opções de fallback são apresentadas na pilha de fontes . Se o navegador não conseguir encontrar a primeira fonte listada na pilha, ele moverá para a próxima.
Ele continua esse processo até encontrar uma fonte que possa usar ou ficar sem opções (nesse caso, ele apenas escolhe qualquer fonte do sistema que desejar).
Aqui está um exemplo de como uma pilha de fontes ficaria em CSS quando aplicada ao elemento “body”:
body {
font-family: Georgia, "Times New Roman", serif;
}
A fonte Georgia aparece primeiro, portanto, por padrão, é isso que a página usará, mas se essa fonte não estiver disponível por algum motivo, a página volta para Times New Roman.
Coloque Times New Roman entre aspas duplas porque é um nome com várias palavras.
Nomes de fontes com uma única palavra, como Georgia ou Arial, não exigem aspas, mas nomes de fontes com várias palavras com espaços incorporados precisam delas para que o navegador saiba que todas essas palavras compõem o nome da fonte.
A pilha de fontes termina com a palavra serif. Esse é um nome de família de fontes genérico. No caso improvável de uma pessoa não ter Georgia ou Times New Roman em seu computador, o site usaria qualquer fonte serif que encontrasse.
O navegador escolherá uma fonte para você, mas pelo menos você oferece orientação para que ele saiba que tipo de fonte funcionaria melhor no design.
Famílias de fontes genéricas
Os nomes genéricos da fonte disponíveis em CSS são:
- cursive
- fantasy
- monospace
- serif
- sans-serif
Embora existam muitas outras classificações de fontes disponíveis em web design e tipografia, incluindo slab-serif, blackletter, display, grunge e muito mais, esses cinco nomes de famílias fontes genéricos são aqueles que você usaria em uma pilha de fontes em CSS.
- Fontes cursivas – geralmente apresentam formas de letras finas e ornamentadas, destinadas a replicar textos elaborados à mão. Essas fontes, por causa de suas letras finas e floridas, não são adequadas para um grande bloco de conteúdo, como texto do corpo. As fontes cursivas geralmente são usadas para títulos e necessidades de texto mais curtas que podem ser exibidas em tamanhos de fonte maiores.
- Fontes de fantasia – são as fontes um tanto malucas que realmente não se enquadram em nenhuma outra categoria. As fontes que reproduzem logotipos conhecidos, como os formatos das letras dos filmes Harry Potter ou De Volta para o Futuro, se enquadram nessa categoria. Essas fontes não são apropriadas para o conteúdo do corpo, pois costumam ser tão estilizadas que a leitura de trechos mais longos de texto escrito nessas fontes é muito difícil de fazer.
- Fontes monoespaçadas – apresentam formatos de letras com o mesmo tamanho e espaçamento, como você teria encontrado em uma máquina de escrever antiga. Ao contrário de outras fontes que têm larguras variáveis para letras dependendo de seu tamanho (por exemplo, um W maiúsculo ocupa muito mais espaço do que um i minúsculo ), as fontes monoespaçadas usam uma largura fixa para todos os caracteres. Essas fontes são frequentemente usadas para leituras de código porque têm uma aparência bem diferente de outro texto na página.
- Fontes serif – empregam ligaduras extras nas formas das letras. Essas peças extras são chamadas de serifas. As fontes serif comuns são Georgia e Times New Roman. As fontes com serifa funcionam muito bem para textos grandes, como cabeçalhos, bem como passagens longas de texto e texto.
- Fontes sem serifa – não possuem ligaduras. O nome significa sem serifas. As fontes populares nesta categoria incluem Arial ou Helvetica. Semelhante às serifas, as fontes sans-serif funcionam igualmente bem em cabeçalhos e no conteúdo do corpo, embora alguns especialistas prefiram que grandes blocos de texto evitem fontes sans-serif porque são mais difíceis de ler em tamanhos pequenos.
