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 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 fonte à 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 no 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 {
família da fonte: Georgia, “Times New Roman”, serif;
}
A fonte Georgia aparece primeiro, então, por padrão, é o 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. Anexar 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 serifa. 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:
- letra cursiva
- fantasia
- monoespaço
- serifa
- sem serifa
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 fonte 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 que se destinam a replicar texto manuscrito sofisticado. 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. Fontes que reproduzem logotipos conhecidos, como os formatos de letras do Harry Potter ou De volta para o Futuro filmes, caem nesta categoria. Essas fontes não são apropriadas para o conteúdo do corpo, pois geralmente são 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, uma maiúscula C ocupa muito mais espaço do que letras minúsculas eu), 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 – use ligaduras extras nas formas das letras. Essas peças extras são chamadas 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.
- Sem serifa fontes – não tem ligaduras. O nome significa sem serifas. As fontes populares nesta categoria incluem Arial ou Helvetica. Semelhante às serifas, as fontes sem serifa têm um desempenho igualmente bom em cabeçalhos e no conteúdo do corpo, embora alguns especialistas prefiram que grandes blocos de texto evitem fontes sem serifa porque são mais difíceis de ler em tamanhos pequenos.
