Il web design è diventato grande il giorno in cui i webfonts sono entrati nell'uso diffuso. Prima di quel momento è discutibile che eravamo meno designer che ingegneri.
Tuttavia, l'entusiasmo con cui abbiamo afferrato le opzioni dei font nel web design ha portato a una serie sconcertante di scelte; tanto che molti progettisti optano per il percorso di minor resistenza, permettendo al desiderio di una semplice implementazione di dettare la propria tipografia.
Se sai cosa stai cercando, tutte le opzioni sono semplici. In questo articolo ti forniremo le conoscenze necessarie per prendere decisioni informate nella scelta tra la tecnologia dei caratteri.
Illustreremo queste opzioni concentrandoci sul modo migliore per offrire un classico di tutti i tempi, Garamond.
Dopo aver esaltato le virtù dei webfonts, la prima opzione che considereremo non usa affatto i webfonts. L'impilamento dei caratteri è una tecnica CSS in cui si specifica un numero di fallback che inizia con la prima scelta e termina con una soluzione catch-all.
Ci sono molte risorse per l'impilamento dei font online, ma uno dei miei preferiti è cssfontstack.com, è un ottimo punto di partenza per uno stack di font, ma tieni presente che molto spesso dovrai portare un po 'di esperienza.
Secondo cssfontstack.com Garamond è disponibile come font di sistema sul 49.91% dei Mac e 86.47% sulle macchine Windows. È abbastanza buono, ma non abbastanza buono. Ecco lo stack di font suggerito che copre tutte le basi:
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;La domanda è: come possiamo migliorare questo?
Bene, sappiamo che ci sono numerose versioni di Garamond disponibili, quindi possiamo aggiungere una variazione nel secondo slot come compromesso minore.
In secondo luogo, non sono d'accordo sul fatto che Baskerville o Times siano sostituti adeguati di Garamond, quindi lasciamoli cadere. Hoefler Text funziona bene al posto di Garamond, in modo che possa rimanere. Abbiamo bisogno di aggiungere serif come finale catch-all, ma dato che la maggior parte dei sistemi usa Times come loro servizio di default, inseriamo la Georgia di gran lunga superiore per chiunque stia scivolando nelle fessure.
Il nostro stack di font modificato in ultima analisi assomiglia a questo:
font-family: Garamond, "Adobe Garamond Pro", "Hoefler Text", Georgia, serif;La maggior parte degli spettatori vedrà Garamond, alcuni altri vedranno un ragionevole compromesso e una piccola minoranza otterrà il proprio font serif di default.
L'impilamento dei caratteri è gratuito, di gran lunga la soluzione più veloce e, a seconda del carattere tipografico scelto, può essere molto efficace; nel caso di Garamond c'è un buon argomento per chiamare questo "lavoro fatto".
C'è tuttavia un grosso problema con lo stacking dei font, specialmente con un tipo di carattere come Garamond: ci sono così tante versioni pirata in circolazione che è impossibile sapere quale font si chiami "Garamond" sul sistema dell'utente, non solo non possiamo essere sicuri il design è coerente con le nostre aspettative, la scala del carattere può essere radicalmente diversa dalla versione nel nostro design. (Tecnicamente, non c'è nulla che impedisca che una copia di Arial venga rinominata "Garamond", nel qual caso il nostro stack di font lo userebbe).
L'impilamento dei font è quindi un eccellente back-up, e dovrebbe essere considerato per l'uso in combinazione con tutte le soluzioni sottostanti, ma non è ideale come soluzione primaria.
Google Fonts è, per molti designer, il punto in cui terminano la loro ricerca. Per un totale complessivo di $ 0 puoi caricare facilmente i webfonts nel tuo sito usando i CSS.
L'unico svantaggio è che il numero di caratteri tipografici offerti è estremamente limitato. I caratteri tipografici come Roboto e PT Sans devono la loro popolarità tanto alla loro disponibilità gratuita su Google Fonts, quanto alle loro qualità di progettazione.
Attualmente, l'unica variante di Garamond disponibile su Google Fonts è EB Garamond, un tentativo di aprire la fonte del carattere Garamond. Ma il difetto con questa versione è che c'è solo un peso e uno stile disponibili; non c'è grassetto o corsivo. Il designer Georg Duffner ha generosamente messo a disposizione i suoi lavori in corso bitbucket ma non è pronto per la produzione.
Google Fonts è una soluzione di grande budget e ideale per le situazioni in cui potresti essere a favore del conto anziché del tuo cliente. Essere in grado di specificare i tuoi caratteri in CSS è il più semplice possibile.
Il grande difetto di Google Fonts è che, nonostante il marketing, c'è ben poca scelta. Se stai cercando un webfont di Open Sans, allora sei nel posto giusto, ma se vuoi un font come Garamond, che è difficilmente oscuro, è un problema.
L'auto hosting è un approccio enormemente sottovalutato ai webfonts. La sua principale attrattiva è la possibilità di suddividere i caratteri, un'opzione così attraente che quasi tutti i servizi di streaming tentano di emularli.
Se hai una copia desktop di Garamond sul tuo sistema, aprila e vedrai un numero sconcertante di personaggi. La modifica di un font è il processo di eliminazione di caratteri non essenziali, con conseguente riduzione delle dimensioni del file e consegna più veloce.
Naturalmente, i personaggi richiesti dipenderanno dal sito che stai costruendo: se stai costruendo una guida turistica a Dubrovnik avrai probabilmente bisogno di caratteri cirillici serbi; se stai riproducendo le opere raccolte di Shakespeare è improbabile che tu abbia bisogno di un simbolo @.
Per creare un sottoinsieme di un font, è necessario un software di modifica dei font. Ci sono molte opzioni disponibili gratuitamente FontForge al premio FontLab Studio. Per produrre una versione secondaria del font, è sufficiente selezionare un glifo che non si desidera ed eliminarlo, quindi salvare il file nella cartella del progetto. (Fai attenzione a non sovrascrivere il tuo file di font originale!)
Il file .ttf completo per Adobe Garamond Pro è 606 KB. Staccandolo fino a caratteri latinici di base e la punteggiatura lo riduce a 56Kb. Moltiplicalo su più pesi e stili e stai salvando un paio di Mb di download per i tuoi utenti.
La maggior parte dei file di font installati sarà TrueType (.ttf) con un'infarinatura di OpenType (.otf). Puoi salvarli sul tuo server e specificarli nel tuo CSS.
Il supporto per i formati di file .ttf e .otf è diffuso in tutti i browser moderni tranne IE (anche l'ultima versione) e alcuni browser mobili (incluse versioni legacy di iOS Safari).
Per aumentare la tua copertura avrai bisogno di diversi formati aggiuntivi. .eot funziona per IE, .woff funzionerà per la maggior parte dei browser ed è il formato preferito del W3C, .svg funzionerà su browser legacy. Esistono numerosi servizi Web che generano questi formati dal tuo file .ttf, uno dei più popolari Font Squirrel's.
Il rovescio della medaglia con la conversione di caratteri desktop per l'uso online è duplice: in primo luogo, quasi certamente non sei autorizzato a farlo; in secondo luogo, i font desktop sono quasi sempre ottimizzati per la stampa, semplicemente non vengono visualizzati correttamente sullo schermo.
Le fonderie di font si sono finalmente accorte del fatto che esiste un enorme mercato per i webfonts. Di conseguenza non solo hanno rafforzato le loro licenze, ma stanno lavorando per ottimizzare i loro cataloghi posteriori per gli schermi.
Le fonderie che forniscono webfonts dedicati forniscono tutti i formati richiesti, controllati dalla qualità e pronti per il caricamento sul server. Inoltre, sei ancora libero di suddividere un file e non sei dipendente dal tempo di attività di un server di terze parti.
Ci sono molti posti in cui puoi acquistare i webfonts, due dei giocatori chiave nel campo sono FontShop.com e MyFonts.com .
Tornando al nostro dilemma di Garamond, possiamo vedere che MyFonts ha un certo numero di versioni diverse di Garamond in offerta. Possiamo licenziare Adobe Garamond in diversi pesi, limitato a 250.000 pagine visualizzate, per circa $ 180.
FontShop ha anche un certo numero di versioni webfont di Garamond disponibili. URW Garamond Web fornisce tutto il peso e lo stile che potremmo desiderare, il tutto con un generoso numero di 500.000 pagine visualizzate al mese. Inoltre, FontShop ha un dedicato subsetter per ottimizzare i tuoi acquisti di font nuovi e brillanti. Purtroppo paghi un premio per tutto questo, circa $ 680 per la famiglia di font completa.
Il self-hosting consente il subsetting. Garantisce il controllo della consegna dei caratteri ed evita qualsiasi tipo di dipendenza da server di terze parti.
Inoltre, se acquisti un webfont professionale, puoi aspettarti che la qualità sia estremamente elevata.
Il self-hosting si rivolge anche a quelli di noi che preferiscono "possedere" i nostri font piuttosto che affittarli. Certo, in termini legali c'è pochissima proprietà in assoluto, ma una quota unica è più comoda che un abbonamento per molte persone.
L'unico lato negativo del self-hosting è il prezzo sostanziale. Non solo dovrai pagare per il font, ma potresti dover considerare i costi di hosting e larghezza di banda nei tuoi dati.
Proprio come Google Fonts, i servizi webfont consegnano i caratteri ai nostri browser tramite semplici CSS. A differenza di Google Fonts, c'è una vasta gamma tra cui scegliere.
Ci sono diversi fornitori tra cui scegliere, e mi piace particolarmente Hoefler & Frere-Jones ' cloud.typography servizio. Tuttavia, come con molti piccoli venditori, la loro utilità dipende interamente dalla disponibilità del carattere tipografico che stai cercando. Il font più vicino che Hoefler & Frere-Jones può fornire è Hoefler Text, tuttavia se paghiamo un premio non dovremmo scendere a compromessi.
Il più grande giocatore in streaming webfont è Adobe Typekit . La qualità dei loro font è molto alta, l'implementazione è semplice e, soprattutto, hanno un enorme catalogo tra cui scegliere.
Typekit offre una gamma di abbonamenti che vanno da $ 24,99 all'anno a 50.000 visualizzazioni al mese, a $ 99,99 all'anno per 1.000.000 di visualizzazioni al mese. Tuttavia, se sei un socio Creative Cloud il Portfolio Plan è incluso nel tuo abbonamento; ciò significa che per la maggior parte dei web designer Typekit è una soluzione gratuita.
Una rapida ricerca ci dice che ci sono diverse versioni di Garamond, incluso Proprio di Adobe, disponibile su Typekit. E c'è anche una funzionalità di subsetting molto limitata che ci consente di ridurre un po 'le dimensioni del file.
I servizi di streaming Webfont offrono un'ampia varietà di font di qualità eccellente, facili da aggiungere al tuo sito.
Nel caso di Typekit, se sei già un membro Creative Cloud, l'accesso gratuito rende questa opzione ancora più allettante. Tuttavia, se non sei un membro, sei di fronte a una scelta tra il pagamento di una sottoscrizione sostanziale e il vincolo ad Adobe.
La mia principale preoccupazione per qualsiasi servizio di streaming è che si dipenda interamente dalle prestazioni di un server di terze parti. Se il loro server si arresta, così fa una parte sostanziale del tuo marchio.
Come con così tante cose, la risposta è: dipende dal tuo progetto. Ma ci sono alcune decisioni che possiamo prendere in base al nostro test di Garamond:
L'impilamento dei caratteri è un backup gratuito, fornisce una soluzione on-brand se e quando i file dei font risultano mancanti o i servizi di streaming sono lenti. Dovrebbe sempre essere implementato su qualsiasi sito, ma basarsi su di esso, anche per qualcosa di così comune come Garamond è potenzialmente pericoloso.
Se il carattere che stai cercando è disponibile per lo streaming gratuito, tramite Google Fonts o, ad esempio, se hai un abbonamento Creative Cloud, allora questa è una buona scelta. Dato che ho un abbonamento a Creative Cloud, sarei tentato su questa strada, anche se la mancanza di un vero subsetting sarebbe una preoccupazione.
Se hai il budget, allora l'hosting automatico di un webfont professionale è la scelta migliore. Il costo relativamente modesto, se confrontato con la fotografia di repertorio, è facilmente giustificato dall'enorme offerta di subset di incremento della velocità.
In un settore in cui stiamo riducendo i file JavaScript per risparmiare alcuni Kb, la possibilità di radere centinaia di volte quella quantità da un singolo file è un gioco da ragazzi.
Immagine in primo piano / miniatura, scarica l'immagine via Shutterstock.