Webfont: a che punto siamo e cosa cambia con il nuovo servizio cloud di Hoefler & Frere Jones

by • 5 Luglio 2013 • Focus, Lavoro, Risorse, TipografiaComments (0)1603

Il web design cambia continuamente. Tra responsive, html5, css3, flat, mobile, framework, wefont, scomparsa di flash, negli ultimi 5 anni è cambiato quasi tutto. Uno dei maggiori cambiamenti dal punto di vista del design è stato senza dubbio la tipografia.

Fino a qualche anno fa, per chi progettava siti web, la scelta del carattere era una questione secondaria. Si poteva scegliere tra quella decina (Arial, Georgia, Helvetica, Lucida, Times New Roman, Verdana…) che era installata su tutti i computer, cosiddetti “websafe”. Oggi si possono usare tutti i caratteri che esistono. Con due limitazioni: di licenza e di ottimizzazione. Per usare alcuni caratteri professionali sul web c’è bisogno di una licenza specifica; un carattere disegnato per la stampa ha bisogno di essere ottimizzato e in parte ridisegnato per avere una buona rese sugli schermi a dimensioni ridotte.

L’uso di webfont su pagine web è semplice. Si carica il carattere sul proprio spazio web, si richiama il carattere con poche righe di codice CSS usando la proprietà @font-face. Tutti i browser supportano la proprietà @font-face, non tutti i browser supportano tutti i formati dei caratteri. Per usare una font su un sito c’è bisogno di quattro formati: ttf, wof, eot, svg (qui una tabella riepilogativa del supporto dei browser).

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */ 
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
url('webfont.woff') format('woff'), /* Modern Browsers */ 
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Quando si acquista una licenza webfont (dai vari store digitali Myfonts, Fontshop, Fontspring), vengono forniti tutti i formati e – quasi sempre – anche il codice CSS da inserire.

Oltre a poter comprare singoli caratteri e caricarli sul proprio spazio web negli anni sono nati servizi font-cloud (o font-hosting). Con un abbonamento – o gratuitamente – si possono scegliere e usare centinaia di font.

I maggiori servizi sono: GoogleWebFont, Typekit, Fonts.com, Fontdeck, Webink, Webtype.

GoogleWebFont

Il servizio GoogleWebFont è gratuito e ha oltre 600 font. Dal sito si sceglie il carattere, si aggiunge alla pagina html un codice che richiama il carattere (il codice è un collegamento ad un file CSS),  e senza dover caricare nessun file sul proprio spazio web si visualizza il carattere scelto. è possibile scaricare anche la versione desktop del carattere.

Typekit

Typekit (acquisito nel 2011 da Adobe) è a pagamento. Si paga un abbonamento annuale e si accede alla loro intera libreria. Per usare il servizio, una volta registrati, si creano dei fontkit a cui si associa uno o più domini. Per ogni fontkit c’è un codice da aggiungere alla pagina web che farà visualizzare i caratteri scelti. Dal kit si scelgono i pesi (light, regular, grassetto, corsivo) e si richiamo con i normali comandi css e html di grassetto e corsivo. Typekit è l’unico che gestisce i pesi delle font in questo modo.

Fonts.com

Fonts.com, della Monotype, è probabilmente il servizio webfont con la libreria più ampia. Si paga un abbonamento e si può accedere a tutti i caratteri. Si crea un progetto con uno o più domini e si associano i caratteri. Su Fonts.com i pesi sono separati, bisogna associare e richiamare i pesi specifici. Se voglio il grassetto di un certo carattere non basta il codice css o html del grassetto, ma bisogna caricare il carattere del grassetto e richiamare quel peso (meno intuitivo di Typekit, ma tranquilli è più facile a farsi che a dirsi).

h1 {
font-weight:normal;
font-family: 'MyWebFont Bold';
}

Fontdeck

Fontdeck è il servizio webfont creato da Clearleft. A differenza di Fonts.com e Typekit su Fontdeck ci sono perlopiù typefoundry piccole e indipendenti. Non si paga un abbonamento, ma si paga annualmente per singolo peso di carattere.

WebType

WebType funziona come Fontdeck, si paga per singola font e singolo peso. Ci sono poche typefoundry, ma solo qui trovate il Verdana Pro e il Georgia Pro (che sono tutt’altra cosa rispetto alla versione standard) e i caratteri di Font Bureau.

WebInk

WebInk è un altro servizio con abbonamento annuale che permette di accedere alla loro intera libreria.

Molti caratteri si possono trovare in tutti questi servizi, altri invece sono in esclusiva. Ad esempio uno dei webfont più usati da startup e webdesigner, il Proxima Nova, non è disponibile solo su WebType e Google, mentre solo su Fontdeck trovate i caratteri di FontSmith e solo su WebInk trovate i caratteri di OurType.

Non tutti i caratteri si trovano su questi servizi. Molte typefoundry per scelta non concedono le proprie font. Alcune vendono webfont direttamente dal loro sito, altre, come ad esempio FontFont, ProcessType e Arstype si appoggiano a Typekit non includendo il loro caratteri nell’abbonamento standard (alcuni caratteri FontFont rientrano nell’abbonamento). Altre stanno cominciando a dotarsi di un proprio servizio di font-hosting. La prima a lanciare un servizio parallelo e indipendente è stata poco giorni fa la Hoefler & Frere Jones, la typefoundry del Gotham, con il suo Cloud.typography. Il servizio è stato in beta per più di un anno, ora è disponibile per tutti. Le font della H&FJ non si trovano da nessun’altra parte se non sul loro sito. H&FJ non si serve di intermediari per la vendita dei loro caratteri. Per le webfont hanno adottato lo stesso principio. Si comprano solo dal loro sito. Per usare le font di H&FJ si paga un abbonamento annuale col quale è possibile accedere a tutti i loro caratteri e aggiungere tutti i domini che si vuole. Le differenze di costo si basano sul traffico che generano i siti.

Il mercato del webfont è nato nel 2009 con Typekit, ora l’offerta si amplia. Per le typefoundry vendere direttamente i loro caratteri è un vantaggio, soprattutto dal punto di vista economico, soprattutto se si ha una visibilità e una reputazione come quella di H&FJ. Per le piccole typefoundry appoggiarsi a servizi di font-hosting è una tappa obbligata per farsi conoscere e crescere. Si sicuro il Proxima Nova di Mark Simonson non sarebbe diventato l’Helvetica dei web designer senza TypeKit e FontDeck.

Pin It

Related Posts

Comments are closed.