Isenção de responsabilidade:
Sei que não existe uma "fórmula" perfeita para esta pergunta. Estou procurando suas práticas de trabalho experienciais. Se você não tiver nenhum, não o segurarei.

Nos últimos dois anos, as faculdades da web finalmente se tornaram populares! O suporte ao navegador é bom o suficiente e o mercado se expandiu na medida em que os designers têm uma excelente variedade de possibilidades.

Para meus clientes focados no desempenho, o uso de webfonts tem alguns benefícios interessantes além do visual / branding: A saída de imagens do tipo possibilita uma maior compactação de imagem e as atualizações de conteúdo e estilo muito mais rapidamente.

A pergunta hoje é:
em que momento você faz a pausa do texto HTML ativo para os gráficos? Especialmente no contexto de um site com requisitos de alto desempenho (cargas de tráfego, lógica e carregamento de ativos de terceiros). Estou caminhando na linha em alguns projetos agora e tendo dificuldade em decidir em alguns casos. Estou imaginando que fórmula os outros inventaram. Caso existam.

Precisamos equilibrar vários fatores (eu sei que existem mais):

• Integridade tipográfica
• Solicitações de ativos feitas para o servidor
• SEO e acessibilidade
• Design responsivo (quando aplicável)

Para complicar , a renderização ainda varia muito de acordo com o navegador e o SO . Compare o IE 8 a 9, por exemplo, ou, mais dramaticamente, o OS X para o Windows. Obviamente, seu mercado pode negar a preocupação com alguns desses problemas (infelizmente ainda apoio em grande parte o IE7 em alguns projetos). E embora o suporte ao recurso WebType OpenType seja muito bom no Firefox, ele ainda está atrasado em praticamente todos os outros.

Minha solução: folhas de sprite SVG com fallback PNG

Pessoalmente, acho que as fontes de ícones são uma tecnologia pobre de lacuna que não existirá em cinco anos. As imagens SVG são um caminho muito melhor se você precisar de vetores. O SVG tem a maioria dos benefícios das fontes de ícone, além de:

• Os SVGs podem conter cores, gradientes e outros efeitos.
• Funciona com imgtags.
• Funciona como CSS background-images.
• SVGs são perfeitos em pixels.
• Assim como as fontes de ícone, o SVG pode ser dimensionado para qualquer tamanho, para que você obtenha suporte para Retina gratuitamente.
• SVGs geralmente são arquivos menores que as fontes de ícone.
• Se você quiser tudo em um arquivo, poderá usar folhas de sprite SVG.
• Os SVGs são mais fáceis de criar e podem ser editados no Illustrator.
• A renderização é muito mais consistente nos navegadores (certamente para coisas simples de qualquer maneira).

A grande ressalva para o uso de SVGs? Não há suporte para o Internet Explorer anterior à versão 9. Isso pode ou não ser um diferencial para você. O WebKit (Safari e Chrome) e o Firefox têm ótimo suporte a SVG. Para versões mais antigas do Internet Explorer, você pode trocar sua folha de sprites SVG por PNG (super fácil, geralmente apenas algumas linhas de CSS).

Isso deve cobrir tudo e fornecer apenas algumas solicitações HTTP, tamanho pequeno de arquivo, capacidade de usar cores, gradientes e outros efeitos de design. Ah, e isso significa que você não precisa recorrer a hackers HTML horríveis. As coisas podem ser legais e semânticas.

Não há muitas situações em que eu recomendaria fontes de ícones. Eu acho que é uma péssima ideia. Um stop-gap realmente hacky que estará morto e enterrado em algum momento no futuro próximo.

Você mesmo menciona: "A questão fundamental aqui é manter um equilíbrio entre o visual e o técnico". Aqui está minha opinião e tenho certeza de que nem todos concordarão, mas foi o que observei nos últimos anos trabalhando na web.

Fontes da Web versus fontes seguras: tecnicamente, você não precisa de fontes da Web. Você pode usar os seguros, que não exigem que o usuário baixe nenhum arquivo extra (solicitações). Você pode fazer maravilhas combinando tamanho, peso, espaçamento entre letras e altura da linha e provavelmente comunicar com êxito sua mensagem com elas. Usar uma fonte diferente nesse caso provavelmente seria apenas uma escolha estética.

Texto HTML vs gráficos: Eu não acho que exista uma fórmula para este. Quando as fontes da Web se tornaram extremamente populares, todo mundo pulou no trem da fonte, independentemente de quão horrível algumas fontes parecessem em determinados SO / navegadores. Me lembra um pouco de como as pessoas viraram as costas para as mesas e, de repente, qualquer pessoa que as usava era blasfema. As tabelas ainda são a melhor opção para dados tabulares. Os gráficos perfeitos de pixel ainda são, na minha opinião, a melhor escolha para designs estéticos.

Isso provavelmente mudará no futuro próximo, no entanto. A renderização para celular é incrível e algumas novas fontes ficam ótimas em diferentes dispositivos.

Na última vez em que desejei 'customizar', tentei a maioria dos sans-serifs no tipo esquilo de fontes em três sistemas operacionais diferentes e nos principais navegadores. Eu dei a cada um uma pontuação de 1 a 5, com base no quão bem eles renderam. A maioria deles obteve um 3, outros um 4. Para um site pessoal, eu usei metade gráfica e meia fonte. Como o DA01 menciona, "tudo depende das necessidades do cliente, das necessidades dos usuários do cliente e da solução específica que está sendo projetada" (DA01 sic).

Faz anos desde o 'lançamento' do @ font-face, e por mais que eu adorasse usar fontes bonitas em meus designs, ainda não vejo o sentido de usar fontes com renderizações tão diferentes em vários cenários. Mas esta é apenas a minha humilde opinião, e eu tendem a ficar com 'o que funciona para mim'. A resposta SVG parece ótima e pode mudar minha opinião :)

Ok, eu vou avaliar onde estou, já que não parece haver nenhuma abordagem fixa aparecendo.

Renderização

Para iniciantes, os dias de renderização esboçada da WebFonte estarão completamente para trás em breve, pelo menos com fontes bem feitas. Os principais infratores (versões do IE anteriores a 9) estão rapidamente se tornando uma coisa do passado. O IE 8 ainda é um jogador, mas estou convencido de que o público não é motivado esteticamente;)

Efeitos extravagantes

O texto do sistema / HTML pode lidar facilmente com alterações de
cor,
opacidade,
escala,
posicionamento horizontal e vertical
e sombras do texto.

Quando meus efeitos começam a ficar complicados, considero um momento óbvio do tipo gráfico. Além dos controles simples de estilo (alguém gostaria de adicionar à minha lista?), Você precisará confiar em
bibliotecas javascript,
recursos OpenType com suporte irregular,
downloads de fontes da Web excessivamente grandes no final do usuário
e , possivelmente, recursos HTML5 / CSS3 com suporte limitado.

Se eu quiser inclinar meu tipo,
afinar o kerning,
aplicar texturas,
posicioná-lo e quebrá-lo com precisão sobre uma imagem
ou qualquer outra coisa que exija controle preciso, recorro a um gráfico.
Como eu disse, existem maneiras, mas acho que não valem a pena neste momento.

Com isso dito, também preciso me perguntar nesses casos se realmente preciso dos efeitos. Poderia muito bem definir o tipo de sistema sem todas as coisas sofisticadas. Talvez. Sempre há uma linha confusa em algum lugar.

Grandes coisas

Onde me vejo hesitando em confiar em webfonts é muito grande. Apenas para jogar fora um número, digamos 60px e acima. Por que é que? Não tenho muita certeza, mas consigo pensar em algumas coisas que me preocupam.

Por um lado, o tipo grande geralmente requer um pouco de compreensão extra que o rastreamento simples não pode resolver. O tipo é dominante na página e cada pequena falha se torna dolorosamente evidente para mim.

Em segundo lugar, o tipo que é grande tende a exigir uma montagem muito cuidadosa no design. Eu acho que é menos crítico em sites de conteúdo em que o tipo pode fluir e há algum espaço em branco muito necessário, mas em um site de comércio ou em um ambiente de conteúdo denso, uma quebra de linha extraviada ou um caracter estendido pode causar estragos.

Acho que essas podem ser apenas inseguranças dos dias em que os navegadores fizeram um trabalho muito ruim com o tipo. Infelizmente, ainda existem muitos problemas que me deixam cauteloso. Coisas como o botão Adicionar ao carrinho da Giantnerd me fazem querer abraçá-lo :)

O veredicto final

Bem, talvez não seja final. Final-ish.

Apesar das minhas inseguranças, estou superando o tipo de coisa grande. E me pego usando menos efeitos e mais texto limpo do sistema em outro lugar. Um dos grandes ganhos são os layouts mais responsivos: o texto do sistema é fácil de mudar rapidamente!

Estou rapidamente simplificando os sites dos meus clientes e mudando para menos dependência de imagem. Traga nas fachadas da web! Talvez seja outro período de revitalização do Estilo Internacional no design;)

Em divulgação completa

Eu seria negligente em não mencionar exercícios impressionantes, como as feiras dos mundos perdidos . É uma prova maravilhosa de que praticamente tudo é possível, com o tempo e a base de usuários certa.