Curso Web Design | Tudo sobre Web Fonts e como utilizá-las em seus projetos!

Link to Blog do Curso Web Design - Microcamp SP

Tudo sobre Web Fonts e como utilizá-las em seus projetos!

Posted: 07 Nov 2013 03:07 AM PST

Se você vivesse nos anos 90 ou no começo dos anos 2000, iria ficar decepcionado: além das limitações características da época (internet de baixa velocidade, ausência de recursos ainda não desenvolvidos em HTML, CSS, Javascript e outros) havia a questão da limitação de fontes que poderia utilizar em seus projetos. Apesar dos milhares de modelos já existentes na época, poucas podiam ser utilizadas em páginas web, restando assim as já conhecidas e básicas Arial, Helvetica, Times ou Verdana, entre outras. Se você utilizasse outra fonte que o visitante do site não possuísse instalada no próprio computador, o navegador aplicava outra fonte automaticamente, mudando o design original que você havia planejado. Dependendo da situação, isso alterava totalmente a formatação da página e poderia até torná-la ilegível, em casos de grande variação de tamanho, por exemplo.

Terrível, não? A boa notícia é que nos últimos anos, houve consideráveis avanços nesse campo. Com o desenvolvimento da declaração @font-face, enfim foi possível mudar o jogo e utilizar diferentes fontes sem que fosse necessário enviá-las a um servidor ou apelar para algum script a fim de forçar o usuário a baixá-las para que o site fosse visualizado corretamente.

A declaração Font-face

Desde sua criação, a declaração @font-face logo se estabeleceu como norma para uso de fontes na web, estando ligada ao arquivo de folha de estilo (CSS) em separado do arquivo de estrutura (HTML). Sejam plataformas de fontes de licença comercial livre ou mista, todas a utilizam, viabilizando o seu uso na web de forma generalizada. Na prática, os navegadores e dispositivos móveis passaram a ler uma linha de código com a declaração das fontes que serão utilizadas no arquivo HTML, com o estilo podendo ser editado diretamente no arquivo CSS. Paralelamente, isso também serviu para estimular a criação de licenças mais adequadas ao ambiente web, já que para a visualização das fontes na página era necessário o seu download, já que no passado a maioria dos desenvolvedores de fontes não queriam contemplar suas criações de forma gratuita e sem regulamentação.

As vantagens das web fonts

Muitas pessoas ainda não tem uma percepção da importância do uso das web fonts, e muitos outros ainda levantam suspeitas contra a sua utilização levando em conta argumentos sobre o seu desempenho. Mas não resta dúvida: com maior manipulação dos recursos dos navegadores, caracteres unicode e subconjuntos de caracteres, utilizando web fonts temos um ganho perceptível em facilidade de uso, acessibilidade, versatilidade para criar efeitos como sombra, rotação, gradientes, entre outros – graças ao HTML5 e CSS3 – além de sua comodidade no uso, permitindo em alguns casos o uso no desktop com download e trabalho off-line, recursos de tradução, tamanho de arquivo e zoom dos conteúdos em página e alta resolução. Com tantas qualidades indiscutíveis, já podemos perceber que as web fonts chegaram para ficar!

Escolher e editar fontes

A maioria das regras de uso para tipografia em geral continuam valendo para web, em especial a utilização das regras gerais de design para a combinação de estilos e formas. Muitos defendem que a tradição tipográfica como conhecemos deve ser esquecida, porque há regras não aplicáveis ao ambiente www. Mas de maneira geral, devem-se usar as fontes da web com moderação, como manda o bom senso. Lembre-se: ser criterioso na escolha da fonte é fundamental porque ela não é apenas um mero veículo de conteúdo. Ela é responsável pela capacidade de leitura do usuário e a usabilidade dos tipos sendo recomendável até mesmo o uso de testes, inclusive em vários monitores. Além disso, elas possuem a capacidade de tornar seu projeto mais facilmente memorável, reconhecível e familiar.

O comportamento dos navegadores

Como já vimos, com a implementação da declaração @font-face, os navegadores passaram a ter a tarefa de processar a fonte. Já a forma de processamento é diferente para cada um deles. Enquanto uma página com fontes @font-face é carregada, podem-se obter dois comportamentos típicos: no caso dos navegadores Chrome, Safari e Internet Explorer, o espaço onde as fontes vão aparecer mostra-se em branco até ficarem totalmente carregadas e disponíveis. No caso do Firefox, é carregado um formato de fonte padrão que é substituído pela fonte selecionada assim que ela fica disponível.

Web fonts na prática: O Google Web Fonts

Se você não consegue usar fontes externas porque não tem um grande conhecimento sobre o assunto ou mesmo sobre como estilizá-las, o bom e velho Google oferece o serviço chamado Google Web Fonts. Nele, é possível encontrar uma grande coleção de fontes gratuitas e de código aberto para web, onde basta copiar o código fornecido para aplicar em seu blog ou site sem grandes dificuldades, evitando assim dores de cabeças e preocupações como o envio dos arquivos de fonte para seu servidor. Ao abrir a página, você poderá digitar um texto e escolher um tamanho para pré visualizar o resultado direto no browser antes de se decidir pelo tipo de letra, como se vê na imagem a seguir:

Como exemplo, vamos supor que você tenha gostado de uma fonte qualquer do site. Clicando na opção Pop-Out, você irá abrir uma janela que exibirá a fonte com todos os seus caracteres disponíveis. É importante pré visualizá-la, pois se ela não possuir acentos e cedilha, o seu texto apresentará lacunas, comprometendo a sua legibilidade e compreensão:

A janela para pré visualização dos caracteres:

Se for o caso, escolha outra fonte com os caracteres essenciais para a língua portuguesa. Quando estiver certo de que quer mesmo usar determinada fonte, clique em Quick Use. Você poderá visualizar outras informações, como:

Estilos – Algumas fontes possuem versões em itálico, negrito, sublinhado e se desejar utilizá-los, marque as caixas com versões que vai utilizar. Não esqueça que quanto mais estilos você marcar, mais fontes serão carregadas, o que vai causar certa perda no tempo de carregamento da página;
Conjunto de caracteres – Normalmente, para o uso em página de língua portuguesa, apenas o Latin é suficiente;
Código – Para inserir a fonte em sua página, basta copiar o código fornecido pelo site e colá-lo, de preferência dentro da seção <head> da sua página, para que a fonte seja carregada logo na abertura do documento.

Exemplo de comando HTML para acessar e usar a fonte do Google em sua página:

<link href='http://fonts.googleapis.com/css?family=Share+Tech' rel='stylesheet' type='text/css'>    <style>   h1 {    font-family: 'Share+Tech';   }   </style>   <h1>Web Fonte personalizada dentro do HTML </h1>

Conclusão

Abrem-se diversas possibilidades com esta forma simples e rápida de utilização de fontes. Você pode utilizar o Google Web Fonts ou sites como o Fontsquirrel, onde pode encontrar centenas de pacotes com todo o kit para o @font-face, já incluídos os diferentes formatos da fonte e até a regra em CSS para aplicá-las. Não importa qual escolha, o importante é tentar utilizá-las e tornar o design da página e a experiência de navegação muito mais agradável. Espero que tenha apreciado as informações aqui descritas e mãos à obra!

Páginas

quinta-feira, 7 de novembro de 2013