Aguarde...

4 de março de 2021

Pare de usar fontes de ícone

Pare de usar fontes de ícone

Apenas um ano antes de a primeira página da Web entrar no ar em 1991, a Microsoft começou a distribuir talvez a fonte de ícone mais conhecida, Wingdings . No entanto, levaria quase 22 anos para que as fontes de ícone se tornassem uma tendência de design na Internet.

A introdução do @font-faceCSS na regra permitiu aos web designers especificar fontes personalizadas com as quais exibir o texto. Em 2011, todos os principais navegadores o suportavam. Isso deu origem à ideia de que fontes compostas de pictogramas, como Wingdings , poderiam ser usadas no lugar de imagens raster na web. Considerando que o suporte SVG real em todos os principais navegadores não se tornou estável até o início de 2020, as fontes de ícone eram a maneira de fato de adicionar ícones baseados em vetor em seu site.

Mas as fontes de ícone na web eram fundamentalmente falhas desde o início. E agora, com o suporte SVG completo à nossa disposição, é hora de interromper o uso deles de uma vez por todas.

Fontes de ícone com falhas

Flash de conteúdo sem estilo (FOUC)

Ao utilizar @font-face, você está instruindo o navegador a fazer uma solicitação HTTP para o arquivo de fonte necessário. Esta solicitação também não é despachada imediatamente. Quando o navegador começa a analisar o HTML e todos os arquivos vinculados referenciados na marcação, ele está construindo o Document Object Model (DOM) em tempo real. Quando uma fonte vinculada é encontrada, a solicitação é disparada. Quanto tempo leva para recuperar a fonte pode depender do tamanho do ativo da fonte, das condições da rede e do hardware do usuário.

Enquanto espera pelo recurso de fonte, o navegador escolherá exibir o conteúdo textual do HTML antes de realmente recebê-lo. Isso resulta em um flash de conteúdo não estilizado (FOUC). Esses flashes podem ser muito chocantes para seus visitantes. As fontes de ícone geralmente atribuem seus glifos a pontos de código fora do intervalo normal em que a maioria das fontes normais opera. No entanto, se não o fizerem, é possível que caracteres aleatórios ou glifos apareçam no lugar dos ícones antes que a fonte seja totalmente carregada.

Nota : é possível usar diretivas mais recentes, como preload, em recursos de fonte para evitar FOUC. No entanto, isso não resolve todos os outros problemas definidos neste artigo e não é recomendado.

Acessibilidade

Fontes de ícone são notoriamente ruins para acessibilidade e podem levar a algumas experiências frustrantes para aqueles que dependem de tecnologias assistivas.

  1. Tratado como texto – O navegador trata as fontes como texto porque é isso que as fontes deveriam ser. Os leitores de tela têm se tornado cada vez mais inteligentes ao longo dos anos, mas ainda têm dificuldade em discernir o que é um texto legível e o que é um pictograma. A maioria dos leitores de tela lerá em voz alta o texto inserido via CSS, portanto, quando encontrarem seus ícones, eles poderão dizer “impronunciável” ou podem ser totalmente ignorados.
  2. Substituições de folha de estilo – Aqueles com deficiência visual costumam usar folhas de estilo personalizadas para substituir os estilos padrão dos sites que visitam para torná-los mais fáceis de usar. Isso pode incluir alterar os esquemas de cores, aumentar o tamanho ou peso da fonte ou até mesmo alterar a face da fonte completamente. Se o seu site depende de ícones de uma forma não contextual, alguém usando uma fonte auxiliar (por exemplo, OpenDyslexic ) fará com que seus ícones sejam substituídos e desapareçam completamente, potencialmente deixando o seu site inutilizável.
  3. Não é possível fornecer metadados – O processo de implementação de uma fonte de ícone na web requer o uso de pseudoelementos ::beforeou ::after. Semanticamente, os ::before::afterpseudo-elementos são destinadas a adicionar conteúdo cosmético a um elemento existente. Para fontes de ícone, isso faz sentido, desde que o ícone esteja sendo usado contextualmente com outro elemento. No entanto, há muitas vezes em que um ícone é usado como o foco principal. Por exemplo, um “x” para “fechar” ou uma casa para retornar “casa”. Por si só, esses ícones não fornecem nenhuma informação semântica sobre seu conteúdo; Você não pode rotulá-los ou descrevê-los diretamente.

Tamanho e capacidade de manutenção

Fontes de ícone não são ativos baratos. Cada vez que um visitante baixa a fonte do seu ícone, ele está baixando todos os ícones que você pretende usar em qualquer lugar do seu site, independentemente de ver todos ou não. Esse fato por si só torna as fontes de ícone difíceis e um tanto chatas de manter. Se a fonte do seu ícone contém 200 ícones e você usa 10 deles, você está forçando seus visitantes a baixar 190 ícones que eles nunca verão. Isso degradará a experiência do visitante, aumentando os tempos de carregamento e estendendo o FOUC.

Manter uma fonte de ícone significa adicionar e remover ícones conforme necessário para manter o tamanho da fonte e das folhas de estilo subsequentes ao mínimo. Isso também significa que toda vez que você atualiza sua fonte, você precisa invalidar o cache de ativos do visitante e forçá-los a baixá-los novamente.

Qualidade Visual Degradada

Todos os navegadores e sistemas operacionais modernos empregam até certo grau o anti-aliasing no texto. O anti-aliasing textual é independente de sua fonte ser composta ou não de letras e números ou pictogramas. Isso tem o potencial de efeitos colaterais negativos em termos de qualidade visual, especialmente se você empilhar glifos para fazer ícones multicoloridos. Seus ícones podem parecer desfocados ou desalinhados.

Difícil de estilizar / posicionar

Como se eu não tivesse dito o suficiente, as fontes de ícone são as fontes primeiro e os ícones depois. Isso significa que seus ícones seguir regras CSS baseados em texto, como font-sizeletter-spacingline-height, etc. Isso pode fazer ícones posicionamento mais difícil e menos consistente. Além disso, os glifos de fonte do ícone são monocromáticos, o que significa que qualquer alteração estilística que você fizer afetará todo o glifo.

Pare de usar fontes de ícone

SVG’s to the Rescue!

Com o lançamento da versão do navegador Edge da Microsoft com Chromium no início de 2020, o Scalable Vector Graphics (SVG) passou a ser totalmente compatível com todos os principais navegadores. Mesmo antes disso, os SVGs têm suporte em todos os navegadores desde 2012, embora com algumas ressalvas no Internet Explorer e pré-Chromium Edge . E adivinha? SVGs são fantásticos para ícones da web!

Ícones Simplesmente Funcionam

Os dados da imagem SVG são armazenados diretamente no seu documento HTML. Assim que o navegador o processa, ele o renderiza. Você não precisa esperar que outras solicitações HTTP sejam concluídas como faria com uma fonte de ícone.

Melhor acessibilidade

Os SVGs têm recursos de acessibilidade integrados que lhes dão uma vantagem sobre o uso de fontes de ícone.

  • Eles são semanticamente elementos de imagem.
  • Fornecer metadados é muito fácil. Basta fornecer um elemento <title>ou <desc>em seu contêiner SVG. Os leitores de tela pegarão esses valores e lerão algo útil para o visitante. E porque SVGs são elementos apenas em seu HTML, você pode usar atributos do ARIA , como aria-labelledbycom facilidade.

Mais fácil de manter

Comparado um a um, uma coleção de 100 SVGs versus um WOFF2 de 100 glifos de ícone será maior. No entanto, os benefícios de SVGs superam facilmente uma implementação de fonte de ícone. Com SVGs, você só incluirá os ícones necessários para aquela página individual, diretamente em seu código. Você não precisa manter uma fonte e seus arquivos CSS de suporte fora do seu site.

Nota: Se você estiver criando um aplicativo de página única (SPA), certifique-se de examinar as técnicas adequadas de divisão de código para manter o tamanho do pacote baixo.

Imagens nítidas

SVGs são imagens vetoriais diretas. Os métodos anti-aliasing empregados pelo seu navegador ou sistema operacional não surtem efeito e seus ícones ficarão visivelmente mais nítidos.

Controle CSS total

Com SVGs, você tem acesso a todos os mesmos controles CSS de uma fonte e muito mais! Você pode direcionar diretamente partes específicas de um ícone de várias partes e aplicar estilos diferentes a cada um. Você também pode usar controles CSS específicos de SVG, como a strokepropriedade.

Além disso, os SVGs são simplesmente do tamanho que têm. Eles não são afetados por regras CSS baseadas em texto.

outras considerações

Para oferecer suporte total ao uso de SVGs em seu site, certifique-se de seguir outras práticas recomendadas comuns:

  • Otimize seus SVGs – execute suas imagens SVG por meio de um otimizador para diminuir o tamanho. (A maioria, senão todas, as bibliotecas de ícones que oferecem pacotes SVG fazem isso por padrão.)
  • Habilite GZIP – Configure seu servidor para enviar todos os ativos com GZIP. Isso incluirá dados SVG em seus arquivos HTML e / ou JS.
  • Efetivamente em cache – defina os cabeçalhos de cache apropriados para que seus visitantes façam download apenas quando forem alterados. Como os SVGs farão parte dos arquivos HTML e / ou JS, você só deseja que os visitantes os baixem novamente se eles forem alterados.

Primeiros passos com ícones SVG

A maioria das principais bibliotecas de ícones oferece pacotes SVG da biblioteca. Duas bibliotecas de ícones populares, Material Design Icons e Font Awesome , possuem pacotes que você pode usar para instalar npm.

Se você estiver usando uma estrutura, muitas das principais bibliotecas de ícones também lançaram pacotes para as mais populares, para que você possa começar a trabalhar rapidamente. Por exemplo, se você estiver usando o React , os ícones do Material Design e o Font Awesome têm soluções fáceis:

  • Ícones do Material Design – @ mdi / react & @ mdi / jsimport Icon from '@mdi/react'; import { mdiCoffee } from '@mdi/js'; const element = <Icon path={mdiCoffee} size={1} />;
  • Font Awesome – @ fortawesome / react-fontawesomeimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCoffee } from '@fortawesome/free-solid-svg-icons'; const element = <FontAwesomeIcon icon={faCoffee} />;

Observação: ambas as soluções agrupam apenas os ícones que você usa por causa do tremor de árvore .

Conclusão

O uso contínuo de fontes de ícones é prejudicial para os visitantes e uma perda de tempo para você. Ao substituir sua implementação de fonte de ícone existente por ícones SVG, você está ajudando as pessoas que utilizam tecnologias assistivas, melhorando a qualidade, clareza e confiabilidade de seus ícones e reduzindo seu tempo para manter ativos legados. E se você acabou de tropeçar neste artigo ao tentar determinar se você deve usar uma fonte de ícone ou não, espero que a resposta agora seja óbvia.

Postado em Blog
Escreva um comentário