O design da Web veio à tona no dia em que webfonts entraram em uso disseminado. Antes disso, é discutível que éramos menos projetistas do que engenheiros.
No entanto, o entusiasmo com que nos deparamos com as opções de fonte no design da web levou a uma desconcertante variedade de opções; Tanto é assim que muitos designers optam pelo caminho de menor resistência, permitindo que o desejo de implementação simples dite sua tipografia.
Se você sabe o que está procurando, todas as opções são simples. Neste artigo, nós o armaremos com o conhecimento necessário para tomar decisões informadas ao escolher entre a tecnologia de fontes.
Vamos ilustrar essas opções, concentrando-nos na melhor maneira de fornecer um tipo clássico de todos os tempos, o Garamond.
Tendo exaltado as virtudes dos webfonts, a primeira opção que consideraremos não usa nenhum webfonts. O empilhamento de fontes é uma técnica de CSS na qual você especifica um número de fallbacks começando com sua primeira escolha e terminando com uma solução pega-tudo.
Existem muitos recursos de empilhamento de fontes on-line, mas um dos meus favoritos é cssfontstack.com, É um ótimo ponto de partida para uma pilha de fontes, mas esteja ciente de que, na maioria das vezes, você precisará trazer um pouco de conhecimento.
De acordo com o cssfontstack.com, o Garamond está disponível como fonte de sistema em 49,91% dos Macs e 86,47% das máquinas Windows. Isso é muito bom, mas não é bom o suficiente. Aqui está a pilha de fontes sugerida que cobre todas as bases:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;A questão é, como podemos melhorar isso?
Bem, sabemos que existem inúmeras versões do Garamond disponíveis, por isso podemos adicionar uma variação no segundo slot como um compromisso menor.
Em segundo lugar, eu discordo que Baskerville ou Times são substitutos adequados para Garamond, então vamos deixá-los cair. Hoefler Text funciona bem no lugar de Garamond, então isso pode ficar. Precisamos adicionar a serif como uma última captura geral, mas como a maioria dos sistemas usa o Times como sua serif padrão, vamos inserir a parte superior da Geórgia para qualquer um que esteja escorregando.
Nossa pilha de fontes final modificada é assim:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;A maioria dos telespectadores vai ver o Garamond, outros irão ver um compromisso razoável e uma pequena minoria terá apenas a sua fonte serif padrão.
O empilhamento de fontes é gratuito, de longe a solução mais rápida e, dependendo do tipo de letra escolhido, pode ser muito eficaz; no caso de Garamond, há um bom argumento para chamar isso de "trabalho feito".
Há, no entanto, um grande problema com o empilhamento de fontes, especialmente com um tipo de letra como Garamond: há tantas versões piratas em circulação que é impossível saber qual fonte é chamada “Garamond” no sistema do usuário, não só não podemos ter certeza o design é consistente com nossas expectativas, a escala da fonte pode ser radicalmente diferente da versão em nosso design. (Tecnicamente, nada impede que uma cópia do Arial seja renomeada para “Garamond”, caso em que nossa pilha de fontes usaria isso.)
O empilhamento de fontes é, portanto, um ótimo back-up, e deve ser considerado para uso em conjunto com todas as soluções abaixo, mas é menos que ideal como uma solução primária.
Google Fonts é, para muitos designers, o ponto em que eles terminam sua busca. Para um total de US $ 0, você pode facilmente carregar webfonts em seu site usando CSS.
A única desvantagem é que o número de tipos de letra em oferta é extremamente limitado. Fontes como Roboto e PT Sans devem sua popularidade tanto à sua disponibilidade gratuita no Google Fonts, quanto às suas qualidades de design.
Atualmente, a única variação do Garamond disponível no Google Fonts é EB Garamond, uma tentativa de abrir o fonte do tipo Garamond. Mas a falha desta versão é que existe apenas um peso e estilo disponíveis; não há negrito ou itálico. O designer Georg Duffner generosamente disponibilizou seu trabalho em andamento Bitbucket mas não está pronto para produção.
O Google Fonts é uma excelente solução de orçamento e ideal para situações em que você pode estar pagando a conta em vez de seu cliente. Ser capaz de especificar suas fontes em CSS é o mais simples possível.
A grande falha com o Google Fonts é que, apesar de seu marketing, há muito pouca escolha. Se você está procurando um webfont de Open Sans, então você está no lugar certo, mas se você quer uma fonte como Garamond - que é dificilmente obscura - é um wash-out.
Auto-hospedagem é uma abordagem extremamente subestimada para webfonts. Sua principal atração é a capacidade de subconjunto de fontes, uma opção tão atrativa que quase todos os serviços de streaming tentam imitá-la.
Se você tiver uma cópia do Garamond no seu sistema, abra-a e você verá um número desconcertante de caracteres. Subconjunto de uma fonte é o processo de exclusão de caracteres não essenciais, resultando em um tamanho de arquivo menor e entrega mais rápida.
Claro, os personagens que você precisa vão depender do site que você está construindo: se você está construindo um guia turístico para Dubrovnik, provavelmente precisará de caracteres cirílicos sérvios; Se você está reproduzindo as obras coletadas de Shakespeare, é improvável que você precise de um símbolo @.
Para criar uma fonte, você precisará de um software de edição de fontes. Existem muitas opções disponíveis a partir do livre FontForge para o prêmio FontLab Studio. Para produzir uma versão de subconjunto da fonte, basta selecionar um glifo que você não deseja e excluí-lo. Em seguida, salve o arquivo na pasta do projeto. (Cuidado para não substituir seu arquivo de fonte original!)
O arquivo .ttf completo para o Adobe Garamond Pro é 606Kb. Descartando-o para caracteres latinos básicos e a pontuação reduz para 56Kb. Multiplique isso em vários pesos e estilos e você economiza alguns Mb em downloads para seus usuários.
A maioria dos arquivos de fontes que você instalou será TrueType (.ttf) com um punhado de OpenType (.otf). Você pode salvá-los no seu servidor e especificá-los no seu CSS.
O suporte para formatos de arquivo .ttf e .otf é difundido em todos os navegadores modernos, exceto no IE (até mesmo na versão mais recente) e em alguns navegadores móveis (incluindo versões herdadas do iOS Safari).
Para aumentar sua cobertura, você precisará de vários formatos adicionais. .eot funciona para o IE, o .woff funcionará para a maioria dos navegadores e é o formato preferido do W3C, o .svg funcionará em navegadores herdados. Há vários serviços da Web que gerarão esses formatos para você a partir do arquivo .ttf, um dos mais populares Esquilo da Fonte.
A desvantagem da conversão de fontes da área de trabalho para uso on-line é dupla: em primeiro lugar, você quase certamente não está licenciado para isso; e em segundo lugar, as fontes da área de trabalho quase sempre são otimizadas para impressão, elas simplesmente não são renderizadas bem na tela.
As foundries de fontes finalmente acordaram para o fato de que há um enorme mercado para webfonts. Como resultado, eles não apenas aumentaram seu licenciamento, mas estão trabalhando para otimizar seus catálogos para telas.
As fundições que fornecem webfonts dedicados fornecem todos os formatos necessários, com qualidade verificada e prontos para serem carregados em seu servidor. Além do mais, você ainda pode separar um arquivo e não depende do tempo de atividade de um servidor de terceiros.
Existem inúmeros lugares que você pode comprar webfonts, dois dos principais jogadores no campo são FontShop.com e MyFonts.com .
Voltando ao nosso dilema Garamond, podemos ver que MyFonts tem um número de diferentes versões do Garamond em oferta. Nós podemos licenciar Adobe Garamond em vários pesos, restrito a 250.000 pageviews, por cerca de US $ 180.
FontShop também tem um número de versões webfont de Garamond disponíveis. URW Garamond Web fornece todos os pesos e estilos que poderíamos desejar, todos com um total de 500.000 pageviews por mês. Além do mais, FontShop tem um dedicado subconjunto para otimizar suas novas e brilhantes compras de fontes. Infelizmente você paga um prêmio por tudo isso, cerca de US $ 680 para a família de fontes completa.
Auto-hospedagem permite subconjuntos. Isso garante que você permaneça no controle da entrega da sua fonte e evita qualquer tipo de dependência em servidores de terceiros.
Além do mais, se você está comprando um webfont profissional, pode esperar que a qualidade seja extremamente alta.
A auto-hospedagem também atrai aqueles que preferem “possuir” nossas fontes, em vez de alugá-las. É claro que, em termos legais, há muito pouca propriedade, mas uma taxa única é mais confortável do que uma assinatura para muitas pessoas.
A única desvantagem da auto-hospedagem é o preço substancial. Não apenas você precisará pagar pela fonte, mas pode ser necessário incluir custos de hospedagem e largura de banda em seus dados.
Assim como o Google Fonts, os serviços de webfont fornecem fontes aos nossos navegadores por meio de CSS simples. Ao contrário do Google Fonts, há uma gama enorme para escolher.
Há um número de diferentes fornecedores para escolher, e eu particularmente gosto Hoefler & Frere-Jones ' cloud.typography serviço. No entanto, como acontece com muitos fornecedores menores, sua utilidade é totalmente dependente da disponibilidade do tipo de letra que você está procurando. A fonte mais próxima que Hoefler & Frere-Jones pode fornecer é Hoefler Text, no entanto, se estivermos pagando um prêmio, não precisaremos nos comprometer.
O maior player em streaming de webfont é Adobe Typekit . A qualidade de suas fontes é muito alta, a implementação é simples e, o mais importante, eles têm um catálogo enorme para escolher.
O Typekit fornece uma variedade de assinaturas que variam de US $ 24,99 por ano para 50.000 visualizações por mês, a US $ 99,99 por ano, para 1.000.000 visualizações por mês. No entanto, se você for um membro da Creative Cloud, o Plano de Portfólio será incluído na sua assinatura. o que significa que para a maioria dos web designers, o Typekit é uma solução gratuita.
Uma rápida pesquisa nos diz que existem várias versões do Garamond, incluindo A própria Adobe, disponível no Typekit. E há também um recurso de subconjunto muito limitado que nos permite reduzir um pouco o tamanho do arquivo.
Os serviços de streaming de Webfont fornecem uma grande variedade de fontes de excelente qualidade, fáceis de adicionar ao seu site.
No caso do Typekit, se você já é um membro da Creative Cloud, o acesso gratuito torna essa opção ainda mais atraente. No entanto, se você não for um membro, estará enfrentando uma opção entre pagar uma assinatura substancial e vincular-se à Adobe.
Minha principal preocupação com qualquer serviço de streaming é que você é totalmente dependente do desempenho de um servidor de terceiros. Se o servidor deles cair, o mesmo acontece com uma parte substancial da sua marca.
Tal como acontece com tantas coisas, a resposta é: depende do seu projeto. Mas há algumas decisões que podemos tomar com base no nosso teste Garamond:
O empilhamento de fontes é um backup sem custo, ele fornece uma solução na marca se e quando os arquivos de fontes forem perdidos ou os serviços de streaming ficarem lentos. Ele deve sempre ser implementado em qualquer site, mas confiar nele, mesmo para algo tão comum quanto o Garamond, é potencialmente perigoso.
Se a fonte que você está procurando está disponível para ser transmitida gratuitamente, seja pelo Google Fonts ou, por exemplo, se você tiver uma assinatura da Creative Cloud, essa é uma boa escolha. Como tenho uma assinatura da Creative Cloud, eu seria tentado nessa rota, embora a falta de subconjuntos reais fosse uma preocupação.
Se você tiver o orçamento, a hospedagem de uma página da Web profissional é a melhor opção. O custo relativamente modesto - quando comparado com as fotografias de estoque - é facilmente justificado pelas enormes ofertas de subconjuntos de aumento de velocidade.
Em um setor onde estamos diminuindo os arquivos JavaScript para economizar alguns Kb, depilar centenas de vezes esse valor de um único arquivo é algo óbvio.
Imagem em destaque / miniatura, baixar imagem via Shutterstock.