Share
In questo articolo daremo un'occhiata ad alcuni dei più popolari servizi di font web, confrontando le caratteristiche tra loro e parlando di alcune delle bandiere rosse coinvolte con il lavoro con i caratteri reali sul web.
Siamo un gruppo fortunato, noi web designer del presente. I web designer di una volta hanno lottato a lungo con una selezione frustrante di caratteri: i font di sistema sicuri per il web che sono stati provati e testati per l'utilizzo dello schermo. Conosci i loro nomi. Georgia, Times New Roman, Arial, Verdana - quasi tutti mandano un brivido alle nostre spine.
Ma non più. Il font web è qui! CSS3 ha portato veri e propri caratteri web alla nostra utility belt, con la potenza di @ font-face. Ma con questa nuova tecnologia arriva una schiacciante responsabilità - il mal di testa che è il tipo di carattere di licenza per l'uso sul web. Sempre più fonderie stanno fornendo font con licenza per l'uso online, ma poi ospitano i font da soli e garantendo la compatibilità tra dispositivi e browser può essere un altro mondo di dolore da solo.
È qui che entrano in gioco i servizi di carattere web. Gestiscono la maggior parte delle licenze e il lavoro di hosting, lasciandoti fare ciò che sai fare meglio: creare siti Web stupendi e belli.
Parlerò di tre dei più popolari servizi di font web qui. Vale a dire, Typekit
Fontdeck
e Google Web Fonts.
Tutti questi servizi ospitano i tuoi font sui propri server e gestiscono tutte le assurdità delle licenze che li accompagnano - così puoi semplicemente plug-and-play senza preoccupazioni.
Questi servizi non utilizzano tutti la stessa tecnica per incorporare i caratteri. Fontdeck e Google Web Fonts ti consentono entrambi di utilizzare un tag per acquisire direttamente i caratteri per poterli utilizzare sul tuo sito, mentre Typekit ha un approccio diverso. Typekit richiede di includere uno snippet di JavaScript nel tuo sito che raccoglie le risorse necessarie per te al momento dell'esecuzione.
L'utilizzo di un tag ha un paio di ovvi benefici. Per prima cosa, questo metodo non richiede che l'utente abbia JavaScript abilitato. Inoltre, lo script generato dal codice di Typekit produrrà almeno 2 richieste http aggiuntive: una per un altro script e una seconda per il file CSS afferrato da tale script. Questo è qualcosa che Fontdeck e Google non devono subire.
Tuttavia, Typekit ha un vantaggio significativo usando uno script piuttosto che un semplice vecchio CSS: il WF- * classi.
Accentsconagua
WF- * classiQuando il tuo sito richiede i font dai server di Typekit tramite il loro codice JavaScript, succede qualcosa di meraviglioso - lo script aggiungerà le classi all'elemento html del tuo sito, a seconda dello stato della richiesta di caratteri.
Le classi sono wf-loading, wf-attivo, e wf-inattiva. Cosa significa questo per noi? Bene, queste classi possono aiutarci a prevenire FOUT - il flash di testo non animato che appare mentre i nostri font web si stanno caricando. Disegnando le nostre pagine in modo appropriato quando i caratteri vengono caricati, possiamo evitare l'effetto di storto che FOUT può avere per il nostro utente. Controlla questa pagina per un esempio: mentre i caratteri si stanno caricando, una classe di caricamento wf viene applicata al tag html.
Usando i CSS, possiamo nascondere tutti i contenuti e visualizzare un'animazione di caricamento per rendere chiaro all'utente che qualcosa sta accadendo. Una volta che i caratteri hanno terminato il caricamento, possiamo gradualmente ridimensionare i nostri contenuti. Google Web Fonts ti consente anche di utilizzare uno script se desideri il vantaggio di queste classi. In effetti, la sceneggiatura di queste classi era uno sforzo collaborativo tra Google e Typekit.
Ognuno di questi servizi adotta un diverso modello di prezzo. Google Web Fonts è completamente gratuito. Puoi persino scaricare i font per uso locale sui tuoi computer, il che è fantastico se stai cercando di creare un marchio coerente con la tipografia.
Typekit ha diversi livelli di prezzo, che vanno da un piano gratuito a $ 99 all'anno. Il piano gratuito ha un numero limitato di caratteri, consentito su un solo sito Web e richiede la visualizzazione di un badge Typekit sul tuo sito web. Tutti i piani a pagamento ti consentono di rimuovere questo badge e ti consentono di utilizzare la creazione di più siti Web e di utilizzare più font più paghi. Per ulteriori informazioni sui loro piani tariffari, controlla il loro sito web.
Fontdeck adotta un metodo di determinazione dei prezzi diverso. Si caricano su una base per carattere, con caratteri (al momento della scrittura) che vanno dal prezzo di $ 2,50 all'anno in su, ma in genere costano circa $ 7,50 l'anno.
Una delle principali preoccupazioni quando si utilizzano i caratteri Web è il modo in cui vengono visualizzati attraverso la vasta gamma di dispositivi, browser e piattaforme. Sfortunatamente, non c'è modo di garantire che i nostri siti web sembrino esattamente gli stessi su un dispositivo come su un altro: sappiamo che va bene comunque. Tuttavia, potremmo fare un po 'di rassicurazione sul modo in cui i tipi di carattere verranno visualizzati.
Fortunatamente, i nostri servizi di font Web sanno che questo è un grosso problema. Tutti forniscono screenshot di come il font viene visualizzato in tutti i browser più diffusi, inclusi IE6 e versioni successive, Google Chrome, Safari, Firefox e Opera. In generale, i caratteri Web vengono visualizzati correttamente in tutti i casi. Alcuni volti più chiari potrebbero apparire frastagliati in Windows, ma questo è dovuto solo al motore di rendering dei font di Windows - non c'è molto che possiamo fare lì.
Una cosa da tenere presente quando si utilizzano i caratteri Web nei propri siti è la proprietà di rendering del testo CSS. Questa proprietà consente di utilizzare funzionalità OpenType come legature e crenature, ma a un costo elevato. Nei browser WebKit su distribuzioni Linux e in Chrome su Windows con alcuni tipi di carattere, l'uso di questa proprietà può provocare strani effetti collaterali quando si ha a che fare con elementi di testo in linea.
Tenendo presente questo, è probabilmente una buona idea evitare questa proprietà (attualmente sperimentale). Inoltre, il lato positivo, Firefox non implementa correttamente la proprietà, ma ha anche le legature e la crenatura abilitate per impostazione predefinita.
Quindi, conosciamo i diversi servizi e le differenze tra il loro funzionamento e alcune delle bandiere rosse coinvolte nell'utilizzo di caratteri Web sui nostri siti, ma come iniziamo a utilizzarli?
Uno strumento particolarmente utile per sporcarsi le mani con i caratteri Web è Typecast.
Typecast fornisce un modo per testare tutti i tipi di carattere Web disponibili da tutti questi servizi in un ambiente web reale, dove puoi anche aggiungere CSS personalizzati, definire le larghezze per gli elementi - l'intero kit e il caboodle. Il codice CSS che Typecast produce per il tuo sito è meno desiderabile: dimensioni dei caratteri, altezza delle righe e margini impostati in pixel, non em. Ma è ancora uno strumento incredibilmente utile per vedere come questi caratteri appariranno sul Web reale.
Se ti senti privo di ispirazione per come usare i caratteri web, il blog Typekit è sempre pieno di siti di ispirazione, oltre ad alcuni affascinanti approfondimenti sulla tecnologia alla base dei caratteri web. Ci sono anche siti web come Lost World's Fairs, Just My Type (dal tuo vero) e Good Web Fonts dove puoi vedere il vero potere e la bellezza dei veri caratteri sul web. Il sito Web di Elliot Jay Stocks è sempre un sito web davvero stimolante che mette in mostra anche i caratteri web. (Potresti essere in grado di dire - Adoro questa roba.)
Quando si tratta di utilizzare effettivamente i servizi, non potrebbero essere più semplici. Google Web Fonts è solo plug and play: trova un font che ti piace, fai clic su "quick-use", quindi seleziona i caratteri e le variazioni richiesti. Riceverai un link che puoi utilizzare nel tuo sito web o nel tuo file CSS tramite @import o uno snippet di javascript che puoi utilizzare per sfruttare le classi "wf- *".
Fontdeck ti permette di testare il font su alcuni computer prima di acquistarlo per un uso diffuso sul tuo sito web. Basta selezionare il carattere che ti piace e ti daranno un link che puoi usare nei siti web. Provalo su alcuni computer aggiungendo i loro indirizzi IP al sito su Fontdeck, quindi, una volta che sei soddisfatto, basta acquistare il font per un uso illimitato.
Typekit ha un piano gratuito che ti permette di usare una libreria di font abbastanza ampia gratuitamente, a condizione che tu mostri un badge sul tuo sito che pubblicizzi il fatto che stai usando Typekit. In realtà non è un piccolo distintivo dall'aspetto negativo, ma se vuoi che sparisca, dovrai pagare un piano.
Il piano del portfolio è incredibilmente ampio, con poche limitazioni, ed è valutato a un ragionevole $ 49,99 all'anno, o se si dispone di Adobe Creative Cloud, si ottiene il piano del portafoglio incluso. Per utilizzare Typekit sul tuo sito, devi semplicemente creare un "kit", una raccolta di caratteri da utilizzare sui domini che hai specificato. Copia lo snippet di javascript nei tuoi siti web, aggiungi alcuni caratteri al kit, seleziona i pesi e le variazioni che desideri, quindi ricorda di premere "Pubblica kit". A volte i server di Typekit possono impiegare un po 'di tempo per riflettere le modifiche, quindi dedica alcuni minuti prima di aggiornare il tuo sito.
Da luglio 2012 Typekit ha offerto un miglioramento dell'inclusione di JavaScript.
Questo nuovo metodo di incorporamento aumenta le prestazioni, offre URL relativi al protocollo e caricamento asincrono (ufficiale) opzionale. Il caricamento asincrono consente di trascinare i caratteri in una pagina, senza bloccare la coda per altre risorse in caso di problemi.
Con un po 'di fortuna, ora sei dotato di sufficienti informazioni sui servizi di carattere web per immergerti e decidere. Quale di questi sistemi e caratteristiche preferisci? Hai esperienza con qualcuno dei servizi? Consigli e indicazioni che vorresti condividere? Fateci sapere nei commenti!
