In questo articolo non parleremo di fogli di stile. Non scriveremo una sola riga di CSS (o quasi).
Potreste legittimamente chiedervi, allora, perché proprio in questa sezione trova spazio. Semplice: perché il servizio offerto da Typekit (l'argomento centrale dell'articolo) è basato su una delle funzionalità più interessanti dei nuovi CSS, ovvero la possibilità di usare in un foglio di stile font scaricabili dall'utente grazie alla proprietà @font-face. Per una panoramica sull'uso di questo metodo, sul supporto dei vari browser, sui dettagli tecnici vi rimando all'articolo Web fonts con i CSS in cinque minuti, ora passiamo alla presentazione di Typekit e delle sue caratteristiche.
A cosa serve Typekit
Typekit è un servizio web che consente di usare i nostri font preferiti nel contesto di una pagina HTML. E fin qui nulla di nuovo rispetto a quanto possiamo ottenere usando nel modo canonico @font-face nei fogli di stile secondo quanto visto in Web fonts con i CSS in cinque minuti. Perché, dunque, uno potrebbe preferire affidarsi a questo servizio?
Sin dal lancio di Typekit, i creatori hanno posto l'enfasi su tre fattori:
- Typekit offre font di qualità, una qualità non sempre riscontrabile nella miriade di font liberamente utilizzabili e reperibili sul web;
- Typekit risolve i problemi di licenza legati all'uso dei font offrendo un punto di incontro tra le esigenze dei produttori e quelle dei designer;
- Typekit è facile da usare, affidabile, adattabile a diverse esigenze grazie a diversi piani di prezzo.
Come si usa Typekit
Per la prova svolta in questo articolo abbiamo sottoscritto il piano Trial: a fronte di nessun costo, consente di usare su un solo sito due font della collezione, con l'obbligo di esporre un badge di Typekit sulle pagine in cui i font sono utilizzati.
Dopo aver proceduto all'iscrizione, siamo subito pronti per essere operativi. Avendo scelto l'account Trial, ci viene chiesto sin da subito di inserire il dominio su cui vogliamo usare i font, poi il passo da compiere è quello di scegliere i font che intendiamo utilizzare. Nel nostro caso la scelta è caduta su Scrivano e Terfens.
Selezionato un font (click sul pulsante "Add"), si inizia a lavorare nel pannello più importante dell'applicazione, il Kit Editor.
Come si vede, la finestra è suddivisa in quattro aree.
La testata comprende due link importanti. "Embed code" fa aprire un box da cui potremo copiare il codice Javascript da incollare nelle nostre pagine per attivare i font. "Kit settings" consente di modificare le impostazioni del kit (nome del dominio, etc.).
La parte destra mostra un'anteprima dei font che fanno parte del kit, alcune note sull'utilizzo, un link per eliminare i font.
La parte sinistra è quella su cui andiamo ad operare le scelte fondamentali per incorporare i font nelle nostre pagine.
In basso, una sorta di footer mostra una vista sintetica dei settaggi del kit e il pulsante che ci consentirà, una volta terminato di definire tutte le impostazioni, di pubblicare il tutto. Procediamo con ordine, partendo dai pannelli della parte sinistra.
Attraverso la voce "Selectors" impostiamo i selettori attraverso cui applicheremo un carattere a specifiche sezioni o porzioni della nostra pagina.
Se volessimo usare il font Scrivano sui titoli di primo livello, basterebbe inserire come selettore il tag HTML h1. Se volessimo usarlo sugli elementi con classe "titolo", basterebbe inserire il selettore ".titolo". Possiamo sfruttare anche gli id: per applicare il font agli elementi con id "titolo", in Typekit scriveremo "#titolo". E così via: nella definizione dei selettori basta seguire le regole con cui si definiscono normalmente nei CSS.
Nella pagina di esempio che creeremo, Scrivano sarà applicato solo ai titoli h1.
Espandendo la voce "Weights and Styles" possiamo scegliere se includere per il download tutte le varianti del font a livello di peso e stile. Se pensiamo di usare solo la variante "Regular", quindi, inutile aggiungere quelle per il grassetto ("Bold") o il corsivo ("Italic"). Come si vede, infatti, ogni variante aggiunge dei kb al pacchetto che l'utente dovrà scaricare per visualizzare correttamente il testo.
La funzionalità "Subsets" non è al momento attiva, per cui passiamo all'ultima voce: CSS Stack. È fondamentale per la fruibilità della pagina. Nel campo di testo, infatti, si inseriscono i nomi dei font o delle famiglie di font alternativi che saranno visualizzati sui browser che non supportano @font-face. Nel nostro esempio, su quasti browser i titoli h1 appariranno in Georgia.
Una volta completata questa operazione è il momento di cliccare sul pulsante "Publish". In questo contesto per pubblicazione si intende la distribuzione del kit sui server di Typekit, nulla avviene sui nostri server. Un messaggio di conferma ci avvisa sull'esito dell'operazione.
Ora possiamo mettere mano alle nostre pagine. L'unica cosa da fare è inserire all'interno della sezione head di tutte le pagine su cui useremo i font i richiami agli script Javascript visualizzabili cliccando su "Embed Code". Uno sguardo al codice sorgente del nostro esempio renderà tutto più chiaro. A beneficio di quanti dovessero visualizzarlo con un browser che non supporta @font-face, ecco uno screenshot. Per il titolo è stato usato il font Scrivano, per il breve paragrafo Terfens.
Se osservate nell'esempio l'angolo inferiore destro, vedrete che è visibile il piccolo badge con il logo di Typekit.
Una nota per concludere. Cliccando sul link "Advanced" sotto al pannello dei selettori, veniamo informati della possibilità di inserire nel nostro CSS le informazioni relative ai font incorporati tramite Typekit. Ciò avviene attraverso una sintassi un po' particolare:
h1 {
font-family: "scrivano-1","scrivano-2","georgia",serif;
}Nulla di diverso rispetto al solito, salvo lo strano modo in cui è definito l'uso della font-family scrivano da noi scelta per il titolo. L'uso della numerazione (-1, -2) è dovuto al fatto che i font distribuiti via Typekit vengono splittati in più parti come misura di protezione. Ulteriori informazioni sul blog ufficiale.
