06 Mag Variable fonts: cosa sono e perchè sono una rivoluzione

Qualche giorno fa, mentre ero alle prese con il recupero di un po’ di newsletter che si erano accumulate, mi è balzata all’occhio una novità: Google Fonts introduce le variable fonts.

Non so se lo sai, ma Google Fonts è una libreria di circa un migliaio di caratteri tipografici con libera licenza (cioè gratuite sia per uso personale che commerciale). Ha da poco compiuto 10 anni e non la ringrazierò mai abbastanza, lei e tutta la community di designer che progettano i caratteri! Poter usare una font senza doverne acquistare la licenza è un aiuto enorme! Meno sbatti con le licenze ma soprattutto mi permette di offrire i miei servizi ad un prezzo accessibile anche alle piccole attività – hai mai provato a vedere quanto costa il famosissimo Helvetica? La famiglia completa costa ben € 399,00! Alcune delle font che ti consiglio qui con la newsletter arrivano proprio da Google Fonts.

Ma ritorniamo alle variable font: ammetto di non averne sentito parlare fino ad allora e per questo mi sono messa alla ricerca. In pratica si tratta di una font che contiene al suo interno più stili di un carattere tipografico.

Ok, qui c’è bisogno di mettere un chiaro un po’ di cose se no non si capisce nulla. 😳

Cosa è una font e cosa sono gli stili 

Partiamo dal presupposto che la font è il file di un carattere tipografico, cioè Helvetica è il carattere tipografico mentre la font è il suo file. Usando le parole di Google, il carattere tipografico è ciò che vedi, la font è ciò che usi. Quindi ricorda: quando parlo di font sto parlando del file.

E una cosa è andata! 🙌

Veniamo ora agli stili: il grassetto, il corsivo, sono gli stili di un carattere tipografico. Un carattere tipografico può avere numerosi stili, l’insieme di questi viene chiamato famiglia. Potrà esserti capitato di leggere di un carattere la versione thin, light, regular, bold ma anche thin italic (italic sta per il corsivo), bold italic e così via. 

La regola è: ogni stile di un carattere tipografico ha una sua font. Con quei € 399,00 non compri solo il carattere Helvetica ma tutti suoi stili, che per la precisione sono 59: 59 font, ergo 59 file.

Il bello delle variable font è che non hai bisogno di avere 59 font ma te ne basta una per averle tutte. E questo è un enorme vantaggio soprattutto in termini di velocità di caricamento online. Quando usi più stili sul tuo sito/blog vuol dire che chi visita la tua pagina deve attendere il caricamento di tutte le font corrispondenti. Lo sappiamo bene che la velocità è un fattore molto importante online: sarà capitato anche a te di chiudere un sito perché non caricava la pagina. Ecco, scegliere una variable font significa usare tanti stili senza appesantire il sito perché la font da caricare è una – è anche per questo che è sconsigliato usare troppi stili su un sito! Tu comunque usane poche che è meglio, «Less is more» diceva il buon caro Mies van der Rohe. 

L’anatomia di una variable font

Ogni variable font ha un suo punto 0, uno stile di default su cui intervengono gli altri stili. Di solito lo stile di default è quello che in gergo è chiamato Regular: questo testo che leggi è scritto in Lato (carattere tipografico) regular (stile). Dal regular partono tutti gli stili sviluppati e che possono coinvolgere questi aspetti:

• Peso. Controlla lo spessore dei carattere. Mentre con le font tradizionali i pesi sono definiti e finiti (thin, light, medium, bold, black), con le variable font le possibilità sono infinite. Puoi scegliere lo spessore che più ti piace e non essere vincolat@ ai soli pesi sviluppati.  
• Corsivo. Mentre per le font tradizionali un carattere può essere corsivo o non esserlo, con le variable puoi decidere tu quanto deve essere corsivo.
• Larghezza. Controlla la larghezza, o compattezza, di un carattere. Di norma con diverse larghezze si sviluppano dei caratteri a parte, ognuno con le proprie famiglie di stili: dell’Helvetica, ad esempio, ne esiste anche la versione Condensed che non è altro che un Helvetica più compresso. Con le variable font puoi decidere tu se avere quel carattere schiacciato o larghissimo. 

Tutto ciò è possibile grazie ad un’interpolazione tra due variabili, due stili limite, ad esempio tra lo spessore minimo e quello massimo sviluppato. 

Una precisazione doverosa: tutti gli aspetti che si possono modificare in una variable font sono controllati e non casuali. Questo vuol dire che un progettista ha sviluppato la font affinché si modifichi nel modo in cui vuole. Per esempio, il peso è sì un aumento/diminuzione dello spessore ma per alcune font questa modifica non è uniforme ma interviene solo su alcune geometrie del carattere. Questo per dire che se di base è difficile progettare un carattere tipografico, sviluppare una variable font lo è ancora di più. 

Quelli che ti ho elencato sono solo alcuni degli aspetti modificabili in una variable font ma le possibilità sono infinite: è possibile gestire la forma delle grazie, la posizione di determinati elementi di un carattere e tantissimi altri elementi. Il limite è solo la propria creatività. Infatti online si trovano esperimenti di variable font dei più bizzarri, da quelli con tartarughe che spuntano dal loro carapace a font che cambiano grazie alle espressioni facciali. 

Ed è proprio con quest’ultimo esperimento che voglio chiudere l’articolo. Realizzato dall’agenzia creativa danese Overtone e sviluppato da Set Snail, Your Typeface è un sito che consente di creare una font sulla base della propria espressione facciale. Basta attivare la webcam, fare facce buffe – ma anche serie – e vedere in tempo reale i cambiamenti della font. 

Con la tua faccia puoi cambiare tre cose:

• aprendo la bocca gestisci il peso della font, bocca chiusa= font sottile, bocca aperta= font spessa;
• allargando la bocca regoli la larghezza/compattezza della font;
• muovendo le sopracciglia rendi i dettagli della font più o meno accentuati.

In più puoi anche scaricare la font e usarla per i tuoi progetti personali. 🌈

Io ti saluto con la mia personale versione della font.