Contattaci

Variable Fonts: la rivoluzione è già qui!

  • Data: 23 Marzo 2021
  • Autore: Jessica Risica
  • Categorie

  • Giuneco Tech

    Il nostro settore richiede uno studio continuo e una forte attenzione all’innovazione. Incentiviamo quindi dei programmi formativi annuali per tutti i componenti del team, con ore dedicate (durante l’orario di lavoro) e serate formative sia online che in presenza. Sponsorizziamo eventi, sia come partner che semplicemente come partecipanti, e scriviamo articoli su quello che abbiamo imparato per essere, a nostra volta, dei divulgatori.

    Vai alla sezione Team
  • In questo articolo esamineremo cosa sono i font variabili, i vantaggi che offrono e come possiamo utilizzarli nel nostro lavoro. In primo luogo faremo una piccola analisi di come funziona la tipografia sul web e delle innovazioni portate dall’utilizzo dei font variabili.

    FACCIAMO CHIAREZZA

    Font vs typeface

    I termini font e typeface sono spesso usati in modo intercambiabile, tuttavia c’è una differenza:
    Font è un singolo file e ad ogni file corrisponde un font (es. regular).
    Typeface è il tipo di carattere tipografico (design).
    In altre parole, un carattere tipografico è ciò che si vede, il font è ciò che si usa.
    Ad esempio: Roboto è un typeface (design) e il file Roboto_medium.otf è un font (meglio: uno dei font che compongono la famiglia dei font Roboto).


    CHI HA VOLUTO I FONT VARIABILI?

    L’arrivo dei variable font è stato annunciato durante la conferenza ATypI (Association TYPographique Internationale) di Varsavia nel settembre del 2016, dai quattro giganti dell’era digitale: Microsoft, Google, Apple e Adobe, che hanno unito le forze e fatto fronte comune! Per questo possiamo definirla come la prima grande rivoluzione dopo l’introduzione degli OpenType nel 1994.

    CAN I USE?

    Come potete vedere dallo screenshot, finalmente i variable fonts sono supportati dalla maggior parte dei browser.

    COSA SONO E COME FUNZIONANO

    Dalton Maag: Aktiv Grotesk


    La vera differenza tra un font statico e uno variabile è che un font statico è un OpenType, mentre un font variabile è l’evoluzione del classico OpenType nella versione 1.8 ed ha, in aggiunta, delle tabelle di variazioni che permettono di gestire il font in maniera differente.

    Li troviamo sempre nei formati OTF e TTF e anche nei formati compressi WOFF e WOFF2 (quest’ultimo risulta più compresso del WOFF)

    L’asse di variazione non consente solo di passare, per esempio, da un Semi-Bold ad un Regular con lo stesso file, ma permette anche di definire un qualsiasi spessore compreso fra i due, a nostra totale discrezione. Tutto ciò avviene tramite specifici assi di variazione che modificano le proprietà, rendendo il font completamente “fluido”. Grazie ai variable fonts non è più un intoppo trovare la larghezza o lo spessore ricercato, che potrà essere settato senza problemi.

    “A variable font is a single font file that behaves like multiple fonts.”
    John Hudson, Set 2016
    (Un font variabile è un singolo file di font che si comporta come più font)

    See the Pen Variable font demo by Frida Nyvall (@fridanyvall) on CodePen.

    PERCHÈ SCEGLIERLI

    I variable font diventano molto utili quando è necessario utilizzare più versioni di un font all’interno di un sito web. Se fino al 2016 ogni famiglia di font doveva essere contenuta in molteplici file, con i variable font è necessario un solo unico font che racchiude più stili e varianti. Queste varianti possono comprendere anche effetti ombra e bagliori o bordi. In questo modo il peso dei file dei font da scaricare e le richieste HTTP diventano di gran lunga inferiori e sarà così possibile avere un design più vario senza alcuna limitazione di numero di font utilizzati.


    Credit: Oliver Schöndorfer https://www.zeichenschatz.net

    COME LI IMPLEMENTO?

    Quando si inizia a creare un nuovo progetto web, la famiglia di un font viene utilizzata sia durante la realizzazione grafica, sia durante il processo di sviluppo. Come posso quindi implementare i font variabili?

    Inclusione nel progetto

    L’implementazione di questa tipologia di font è la stessa di un font tradizionale, con qualche istruzione in più da aggiungere, e si lavora esclusivamente tramite fogli di stile.

    In CSS si importa il font attraverso il @font-face:

    @font-face {
        font-family: 'Source Sans Variable';
        font-weight: 200 900;
        font-style: normal;
        font-stretch: normal;
        src: url('../fonts/SourceSansVariable/WOFF2/SourceSansVariable-Roman.ttf.woff2') format('woff2'),
    url('../fonts/SourceSansVariable/WOFF/SourceSansVariable-Roman.ttf.woff') format('woff'),
    url('../fonts/SourceSansVariable/VAR/SourceSansVariable-Roman.ttf') format('truetype');
    }
    body { font-family: 'Source Sans Variable'; }
    

    E si applicano semplicemente i valori desiderati:

    h1 { font-size: 3em; font-weight: 876; }
    p { font-size: 1em; font-weight: 410; }

    In HTML, invece, non occorre scrivere nemmeno una riga.

    COME POSSO GESTIRE I VECCHI BROWSER?

    Con i vecchi browser che non supportano i variable fonts, possiamo usare un’istruzione del CSS. Nel foglio di stile implementiamo quindi un font di default, che sia simile al variable font che utilizzeremo.

    body {
        font-family: 'Source Sans', sans-serif;
    }
    

    Mentre per individuare i browser che supportano questa tecnologia, possiamo sfruttare il rilevamento con:

    @supports (font-variation-settings: normal) {
        body {
            font-family: 'Source Sans Variable';
        }
    }
    

    La domanda che sorge spontanea è: “il browser scarica tutti i font installati?
    La risposta è No! I browser sono già pronti per questa eventualità; infatti scaricano solamente i font utilizzati.

    CONCLUSIONI

    Credo che i variable fonts abbiano un grande potenziale; dal 2016 ad oggi il web è diventato sempre più VF friendly, quindi quello che mi rimane da dirvi è provateli!