Ao criar um site, um dos principais elementos de uma página com a qual você trabalhará é o conteúdo de texto. Dessa forma, quando você cria uma página da Web e a estiliza com CSS, grande parte desse esforço será centralizado na tipografia do site.
O design tipográfico desempenha um papel importante no design do site. O conteúdo de texto bem estruturado e formatado ajuda o site a ter mais sucesso, criando uma experiência de leitura agradável e fácil de consumir. Parte de seus esforços em trabalhar com o tipo será escolher as fontes corretas 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 opção de fonte não seja 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, ela será movida para a próxima. Ele continua esse processo até encontrar uma fonte que possa usar ou ficar sem opções (nesse caso, apenas escolhe qualquer fonte do sistema desejada). Aqui está um exemplo de como uma pilha de fontes ficaria no CSS quando aplicada ao elemento "body":
body { família de fontes: Georgia, "Times New Roman", serif;}
Observe que especificamos a fonte Georgia primeiro. Por padrão, isso é o que a página usará, mas se essa fonte não estiver disponível por algum motivo, a página voltará para o Times New Roman. Colocamos esse nome de fonte entre aspas duplas porque é um nome com várias palavras. Nomes de fontes com uma única palavra, como Georgia ou Arial, não exigem as aspas, mas o nome da fonte com várias palavras precisa delas para que o navegador saiba que todas essas palavras formam o nome da fonte. Se você olhar o final da pilha de fontes, deve notar que terminamos com a palavra "serif". Esse é um nome de família de fonte 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 pudesse encontrar. Isso é preferível para permitir que o site faça o fallback de qualquer fonte que queira, porque você pode pelo menos dizer que tipo de fonte usar para que a aparência geral e o tom do design de um site sejam o mais intactos possível. Sim, o navegador escolherá uma fonte para você, mas pelo menos você está fornecendo orientação para saber que tipo de fonte funcionaria melhor no design. O nome da fonte genérica disponível em CSS é: Embora existam muitas outras classificações de fontes disponíveis em web design e tipografia, incluindo slab-serif, blackletter, display, grunge e mais, esses 5 nomes de fontes genéricas listados acima são aqueles que você usaria em uma pilha de fontes em CSS. Quais são as diferenças nessas classificações de fonte? Vamos dar uma olhada! Cursivo as fontes geralmente apresentam formas de letras finas e ornamentadas que devem reproduzir texto manuscrito sofisticado. Essas fontes, por causa de suas letras finas e floridas, não são apropriadas para grandes blocos de conteúdo, como a cópia 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. Fantasia fontes são as fontes um pouco loucas que realmente não se enquadram em nenhuma outra categoria. Fontes que reproduzem logotipos conhecidos, como as letras dos filmes Harry Potter ou De Volta para o Futuro, se enquadram nessa categoria. Mais uma vez, essas fontes não são apropriadas para o conteúdo do corpo, pois geralmente são tão estilizadas que ler passagens mais longas de texto escritas nessas fontes é muito difícil de ser feito. Monospace as fontes são aquelas em que todas as letras são do mesmo tamanho e espaçadas, 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 do tamanho (por exemplo, um "W" maiúsculo ocupa muito mais espaço que um "i" minúsculo), as fontes monoespaçadas têm largura fixa para todos os caracteres. Essas fontes são usadas com freqüência quando o código está sendo exibido em uma página, porque elas parecem distintamente diferentes de outro texto nessa página. Serif fontes são uma das classificações mais populares. Essas são fontes que possuem as ligaduras extras nas letras. Essas peças extras são chamadas de "serifas". As fontes com serifas comuns são Georgia e Times New Roman. Serif fontes podem ser usadas para texto grande, como título, bem como longas passagens de texto e cópia do corpo. Sem serifa é a classificação final que vamos analisar. Estas são fontes que não possuem essas ligaduras. O nome significa "sem serifas". As fontes populares nesta categoria seriam Arial ou Helvetica. Semelhante a serifas, fontes sans-serif podem ser usadas igualmente bem em cabeçalhos, bem como conteúdo corporal. Famílias de fontes genéricas
