Font Icona 101

I font icona sono caratteri tipografici in cui i glifi — normalmente lettere e numeri — sono sostituiti da simboli pittografici. Invece di renderizzare la lettera "A", un font icona renderizza un'icona casa, una lente di ingrandimento per la ricerca o un carrello della spesa.

Poiché le icone risiedono all'interno di un file di font, si comportano esattamente come il testo. È possibile ridimensionarle a qualsiasi dimensione con font-size, cambiarne il colore con color, aggiungere ombre al testo, applicare transizioni CSS e persino animarle — tutto senza toccare un singolo file immagine.

Questo approccio offre diversi vantaggi pratici:

• Indipendenza dalla risoluzione — i contorni vettoriali scalano nitidamente su qualsiasi densità di schermo
• Payload minimo — un singolo file di font compresso sostituisce decine di singoli asset immagine
• Controllo CSS — colore, dimensione, ombra, opacità e stati hover sono gratuiti con lo stile del testo
• Singola richiesta HTTP — l'intero set di icone si carica in un unico round-trip di rete

Agli albori del web, gli sviluppatori si affidavano a immagini singole o sprite CSS — grandi immagini composite in cui ogni icona occupava una regione rettangolare fissa. Gli sprite riducevano le richieste HTTP, ma erano fragili: aggiungere o ridimensionare un'icona significava rigenerare l'intero foglio sprite e aggiornare manualmente gli offset in pixel.

Intorno al 2012, progetti come Font Awesome e IcoMoon hanno reso popolare un'alternativa più pulita: confezionare le icone come glifi di font mappati sull'Area ad Uso Privato di Unicode. I designer potevano sostituire un intero set di icone cambiando una singola dichiarazione @font-face, e gli sviluppatori potevano stilizzare le icone con lo stesso CSS già utilizzato per il testo. La tecnica si è diffusa rapidamente e rimane una scelta affidabile e a basso overhead per i design system basati su iconografia monocromatica.

Il dibattito "font icona vs SVG inline" è un tema ricorrente nelle discussioni front-end da oltre un decennio. Entrambi gli approcci sono validi — la scelta giusta dipende dai requisiti del progetto.

Font Icona

• Singola richiesta HTTP — un file di font consegna ogni icona
• Stile CSS semplicissimo — modificare color, font-size e text-shadow come qualsiasi testo
• Solo monocromatico — ogni glifo supporta un singolo colore di riempimento
• Facilissimo da integrare — aggiungere un link al foglio di stile, usare una classe CSS, fatto

SVG Inline

• Multicolore — ogni percorso può avere il proprio fill, stroke o gradiente
• Accessibile di default — <title> e aria-label forniscono semantica reale per gli screen reader
• Cacheabile individualmente — le icone non utilizzate non vengono mai scaricate
• Controllo granulare — animare singoli percorsi, applicare filtri per elemento

Sprite SVG

• Combinare più SVG in un unico foglio sprite <symbol>
• Referenziare le icone con <use href="#icon-name">
• Offre i vantaggi di entrambi — richiesta singola, multicolore, accessibile — ma richiede un pipeline di build più elaborato

I font icona possono essere distribuiti in cinque formati di file, ognuno con diversa compressione, supporto browser e casi d'uso. Ecco un confronto rapido:

Non si sa quali formati includere? Ecco una guida pratica alle decisioni:

• Se si sceglie solo uno — distribuire WOFF2. Offre la migliore compressione (Brotli) e copre il 97%+ dei browser.
• Se è necessario il supporto a IE 11 — distribuire WOFF2 + WOFF. WOFF gestisce i browser rimanenti che non dispongono della decodifica Brotli.
• Se è necessario il supporto a IE 8 — distribuire WOFF2 + WOFF + EOT. EOT è l'unico formato compreso da Internet Explorer 6-8.
• Per le applicazioni desktop — usare TTF. È il formato nativo per il rendering dei font a livello di sistema operativo su Windows, macOS e Linux.
• Per il debug dei problemi di font — ispezionare il SVG Font. La sua struttura XML è leggibile dall'uomo, rendendo facile verificare i percorsi dei glifi e i metadati.

Approfondisci ogni formato per comprenderne gli aspetti interni, la compatibilità browser e le best practice:

Scopri come utilizzare questi formati nei tuoi progetti: