Share
Stufo di Arial? Stanco di Times New Roman? I metodi di sostituzione dei font sono migliorati notevolmente negli ultimi 2 anni, ma può essere spesso difficile risolvere i diversi metodi se non si legge costantemente su di esso. Questo articolo discuterà varie tecniche di sostituzione dei font che sono disponibili in questo momento.
Tutorial ripubblicatoOgni poche settimane, rivisitiamo alcuni dei post preferiti del nostro lettore da tutta la cronologia del sito. Questo tutorial è stato pubblicato per la prima volta nel novembre del 2010.
Analizzeremo i pro e i contro di ciascuno, il problema delle licenze dei font e le migliori risorse di font sul Web in modo da poter iniziare a utilizzarli nei propri progetti Web.
"Fin dall'inizio del web, i designer sono stati limitati a un numero limitato di caratteri"
Le possibilità di design sul web sembrano aumentare di giorno in giorno. L'applicazione di tecnologie come HTML5, CSS3 e Javascript ha portato a molti progetti di siti Web interessanti e innovativi. Il Web sembra aver fatto molta strada dai tempi del browser di solo testo. Nonostante questo, c'è un aspetto del web design che è rimasto relativamente stagnante.
La tipografia e la selezione dei font sono elementi integranti di qualsiasi arsenale di designer per creare l'aspetto e il 'feel' di un sito web. Sfortunatamente dall'inizio del web, i designer sono stati limitati a un numero limitato di caratteri. Helvetica, Arial e Georgia sono tre dei pochissimi caratteri accattivanti (per non dimenticare Comic Sans) a cui i progettisti possono affidarsi in modo sicuro per essere visualizzati correttamente per la maggior parte degli utenti Web.
Il metodo tradizionale per i progettisti di aggirare tali limitazioni ed esprimere la creatività con i caratteri è quello di incorporare il testo all'interno delle immagini - tuttavia ci sono numerosi svantaggi di questo metodo. Numerosi problemi di accessibilità si presentano e le prestazioni del sito Web vengono influenzate negativamente con tempi di caricamento maggiori.
Questo articolo discuterà diversi metodi interessanti per incorporare caratteri non standard nelle tue pagine web senza usare immagini. Vedremo i vantaggi e gli svantaggi di ogni metodo, i problemi relativi all'uso dei caratteri e ciò che questa tecnologia significa davvero per i web designer.
Cuf? N è un metodo incredibilmente semplice ed efficace per incorporare caratteri non standard in una pagina web e uno in cui la sua funzionalità non dipende da lingue o plug-in lato server. Cuf? N opera esclusivamente su poche righe di codice Javascript e utilizza la combinazione di VML (Vector Mark-up Language), per Internet Explorer e la funzionalità Canvas di HTML5 per il rendering dei caratteri.
Cuf? N fornisce uno strumento di conversione dei caratteri sulla loro homepage che ti permetterà di convertire il tuo font scelto in SVG e crea un file Javascript per farti riferimento nel tuo HTML. Nettuts + editor Jeffrey Way ha già scritto un eccellente tutorial passo-passo su come integrare Cuf? N nella tua pagina web.
Cuf? N è una scelta popolare per molti web designer per i suoi numerosi vantaggi e relativamente pochi negativi. La sua non dipendenza da altri linguaggi di scripting o plug-in significa che è accessibile a un pubblico molto ampio ed è supportata anche dalle versioni recenti di tutti i principali browser tra cui IE 9. Puoi anche applicare direttamente lo stile CSS a Cuf? N sostituito testo, comprese le nuove funzionalità di CSS 3 come i gradienti. In termini di velocità, è molto più veloce di SIFR e meno intensivo, ma non deve ancora essere utilizzato per grandi quantità di testo.
Ci sono alcuni aspetti negativi per Cuf? N tuttavia. Si basa ancora su Javascript per funzionare, che alcuni utenti web potrebbero aver spento. Deludentemente Cuf? N testo sostituito non è nemmeno in grado di essere selezionato e quindi copiato e incollato.
Professionisti:
Contro:
"@ font-face è essenzialmente la soluzione definitiva per i caratteri sul web."
@ font-face ha probabilmente ricevuto la maggiore attenzione da parte dei metodi di sostituzione dei font, ma c'è una buona ragione per questo. @ font-face è essenzialmente la soluzione definitiva per i caratteri sul web e uno in cui tutti gli altri speravano di replicare prima che fosse pienamente realizzato. @ font-face è stato effettivamente incluso nelle specifiche CSS2 ma finora è stato adottato per un'adozione diffusa.
@ font-face non usa la tecnologia web diversa dai CSS per implementare caratteri personalizzati su una pagina web - questo significa che non c'è più dipendenza da Flash, PHP o JavaScript. Il tipo effettivo viene visualizzato quando si utilizza @ font-face, anziché oggetto vettoriale o immagini e pertanto il testo può essere selezionato, ridimensionato e ridimensionato mediante CSS.
Sfortunatamente, come nel caso di molti altri problemi relativi al Web, sono principalmente i browser (insieme ai problemi di licenza di cui parleremo in seguito) a ostacolare il progresso di @ font-face. Ciascuno dei browser dominanti supporta diversi formati di font. Internet Explorer utilizza .EOT (Embedded Open Type) mentre le versioni recenti di Firefox, Chrome, Safari e Opera supportano tutti .ttf (True Type Format). Open Type Format è anche supportato da una combinazione di browser e SVG (Scalable Vector Graphics) è necessario per iPhone e iPad. Può essere tutto abbastanza confuso ea volte può spingere molte persone a provare a usarlo. Per fortuna però, c'è una luce all'orizzonte. Web Open Font Format, o .WOFF, è impostato per diventare il formato standard per i caratteri Web e attualmente viene standardizzato dal W3C. Firefox ha supportato il formato dalla versione 3.6, Chrome dalla 5.0 e recentemente è stato annunciato che Internet Explorer 9 supporta anche il formato. Speriamo che Opera e Safari si uniscano presto alla festa.
L'unico altro problema minore con @ font-face è che poiché viene presentato come tipo effettivo, i singoli browser e sistemi operativi lo renderanno in modo leggermente diverso. Alcuni servizi di carattere web, di cui discuteremo ulteriormente, mirano a correggere queste lievi varianze usando il suggerimento sui font che attenua il contorno del tipo nei browser creando un tipo esteticamente più gradevole.
Se desideri maggiori informazioni su come implementare @ font-face sul tuo sito web, Jeffrey Way ha ancora una volta fornito un utile tutorial su come farlo.
Professionisti:
Contro:
La prossima manciata di soluzioni si basa su @ font-face per consegnare le merci - ognuno di questi è un "servizio" più o meno - che significa: tutti usano la stessa tecnologia di base, ma offrono diverse librerie di caratteri, opzioni di licenza e piani di pagamento; Sì, la maggior parte di questi richiede di pagare per usarli, ma è probabile che questa è la via del futuro per tutti i tipi di carattere sul web.
Font Squirrel è forse la risorsa di sostituzione dei font più popolare al momento. Font Squirrel allevia qualsiasi preoccupazione relativa alle licenze dei font, poiché tutti i font forniti sono liberamente disponibili per scopi commerciali. Il sito ha centinaia di font tra cui scegliere, dai font sans-serif ai caratteri stile novità.
Come discusso sopra, al fine di garantire che @ font-face funzioni su tutti i browser, sono necessari diversi formati del font e per questo Font Squirrel ha una soluzione. Il sito offre kit @ font-face che forniscono tutti i formati necessari e includono anche l'HTML e i CSS necessari. Se non riesci a trovare il kit @ font-face per il font che desideri utilizzare, fornisce anche un generatore che convertirà il tuo file di font nei vari formati di cui avrai bisogno gratuitamente. Quando si utilizza il generatore, è necessario assicurarsi di disporre della licenza corretta che consente di utilizzare il carattere sul proprio sito Web.
Professionisti:
Contro:
L'API Font di Google viene utilizzata insieme alla propria directory di font in cui tutti i font sono open source e disponibili per tutti. La directory è in espansione e in continua crescita, attualmente ospita più di 200 esempi.
In realtà non potrebbe essere più semplice incorporare i caratteri dalla directory nel tuo sito web. Devi semplicemente selezionare il carattere che desideri utilizzare, selezionare le varianti del carattere che desideri e Google ti fornirà la riga del codice Javascript che ti serve. Regola il tuo CSS per elencare il font utilizzato e sei pronto per andare. E 'davvero così semplice!
Professionisti:
Contro:
Typekit è stato uno dei primi servizi di font web in abbonamento e rimane ancora molto popolare. Typekit e altri servizi simili affrontano il problema delle licenze dei caratteri offrendo agli utenti l'accesso a una vasta gamma di font personalizzati in cambio di una quota annuale di abbonamento. Questo metodo consente alle fonderie di font di ricevere qualcosa in cambio del loro duro lavoro e garantisce anche contro la pirateria dei font poiché tutti i font sono ospitati centralmente sui server protetti di Typekit. Gli utenti del servizio non stanno ospitando i caratteri sul proprio spazio web ma semplicemente si collegano a loro.
Typekit ha collaborato con alcune delle più grandi fonderie di font al mondo per offrire un'ampia e variegata gamma di caratteri da utilizzare. Typekit ti offre molte opzioni e controllo sui caratteri che usi. Seleziona varie varianti di carattere, pesi e glifi da usare. Puoi anche creare stack CSS e selezionare i font di fallback da usare quando @ font-face non è supportato. Sarà inoltre necessario selezionare i tag HTML specifici o le classi CSS per applicare il carattere personalizzato a. Una volta che sei soddisfatto delle selezioni che hai fatto, viene generato un codice Javascript che puoi utilizzare sul tuo sito.
Un altro vantaggio di Typekit è che mira a controllare le differenze nel modo in cui i diversi browser gestiscono il testo e i caratteri usando l'hint.
Typekit offre vari pacchetti di prezzi per soddisfare le diverse esigenze. È disponibile un pacchetto gratuito che ti fornisce due font da utilizzare dalla loro libreria di prova su un sito web. Il sito Web può contenere fino a 25.000 visualizzazioni di pagina al mese e inoltre è necessario visualizzare il badge Typekit sul sito, che rimanda a informazioni sui tipi di carattere che si stanno utilizzando. All'altra estremità della scala c'è il pacchetto Performance che ti dà accesso a tutta la gamma di caratteri disponibili per l'utilizzo su una quantità illimitata di siti web senza limiti sulla quantità di visualizzazioni di pagina. La performance offre tutte queste funzionalità per un canone di abbonamento annuale di € 99,99.
Professionisti:
Contro:
La famosa fonte di font fonts.com ha anche lanciato un servizio di font web specializzato, che vanta oltre 8000 font da utilizzare nei tuoi siti web. Analogamente a Typekit, si tratta di un servizio basato su abbonamento, tranne per il fatto che il prezzo è mensile. In confronto con Typekit, funziona più costoso ma ci sono molte meno restrizioni sui caratteri. Il pacchetto gratuito confronta molto favorevolmente, dando accesso illimitato a 8000 caratteri per l'utilizzo su tutti i siti Web che desideri. Il pacchetto Professional ti consente inoltre di scaricare e installare fino a 50 font per l'uso sul tuo computer.
Fonts.com Web Fonts vanta alcuni tipi di caratteri veramente fantastici come parte della sua collezione - come Helvetica, Univers e Franklin Gothic.
Professionisti:
Contro:
La rinomata società di web design Clear Left, che ha lavorato per alcune delle più grandi aziende del mondo, ha collaborato con OmniTI e ha rilasciato Font Deck. Font Deck è un altro servizio basato su abbonamento, tranne che si paga solo una quota annuale per ogni singolo font che si utilizza, perfetto per coloro che vogliono utilizzare solo uno o due font per il proprio blog personale.
I prezzi dei caratteri partono da $ 2,50 all'anno per dominio e sono consentiti visualizzazioni di pagina illimitate. L'intera selezione di font è disponibile anche per provare gratuitamente per un certo periodo di tempo, anche se solo venti unici indirizzi IP saranno in grado di vederlo. Questo pacchetto gratuito mira a compensare il fatto che non è possibile scaricare i font sul computer locale e utilizzarli durante la fase di progettazione. Dato che Font Deck è relativamente nuovo per la scena, la selezione dei font tra cui scegliere non è attualmente molto grande.
Professionisti:
Contro:
Font Spring ha un approccio leggermente diverso rispetto ai servizi basati su abbonamento e ritorna al modo tradizionale di acquistare i font. I font vengono acquistati singolarmente e richiedono di scaricarli e ospitare i font sul proprio server web. Font Spring suggerisce che il 99,9% dei caratteri disponibili può essere usato con @ font-face.
Ogni singolo carattere può variare nel prezzo e ti viene richiesto di pagare un costo aggiuntivo per la licenza per utilizzare il carattere con @ font-face. La licenza @ font-face include la versione desktop OpenType del font e i vari formati necessari per utilizzarlo sul web.
Ci sono molti vantaggi nell'usare questo metodo. Se hai davvero il cuore impostato su un solo tipo di carattere, potrebbe essere l'alternativa più economica ai servizi di abbonamento. Puoi usare il font su tutti i domini che vuoi, purché tu abbia il controllo diretto su di essi e non ci sia un limite alla quantità di pagine viste.
Come ulteriore avvertimento, ti è vietato convertire o incorporare il font con altre tecnologie come sIFR o Cuf? N.
Professionisti:
Contro:
Questi sono solo alcuni dei servizi di carattere disponibili, ce ne sono molti altri come Typotheque e Webtype. Ognuno ha i propri lati positivi e negativi e la scelta deve essere basata sulle proprie esigenze personali. Alcuni potrebbero godere della facilità di utilizzo di un servizio di abbonamento, mentre altri potrebbero non gradire il pensiero di rinunciare al controllo del proprio sito a terzi. Se quest'ultimo è il caso, potrebbe essere meglio scaricare e ospitare i propri caratteri web con l'aiuto di siti Web come Font Squirrel.
I prossimi due (sIFR e FLIR) sono generalmente come "vecchia scuola" perché hanno una buona dose di problemi, ma vale la pena discutere e conoscere.
sIFR è in circolazione da un po 'di tempo. Quando è uscito per la prima volta, ha fornito un metodo efficace per incorporare caratteri non standard quando non c'era davvero altra opzione rispetto alle immagini. La sostituzione flash sIFR o scalabile Inman utilizza una combinazione di Flash e Javascript per modificare il testo sulle pagine Web in un elemento Flash. sIFR ha molti vantaggi, come il testo rimane accessibile agli screen reader e può ancora essere selezionato.
Il termine 'scalabile' nel nome, tuttavia, ha il potenziale per causare confusione. sIFR è scalabile, nel senso che l'elemento Flash si adatta alle dimensioni del testo del browser originale - questo gli consente di visualizzare tutto il testo alla massima dimensione possibile all'interno di una data dimensione. Tuttavia, qualsiasi testo che è stato sostituito con un elemento flash non è in grado di adattarsi quando un utente ridimensiona il testo su una pagina; che ovviamente causa un problema di accessibilità. sIFR richiede inoltre che sia Flash sia Javascript siano abilitati sul computer di un utente per funzionare.
Uno dei creatori di sIFR, Mike Davidson riconosce anche i limiti della tecnologia. Mike ha dichiarato apertamente che il sIFR non dovrebbe essere utilizzato per grandi quantità di testo in quanto ha un effetto notevole sulle prestazioni del sito web. Mike riconosce anche che la sua tecnologia non è la soluzione definitiva per la tipografia sul web e si riferisce semplicemente a un "fermo immagine".
Professionisti:
Contro:
La sostituzione delle immagini FLIR o Facelift è simile a SIFR, tranne per il fatto che utilizza Javascript e PHP per generare immagini anziché Flash al fine di sostituire il testo. Questo metodo ha l'ovvio vantaggio che non devi perdere tempo a creare singole immagini per ogni pezzo di testo per cui vuoi usare un carattere personalizzato. Se decidi di utilizzare un font o un colore diverso per il tuo testo, è anche molto più semplice aggiornare il testo sul tuo sito web.
Sfortunatamente, oltre alla facilità d'uso e all'aspetto di risparmio di tempo di FLIR, non offre molti miglioramenti rispetto al metodo tradizionale di salvare il testo come immagini. Il risultato finale rimane ancora come testo reso come un'immagine in cui il testo non è selezionabile o scalabile.
Professionisti:
Contro:
Il problema con le licenze dei font è in corso e ha contribuito al lento progresso e all'adozione dei metodi di sostituzione dei font. Proprio come per le immagini, è necessario il permesso dell'autore, sotto forma di EULA (Contratto di licenza con l'utente finale), per utilizzare un carattere sul tuo sito web. Alcune licenze consentono l'uso gratuito del font, anche per scopi commerciali, mentre altri possono solo consentire l'uso personale su una macchina locale.
Quando si utilizza uno dei metodi di sostituzione dei font discussi sopra, si incorpora effettivamente un font nel proprio sito Web o si collega a uno che è stato caricato sul server Web e questo non è consentito da molte, anche licenze di font gratuite. Il motivo per cui molti creatori di font e fonderie non consentono questo è perché consente agli utenti del sito l'accesso diretto al file di font e si preoccupano che il loro font possa essere scaricato e distribuito illegalmente. Questo problema ha impedito a molti creatori di font di rendere i loro font disponibili per l'uso con metodi come @ font-face.
È quindi di fondamentale importanza che quando si utilizza uno dei metodi sopra discussi si sia assolutamente certi che la licenza del font lo consenta.
Per fortuna, questo problema non ha impedito lo sviluppo di metodi di sostituzione dei font completamente e ci sono molte risorse disponibili per permetterti di usare caratteri personalizzati sul tuo sito web.
"La perfezione non vale la pena aspettare, se lo fai, rischi di perdere nuove eccitanti opportunità"
Abbiamo discusso molto sopra, ed è chiaro che ci sono molte opzioni disponibili per coloro che vogliono usare caratteri personalizzati nei loro progetti di siti. La buona notizia è che tutti questi metodi sono disponibili per il momento. È vero; nessuno dei metodi è perfetto, ognuno ha i propri punti positivi e punti negativi. @ font-face è ovviamente la più promettente, ma probabilmente ci vorranno ancora alcuni anni prima che sia assolutamente a prova di proiettile. La verità è che, sebbene la situazione sia raramente perfetta nel mondo del web design, ci saranno sempre dei compromessi e dei work-around necessari per implementare nuove tecnologie. La perfezione non vale la pena aspettare, se lo fai, rischi di perdere nuove eccitanti opportunità.
Questo è davvero un momento entusiasmante per il web design e sembra esserci un crescente apprezzamento e comprensione della tipografia sul web. I metodi di sostituzione dei caratteri offrono una grande opportunità per creare nuovi design innovativi e credo che la chiave non sia l'abuso di questa tecnologia. Fornisci sempre suggerimenti per quando le cose vanno male e usa ogni metodo in modo ragionevole (non cambiare tutto il testo del tuo sito con questo). Prenditi il tempo per apprezzare e conoscere il tipo migliore e il Web sarà un posto migliore per questo.
Hai i tuoi pensieri su questo? Hai una domanda? Se perdiamo qualcuno dei tuoi metodi preferiti, pubblicali qui sotto nella sezione dei commenti e saremo sicuri di includerlo in questo post!
Accentsconagua