CSS  »  Articoli  »  CSS fonts stampa e tipografia 

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.

Figura 1 - Anteprima dei font

Selezionato un font (click sul pulsante "Add"), si inizia a lavorare nel pannello più importante dell'applicazione, il Kit Editor.

Figura 2 - Vista d'insieme del Kit Editor (click per ingrandire)

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.

Altri articoli

Altre guide

Altre newsletter