Embora as imagens recebam muito do amor quando se trata de sites, é a palavra escrita que agrada aos mecanismos de pesquisa e leva adiante o conteúdo da maioria dos sites. Como tal, o design tipográfico é uma parte criticamente importante do design do site. Com a importância do texto de um site, surge a necessidade de garantir que ele pareça bom e fácil de ler. Isso é feito com o estilo CSS (Cascading Style Sheets).
Seguindo o padrão moderno de web design, quando você quiser ditar a aparência do conteúdo de texto de um site, você o fará usando CSS. Isso separa esse estilo CSS da estrutura HTML de uma página. Por exemplo, se você quiser definir a fonte de uma página como "Arial", poderá adicionar a seguinte regra de estilo ao seu CSS (isso provavelmente seria feito em uma folha de estilos CSS externa que ativa os estilos para cada página no site):
body {
font-family: Arial;
}
Essa fonte é definida para o "corpo", portanto, a cascata CSS aplicará o estilo a todos os outros elementos da página. Isso ocorre porque todos os outros elementos HTML são filhos do elemento "body", os estilos CSS, como a família de fontes ou a cor, são colocados em cascata do pai para o elemento filho. Este será o caso, a menos que um estilo mais específico seja adicionado para certos elementos. O único problema com este CSS é que apenas uma única fonte é especificada. Se essa fonte não puder ser encontrada por algum motivo, o navegador substituirá a outra em seu lugar. Isso é ruim porque você não tem controle sobre qual fonte é usada; o navegador irá escolher para você, e você pode não gostar do que decidiu usar! É aí que entra uma pilha de fontes. Uma pilha de fontes é uma lista de fontes na declaração de família de fontes CSS. As fontes são listadas na ordem de preferência que você deseja que elas apareçam no site em caso de um problema como o carregamento de uma fonte. Uma pilha de fontes permite que um designer controle a aparência das fontes na página da Web, mesmo que o computador não tenha a fonte inicial que você solicitou. Então, como é uma pilha de fontes? Aqui está um exemplo: body {
família de fontes: Georgia, "Times New Roman", serif;
}
Há algumas coisas para notar aqui. Primeiro, você verá que separamos os diferentes nomes de fonte com uma vírgula entre cada um. Você pode adicionar quantas fontes quiser, contanto que elas sejam separadas por uma vírgula. O navegador tentará carregar a primeira fonte especificada primeiro. Se isso falhar, será executado na linha tentando cada fonte até encontrar uma que possa usar. Neste exemplo, estamos usando fontes seguras da Web, e "Georgia" provavelmente será encontrado no computador da pessoa que está visitando o site (o navegador procura no seu computador pelas fontes especificadas na página, de modo que o site está realmente informando ao usuário). computador quais fontes carregar do seu sistema). Se, por algum motivo, essa fonte não for encontrada, ela se moverá pela pilha e tentará a próxima fonte especificada. Em termos dessa próxima fonte, observe como ela está escrita na pilha. O nome de "Times New Roman" é encapsulado em aspas duplas. Isso ocorre porque o nome da fonte tem várias palavras. Quaisquer nomes de fontes com mais de uma palavra (Trebuchet MS, Courier New, etc.) devem ter o nome entre aspas duplas para que o navegador saiba que todas essas palavras fazem parte de um nome de fonte. Finalmente, terminamos a pilha de fontes com "serif", que é uma classificação de fonte genérica. No caso improvável de que nenhuma das fontes que você nomeou na sua pilha esteja disponível, o navegador apenas encontrará uma fonte que, pelo menos, caia na classificação apropriada que você escolheu. Por exemplo, se você estiver usando fontes sans-serif como Arial e Verdana, encerrar uma pilha de fontes com a classificação "sans-serif" manterá, pelo menos, a fonte nessa família geral se houver um problema de carregamento. Evidentemente, deve ser muito raro que um navegador não encontre nenhuma das fontes listadas na pilha e tenha que usar essa classificação genérica, é uma prática recomendada incluí-la de qualquer maneira, para ser duplamente segura. Atualmente, muitos sites usam fontes da web que estão incluídos no site junto com outros recursos (como imagens do site, arquivo Javascript, etc.) ou vinculados a um local de fonte externo, como o Google Fonts ou o Typekit. Embora essas fontes devam ser carregadas desde que você esteja vinculando aos próprios arquivos, você ainda deseja usar uma pilha de fontes para garantir que tenha algum controle sobre quaisquer problemas que possam surgir. O mesmo vale para fontes "web safe" que devem estar no computador de alguém (note que as fontes que usamos como exemplos neste artigo, incluindo Arial, Verdana, Georgia e Times New Roman, são todas fontes seguras da Web que devem ser no computador de uma pessoa). Mesmo que a probabilidade de falta de uma fonte seja muito baixa, especificar uma pilha de fontes ajudará o design tipográfico do site à prova de balas, tanto quanto possível. Artigo original de Jennifer Krynin. Editado por Jeremy Girard. Pilhas de fontes e fontes da Web
