Come creare il proprio webfont per icone

In questo articolo, esaminerò la scienza alla base della creazione di icone dell'interfaccia utente di successo prima di insegnarti a creare il tuo font di icone incorporabile .

Dalla progettazione delle singole icone alla conversione per @font-face incorporando e persino concedendole in licenza per la distribuzione, utilizzeremo solo software gratuito e servizi online. Che ne dici di quello? Non è necessario affidarsi a nessuna delle conoscenze esoteriche richieste per realizzare caratteri alfanumerici di successo; solo un occhio per progettare cose che possono apparire molto, molto piccole.

In definitiva, dovresti andare via con un processo per creare elementi di design che vanno ben oltre la produzione di icone semplici.

Prima di continuare, dovremmo dire qualcosa su cosa stiamo provando esattamente achieve utilizzando in primo luogo le icone nei nostri design e ciò che rende un'icona più efficace della successiva. Teoria prima dell'applicazione. Per fare ciò, dobbiamo considerare il ruolo dell'icona come parte della semiologia.

Cosa rende una buona icona?

Semiologia , nel senso più ampio, è lo studio dei sistemi dei segni , come contribuiamo alla loro formazione e manutenzione e l'impatto che hanno sulla nostra comprensione del mondo dentro e fuori di noi.

Ogni volta che consideri una parte del tuo lavoro di progettazione dal punto di vista di cosa significa - cosa sta dicendo al tuo pubblico o quali concetti sta richiamando per loro - stai considerando il tuo design come un semiotico. Sebbene la semiologia, come la linguistica, copra il linguaggio, ci sono molte altre cose su un sito web che "dicono" qualcosa senza parole, come i colori, i caratteri tipografici e le forme che chiamiamo icone . Bisogna stare attenti a ciò che dicono queste cose ha una forte dimensione culturale. In Cina , il colore rosso può significare buona fortuna mentre, in molti paesi occidentali, è usato per indicare il pericolo.

(Basato su un'immagine di ell marrone )

Il termine "icona" ha un significato speciale nel campo della semiologia. Un'icona è un artefatto che significa qualcosa somigliante ad esso. Prendi, per esempio, un'icona pin mappa . Come una forma che assomiglia a un perno di mappa "reale", è in grado di significare. A sua volta, la vera mappa pin porta alla mente tutti i tipi di concetti significativi . Tra questi ci sono concetti astratti come la posizione e concetti meno astratti, come la mappa a cui potrebbe appartenere il perno.

Alcune cosiddette icone non sono veramente iconiche. L'onnipresente icona RSS , con i suoi punti e due segmenti di cerchio concentrici, non assomiglia più alla diffusione di una syndication che alle parole "Really Simple Syndication". La configurazione delle forme che costituiscono l'icona RSS significa RSS per convenzione da sola; abbiamo convenuto che questo è quello per cui sono. Un'icona RSS è più propriamente chiamata un simbolo RSS .

Spero che ora abbiamo stabilito che le icone web di successo devono soddisfare uno o entrambi i seguenti due criteri:

Una forte somiglianza con una cosa reale, ad esempio un'icona di stampa che assomiglia a una stampante reale
Stabilimento e, quindi, familiarità come simbolo riconoscibile all'interno del sistema dei segni

I font Icon guadagnano popolarità

Le icone sono state a lungo considerate un buon modo per migliorare i progetti di interfaccia utente perché forniscono una scorciatoia visiva che aiuta a comprendere un messaggio altrimenti puramente testuale. Fogli di immagini di icone sono diffusi in tutta la community di web design come il contrabbando, ogni set promette di rendere il tuo design più brillante, più allettante e più cliccabile dell'ultimo.

Rispetto alle immagini, l'idea di utilizzare i caratteri incorporati per le icone è un'idea relativamente nuova. Tuttavia, è uno che sta ottenendo una notevole trazione a causa dei numerosi vantaggi inerenti l'immagine (o background-image ) metodo. io ha scritto su alcuni di questi vantaggi sul mio piccolo blog agli inizi di settembre. Chris Coyier ovviamente aveva un'idea simile, introducendo l'idea a un ( molto, molto ) pubblico più vasto settimane dopo. Attingendo ai due post e ad altri, ho compilato questo elenco completo di funzionalità:

Sono facilmente ridimensionabili senza degrado (perché sono essenzialmente vettori)
Ricolorare l'icona è banale come ricolorare il testo. Per esempio, color: orange per un'icona RSS
Molte icone sono raggruppate in un unico file, rendendo necessaria una sola richiesta http
Come sottolinea Chris, sono forme che hanno trasparenti "knockouts" che funzionano nei browser fin da IE6 (a differenza dei PNG alpha)
Per le icone che dovrebbero apparire adiacenti al testo, l'allineamento e il wrapping sono non problematici (perché sono testo)
Puoi applicare effetti CSS3 tramite text-shadow e background-clip:text che rispettano la forma del glifo
A differenza di SVG, il supporto cross-browser è facile da ottenere

I problemi

Nelle parole di Chris, usare i caratteri per le icone è una buona idea, ti sto dicendo . Ciononostante, lo status quo riguardante l'utilizzo dei font iconici non è l'ideale. In primo luogo, la maggior parte dei font di qualità disponibili, chiamati cose simili Pictos , Fico , Klepto, Cheetos, Ponyo e Sailor Moon (Forse ho sbagliato alcuni di questi), sono font a pagamento. In pratica ciò significa che ci sono davvero due problemi :

Potrebbe essere necessario separarsi dal denaro
Che tu debba separarti o meno dai soldi, dovrai accettare il lavoro sporco di qualcun altro

A parte i programmi di crawler automatici, presumo che siano soprattutto i web designer a leggere questo articolo. Anch'io sono un designer e non credo di essere solo nel risentire l'idea di dover compromettere il mio design affidandomi all'opera di qualcun altro. Naturalmente, sono ancora meno innamorato del pensiero di pagare per il privilegio. So quali icone voglio usare e so esattamente come voglio adattarle al mio design generale. Voglio quel controllo .

Dopo qualche ricerca, alla fine sono stato introdotto alle possibilità di Inkscape SVG Font Editor . Con un po 'di pratica con Inkscape e l'aiuto di un convertitore online per trasformare il mio font SVG in un TTF, sono riuscito a creare "Heydings". Questo font è ora incluso in La lista di Simurai (come collegato all'articolo di Coyier). Non sto cercando di venderti il mio font (è comunque gratuito), ma penso che costituisca una buona prova di concetto :

Creazione di icone con gli inkscape

Configurare Inkscape

Iniziamo da scaricamento e installare Inkscape. Dovresti anche usare il mio template di avvio per font di icone, che si trova nella cartella delle risorse di questo repository GitHub (maggiori informazioni su questo progetto GitHub più avanti). Una volta che hai aperto questo file nella tua nuova installazione di Inkscape, devi configurare il tuo spazio di lavoro aprendo le seguenti finestre dal menu principale:

OGGETTO → RIEMPIRE E TEMPI
OGGETTO → ALLINEARE E DISTRIBUIRE
TEXT → SVG FONT EDITOR

Nel riquadro Editor dei font SVG, fai clic su "Font 1" in "Font". Il tuo spazio di lavoro dovrebbe ora assomigliare a questo screenshot:

Vale la pena sottolineare che il linea di base la guida non è al di sotto del limite inferiore della tela per errore: per le ragioni più note a qualcun altro, le icone dovrebbero sporgere leggermente sul fondo della tela se si desidera che condividano la stessa linea di base dei caratteri tipografici adiacenti. Ho provato questo con Georgia, Arial e un certo numero di caratteri web.

Crea il tuo primo glifo

Per definire il glifo, fare clic sulla scheda Glifi nel riquadro Editor dei font SVG , quindi fare clic sul pulsante Aggiungi glifo nella parte inferiore del riquadro. Non è immediatamente chiaro al primo sopralluogo, ma se fai clic sul tuo glifo ("Glyph 1") apparirà un campo che ti permetterà di inserire il personaggio a cui desideri assegnare la tua icona. Prima di tutto dovremo fare una semplice forma a stella, quindi ti consiglio di inserire il carattere "s", "S" o "*":

Ora che abbiamo definito il carattere corrispondente del glifo, abbiamo bisogno di creare il glifo stesso. Dato che stavamo facendo una stella stavolta, dovremmo selezionare lo strumento di stelle e poligoni di Inkscape dalla barra degli strumenti a sinistra e disegnare una stella nella tela. Si noterà che questo strumento è dotato di opzioni che consentono di modificare l'aspetto della stella. Nel mio esempio, ho scelto 5 angoli, un raggio di 0,5 e un valore arrotondato di 0,1.

Centra la stella orizzontalmente usando il pannello Allinea e Distribuisci (che può essere nascosto sotto SVG Font Editor ) e trascina la forma verso il basso per soddisfare la linea di base. Con la griglia spenta, la tela dovrebbe apparire in questo modo:

I glifi nel nostro font iconico sono solo forme; forme senza colori, livelli o sfumature. Quindi, per rendere la nostra stella un candidato legittimo per il nostro carattere, dobbiamo convertirlo da un oggetto in una forma basata sul percorso. Per fare ciò, selezionare la stella e scegliere PERCORSO → OGGETTO PER PERCORSO dal menu principale. Ora, con la stella selezionata, possiamo andare al nostro Editor di font SVG , evidenziare il glifo "s" applicabile e premere il pulsante Ottieni curve dal pulsante di selezione :

Quando inserisci "s" nel campo Testo di esempio , la tua stella dovrebbe ora apparire come un'anteprima, in questo modo:

Creare icone più complesse

Ora hai creato il tuo primo glifo con font SVG scalabile. Utilizzando le opzioni del riquadro Riempi e tratti, modificando i nodi del percorso e combinando oggetti e tratti, sarete in grado di creare design di icone molto più ambiziosi. Non voglio partecipare a un intero tutorial di Inkscape perché abbiamo molto di più da trattare, ma seguire queste semplici regole ti darà una buona dose:

Attenersi all'utilizzo di tratti e riempimenti neri, se non altro per ricordare che le icone sono solo forme, non una grafica vettoriale complessa. La colorazione dell'icona è possibile nel prodotto finale tramite CSS.
Tutti gli oggetti e tratti (linee) devono essere convertiti in tracciati utilizzando PATH → OGGETTO PER PERCORSO o PERCORSO → CORSA PER PERCORSO
Più oggetti e / o tratti usati per creare un glifo di un'icona dovrebbero essere combinati insieme usando PERCORSO → COMBINE (o, in alcune circostanze, PERCORSO → UNIONE)
Per tagliare forme fuori dalle forme (come usare un cookie cutter) posiziona la forma che creerà il "knockout" sulla forma principale, seleziona entrambe e scegli PATH → DIFFERENCE. Le aree bianche su nero che sembrano "a eliminazione diretta" non sono sufficienti, come scoprirai quando premi Ottieni curve dalla selezione Vedi regola 1.

Preparazione del font per l'incorporamento

Immagina di aver creato una serie di icone utili per il tuo carattere ripetendo il metodo di generazione degli glifi che ho appena descritto e salvato il file come myicons.svg . Ora, ti consigliamo di preparare questa libreria di icone da usare nelle pagine web.

Conversione di SVG in TTF

La prima misura che dovresti prendere è convertire il file Carattere SVG in un formato più familiare e versatile. TTF è il formato preminente per l'installazione locale e la distribuzione. Fornisce anche una buona base per la riconversione @font-face requisiti. I servizi online che consentono di convertire i font tra i formati includono http://onlinefontconverter.com/ , http://www.fontconverter.org/ e http://www.font2web.com/ . Il mio preferito, tuttavia, è http://www.freefontconverter.com/ perché non vengo messo in coda e non l'ho mai saputo per restituire alcun problema.

Non ti proteggerò spiegando come utilizzare questa risorsa. Il campo di caricamento file successivo, l'elemento select e il pulsante di conversione gigantesco parlano da soli, davvero.

Modifica delle informazioni sui meta del font

Ora che hai il TTF in mano, ti consiglio di modificare i metadati generati. Rinominare, attribuire e descrivere il carattere in base alle proprie esigenze lo rende pronto per l' installazione, l'incorporamento e la distribuzione . È anche un modo per dimostrare che il carattere è il tuo lavoro. I lettori che eseguono Windows hanno l'opzione di utilizzare il suono ingannevolmente grandioso Microsoft Proprietà Proprietà Editor o i giorni gratuiti per x Typograf . Per gli utenti Apple e Linux, imploro quelli meglio informati di me per dare una mano nei commenti.

L'editore delle proprietà dei caratteri goffo ma funzionale

Nota importante: sebbene Microsoft Font Properties Editor ti permetta di aggiungere autore, descrizione e informazioni sulla licenza, non sembra che ti permetta di modificare i dati di base come il nome del font e il nome postscript . Questi campi sono disabilitati. Se stai utilizzando questo particolare software, devi individuare e modificare i valori proibiti nel codice SVG prima della conversione TTF. Apri l'SVG originale nel tuo editor di testo preferito (io uso Notepad ++ ) e modifica quanto segue:

Nome del carattere: trovato nel tag, font-family attributo

Nome Postscript: trovato nel tag, id attributo

Descrizione: dovresti aggiungere una descrizione (autore, licenza ecc.) Nel tag. Si noti che questo non è equivalente al testo di descrizione TTF e non sarà conservato tramite la conversione; dovrai aggiungere la descrizione TTF separatamente.

Rendere il font incorporebile

Dopo aver installato il TTF sul tuo sistema locale e averlo visualizzato in anteprima per assicurarti che nulla sia andato storto, è ora di eseguirlo tramite Font Squirrel's @ generatore di font-face . Per rendere il codice emesso il più efficiente ed efficace possibile, ci sono alcune opzioni che vale la pena notare nella modalità esperto del generatore:

Subsetting: l'opzione subsetting consente di includere solo i caratteri che hai delegato, riducendo le dimensioni del file.

Rimuovi crenatura: le tue icone appariranno quasi sempre isolate, quindi non è necessario crenare (l'aggiunta di informazioni relative alla vicinanza dei caratteri tra loro). Questo, presumibilmente, ridurrà anche la dimensione del file.

WebOnly ™ : se sei evangelico su persone che usano il tuo font come previsto - e non tornare a creare immagini dai glifi in Photoshonk - puoi selezionare questa opzione. Potrebbe anche adattarsi meglio al tuo piano di licenza. Coprirò le licenze ora.

Distribuire il tuo font

Se sei interessato a rilasciare il tuo font, è buona norma dargli una licenza. Molti siti Web di font non porteranno il tuo font senza uno. Dal momento che abbiamo utilizzato software open source gratuito per creare le icone, è giusto che dovremmo distribuirle come tali.

Ci sono molte opzioni di licenza disponibili e investigarle a volte è fonte di perplessità. Il Licenza pubblica generale GNU è perfettamente accettabile, ma potresti voler considerare il Licenza SIL Open Font . Il vantaggio principale di questa licenza è la fornitura di un nome di carattere riservato : ad altri designer è consentito modificare il font, purché lo chiamino in modo diverso. In pratica, ciò significa che i crimini contro il design delle icone non possono essere commessi "nel tuo nome".

Nel caso di una licenza, dovresti includere una versione in un file di testo, oltre a inserire la nota sul copyright e un link all'URL della licenza completa nel meta del carattere. Visita le rispettive pagine di licenza (linkate sopra) per istruzioni più specifiche.

La fine della scrittura CSS

Perché fermarsi a creare icone generiche usando i font SVG? Grazie alla possibilità di creare icone, è possibile creare forme, elementi di branding e decorazioni più specifici del sito. Piace Sprite CSS , tutti questi elementi visivi possono essere conservati in un unico file, riducendo le chiamate del server a una singola richiesta http . A differenza degli sprite CSS, gli elementi sono sia ridimensionabili che non dipendono dalle coordinate posizionali ( background-position valori) da visualizzare correttamente. Questo li rende molto più adatti al design reattivo .

Facciamo finta di aver scelto di usare un font SVG per coprire vagamente alcuni elementi di base del design steampunk -piace blog . Un semplice rendering della tabella HTML dei progetti di componenti sarebbe simile a questo:

Una delle cose migliori di questo approccio è la versatilità. Ad esempio, la seconda forma di ingranaggio da sinistra potrebbe essere utilizzata sia come un piccolo disegno a punto di proiettile sia come una decorazione di sfondo gigante e astratta. Colorare è facile come usare color:maroon , ma non c'è bisogno di aderire ai colori piatti; una moltitudine di effetti CSS3 può essere utilizzata per aggiungere consistenza e tattilità. Per una piccola ispirazione per iniziare, esamina questa eccellente galleria di webfonts con funzionalità CSS3 .

Una breve nota sugli screen reader

Un problema con l'utilizzo di caratteri per visualizzare elementi visivi in questo modo è l'impatto screen reader produzione. Un visitatore del sito che legge visivamente vedrà ingranaggi, frecce e simili, ma uno screen reader continuerà a leggere i caratteri che designano questi disegni. Per gli usi degli elementi di font SVG che sono decorativi, consiglio di seguire il suggerimento di Coyier: Assegnare i vettori al Area di uso privato supplementare di Unicode. Tali personaggi non dovrebbero essere letti dai lettori.

Un'icona collaborativa webfont

Come mio mentore di JavaScript, Rupert , mi ha fatto notare l'altro giorno, usare i font SVG per creare set di icone offre un'opportunità interessante per la collaborazione. Vedete, il codice SVG - che è una forma di XML - è altamente standardizzato e facilmente leggibile. È esattamente il tipo di codice sorgente adatto allo sviluppo che utilizza un servizio di "social coding" come GitHub .

L'idea riecheggiava con me per le sue implicazioni semiotiche: se la comprensibilità di un'icona è determinata dal consenso , allora sicuramente anche il consenso dovrebbe avere un ruolo nella sua formazione. Collaborando sulla nostra icona "sistema di segni", dovrebbero emergere solo i disegni di icone più archetipici. Dovremmo essere in grado di creare vocabolari iconici che appartengono veramente alle comunità per cui dovrebbero significare qualcosa.

Ho creato un repository GitHub pubblico per aiutare a promuovere questa idea. Chiamato Font icona della comunità , la base di codice del repository non è complessa: un'attenta analisi del precedente tutorial di Inkscape e una lettura rapida del file pagina del progetto dovrebbe darti tutto il necessario per essere coinvolto. Se sei nuovo a GitHub, prova a guardare i loro pagine di aiuto o chiedendo al tuo tecnico di quartiere (è quello che faccio).

tipografia web design icone font disegno dell'icona webfonts inkscape

Come creare la tua icona Webfont