Icon fonts: il web design basato su icone vettoriali
L’uso di dati da dispositivi mobili avanza richieste particolari alla programmazione di siti web e al design delle interfacce utente digitali. È importante che le applicazioni per i dispositivi mobili siano veloci ed intuitive così come è essenziale che i contenuti di una pagina si carichino velocemente. La tendenza quindi è un design minimalista, il cosiddetto Flat Design. Conformemente al detto “Less is more”, si rinuncia ad inserire immagini reali preferendogli delle rappresentazioni stilizzate dei comandi (icons). Ad esempio, una penna stilografica indica un programma per scrivere o un altoparlante la possibilità di ascoltare un suono. La caratteristica principale di queste icone bidimensionali è che occupano poco spazio, dal momento che vengono inserite nel codice sorgente di una pagina e nell’interfaccia utente sotto forma di font. Il Flat Design può essere considerato una forma di scheumorfismo, cioè uno stile di rappresentazione che riproduce oggetti per mezzo di simboli nella maniera più realistica possibile, al fine di facilitare agli utenti l’interazione con i comandi digitali. Un esempio famoso di Flat Design è l’interfaccia utente di Microsoft Windows 8 ottimizzata per touchscreen.
Che cos’è un icon font?
La lente di ingrandimento nel campo di ricerca, il carrello nel negozio online o la busta vicino all’indirizzo e-mail sono tutte icone che trovate quasi in ogni sito web. Queste aiutano gli utenti ad orientarsi, esplicitano la funzione degli elementi e fanno in modo che siano comprensibili senza bisogno di parole. Sempre più spesso, per creare icone gli sviluppatori attingono a icon font (al posto di immagini bitmap o sprite CSS), cioè font che contengono icone vettoriali invece che lettere. Al contrario delle immagini bitmap, definite dal numero di bit per pixel, le icone vettoriali sono facilmente scalabili senza perdite di qualità e hanno dimensioni ridotte. Inoltre gli icon font possono essere creati in un CSS (Cascading Style Sheets) a piacimento. Dato che scalando le immagini non vi è alcuna perdita di qualità, le icone vengono rappresentate nitidamente anche su display ad alta definizione; a differenza delle immagini bitmap però sono monocromatiche (CSS permette anche l’inserimento di diverse gradazioni di colori). Inoltre si deve sempre inserire un icon font completo, anche se si vuole usare una sola icona. Su Internet trovate moltissimi servizi che offrono icon font gratuiti, installabili in pochi click.
Servizi che offrono icon font
Gli sviluppatori web non devono usare per forza icon font a pagamento, ma su Internet si trovano numerosi servizi open source che offrono gratuitamente una vasta scelta di icone. La lista seguente indica alcuni dei fornitori più amati:
- Font Awesome: una delle più grandi raccolte open source di icone, concepita inizialmente per Bootstrap, ma compatibile con tanti altri framework. Font Awesome offre più di 600 icone da utilizzare sul web. Tutte le icone sono vettoriali, compatibili con screen reader e scalabili a piacere senza perdere in qualità. Il font ha licenza SIL Open Font License (SIL OFL) e può essere usato anche per scopi commerciali in maniera gratuita.
- Entypo: a differenza di Font Awesome, Entypo non offre un icon font, ma un set di icone vettoriali in formato SVG. Questo rende disponibile una base per font personalizzati, che si creano con il generatore di font personalizzati. Tutti i programmi Entypo sono sotto la licenza Creative Commons CC BY-SA 4.0 e quindi sono anche disponibili per un uso commerciale.
- Typicons: Typicons è un icon font con più di 300 icone vettoriali ottimizzate per screen reader e installabili tramite il tool di gestione open source Bower. Ci sono sia icone vettoriali sia CSS compressi. Anche l’icon font Typicons è sotto licenza SIL Open Font License.
- Open Iconic: gli icon font di Open Iconic offrono oltre 200 icone in formato SVG come anche diversi font e formati vettoriali. I creatori evidenziano prima di tutto le dimensioni ridotte dei loro font: Open Iconic in formato WOFF pesa circa 12,4KB ed è quindi molto più piccolo di Font Awesome. Tutte le icone hanno licenza MIT. I font usati hanno licenza SIL OFT e quindi possono essere usati gratuitamente per progetti commerciali.
Configurare un set di font
Di solito gli sviluppatori non hanno bisogno di tutte le icone di un icon font. È comune usare sul proprio sito web una combinazione di icone provenienti da diversi servizi. Questi cosiddetti set di font possono provenire da diverse fonti e si combinano con generatori di font come Fontello, fontastic.me o IcoMoon App. Un set di font personalizzato ha il vantaggio di incorporare solo le icone che si vedono sul sito web. Questo riduce le dimensioni del file e quindi i tempi di caricamento di un sito web.
Inserire icon font
Di regola gli icon font si inseriscono tramite l’attributo “class“ nel codice sorgente HTML. Quindi l’icon font corrispondente deve essere incorporato nell’head del documento HTML. Alcuni servizi mettono a disposizione un file CSS standard. Inoltre è possibile un’integrazione tramite il framework Bootstrap, se il font lo supporta. Nell’articolo di approfondimento è spiegato come integrare le icone tramite l’elemento “class”, prendendo come esempio Font Awesome.
Adattare le icone
Ci sono molte possibilità di creazione con gli icon font che possono essere caricati direttamente su un file CSS e includendo un attributo “class” nel documento HTML. Al contrario di immagini pixel, le icone vettoriali, che vengono incorporate tramite icon font, vengono inserite e modificate tramite CSS. Così gli sviluppatori web adattano in maniera personale le dimensioni, i colori o le funzioni di un’icona al rispettivo sito web. Inoltre le icone possono anche avere un motivo ed effetti ombra.
Articoli simili
Come inserire un icon font nel vostro documento HTML
Di regola le icone vengono inserite tramite attributo “class” nel documento HTML. Questo principio vale anche per Font Awesome, uno degli icon font più usati, che comprende più di 600 icone vettoriali, ed è caratterizzato dalla semplicità di utilizzo ed è aggiornato regolarmente. Inoltre, il pacchetto di installazione contiene un file CSS quasi interamente configurato che semplifica…
Tipografia nel responsive web design: nozioni base
Su internet si trovano numerosi testi con diversi caratteri. La diffusione del responsive web design si riflette anche sulla tipografia nei siti web e la visualizzazione dei caratteri dovrebbe adattarsi sempre alla schermata del dispositivo utilizzato. La tipografia reattiva deve avere una visualizzazione flessibile e utilizzare font adatti. In questo primo articolo vi offriamo una panoramica dei…
Tipografia nel responsive web design: caratteri adatti
In quest’ultimo articolo della serie dedicata alla tipografia nel responsive web design, vi mostriamo come la scelta di caratteri sia cresciuta esponenzialmente con l’introduzione dei font. Molti di questi sono scaricabili gratuitamente e grazie alla loro adattabilità sono perfetti per un responsive web design; il font delle vostre pagine web si adatta alle caratteristiche del dispositivo mobile.…
Tipografia nel responsive web design: formattazioni CSS
Nel responsive web design la tipografia è un campo trascurato, nonostante la realizzazione di un carattere reattivo non sia più un segreto per pochi. Ma come si fa a realizzarlo? E quali font sono adatti a una scrittura responsive? Vi offriamo una panoramica su come realizzare una tipografia reattiva e come inserirla sul vostro sito tramite i CSS.
kozirskyShutterstock Cos’è un’immagine vettoriale?
Cos’è un’immagine vettoriale? Questo formato d’immagine permette di ridimensionare una grafica mantenendo la qualità originale. Ciò è di grande importanza per i logotipi che devono mantenere un aspetto ottimale su una vasta gamma di media, dalla carta intestata a enormi cartelloni pubblicitari. In questo articolo scoprite cos’è un’immagine vettoriale, quando viene usata e quali programmi…
