Introduzione ai caratteri variabili sul Web

Una nuova specifica per i caratteri in grado di ridurre notevolmente le dimensioni dei file dei caratteri

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

In questo articolo esamineremo che cosa sono i caratteri variabili, i vantaggi che offrono e come possiamo utilizzarli nel nostro lavoro. Innanzitutto, vediamo come funziona la tipografia sul web e quali innovazioni offrono i caratteri variabili.

Compatibilità del browser

A partire da maggio 2020, i caratteri variabili sono supportati nella maggior parte dei browser. Consulta Posso utilizzare i caratteri variabili? e Valori di riserva.

Introduzione

I termini carattere e tipo di carattere vengono spesso utilizzati come sinonimi dagli sviluppatori. Tuttavia, c'è una differenza: un carattere tipografico è il design visivo sottostante che può essere utilizzato in molte tecnologie di composizione diverse, mentre un carattere è una di queste implementazioni in un formato file digitale. In altre parole, un carattere è ciò che vedi, mentre il carattere è ciò che utilizzi.

Un altro concetto spesso trascurato è la distinzione tra uno stile e una famiglia. Uno stile è un carattere tipografico singolo e specifico, ad esempio grassetto corsivo, mentre una famiglia è l'insieme completo di stili.

Prima dei caratteri variabili, ogni stile veniva implementato come file di caratteri separato. Con i caratteri variabili, tutti gli stili possono essere contenuti in un unico file.

Sfide per il designer e lo sviluppatore

Quando un designer crea un progetto di stampa, deve fare i conti con alcuni vincoli, come le dimensioni fisiche del layout della pagina, il numero di colori che può utilizzare (che viene determinato dal tipo di macchina da stampa che verrà utilizzata) e così via. Tuttavia, possono utilizzare tutti gli stili di caratteri che preferiscono. Ciò significa che la tipografia dei mezzi di stampa è spesso ricca e sofisticata, per un'esperienza di lettura davvero piacevole. Pensa all'ultima volta che hai sfogliato un ottimo periodico.

I designer e gli sviluppatori web hanno vincoli diversi rispetto ai designer di stampa e uno importante è rappresentato dai costi di larghezza di banda associati ai nostri progetti. Questo è stato un punto di stallo per le esperienze tipografiche più ricche, poiché hanno un costo. Con i caratteri web tradizionali, ogni stile utilizzato nei nostri progetti richiede agli utenti di scaricare un file di caratteri separato, il che aumenta la latenza e il tempo di rendering della pagina. Se includi solo gli stili Normale e Grassetto, oltre alle relative versioni in corsivo, i dati dei caratteri possono ammontare a 500 KB o più. Questo accade anche prima di discutere di come vengono visualizzati i caratteri, dei pattern di riserva che dobbiamo utilizzare o di effetti collaterali indesiderati come FOIT e FOUT.

Molte famiglie di caratteri offrono una gamma molto più ampia di stili, da Thin a Black, spessori stretti e ampi, una varietà di dettagli stilistici e persino design specifici per le dimensioni (ottimizzati per dimensioni di testo grandi o piccole). Poiché dovrai caricare un nuovo file di caratteri per ogni stile (o combinazione di stili), molti sviluppatori web scelgono di non utilizzare queste funzionalità, riducendo l'esperienza di lettura dei propri utenti.

Struttura di un carattere variabile

I caratteri variabili risolvono questi problemi comprimendo gli stili in un unico file.

Questo metodo funziona partendo da uno stile centrale o "predefinito", in genere "Regolare", un carattere romano verticale con lo spessore e la larghezza più tipici, ideale per il testo normale. Questo viene poi collegato ad altri stili in un intervallo continuo, chiamato "asse". L'asse più comune è Peso, che può collegare lo stile predefinito a uno stile in grassetto. Ogni singolo stile può essere posizionato lungo un asse e viene chiamato "istanza" del carattere variabile. Alcune istanze vengono denominate dallo sviluppatore del carattere, ad esempio la posizione dell'asse Spessore 600 si chiama SemiBold.

Il carattere variabile Roboto Flex ha tre stili per l'asse Weight. Lo stile Normale è al centro e ai due estremi dell'asse sono presenti due stili, uno più chiaro e uno più scuro. Tra queste, puoi scegliere tra 900 istanze:

Lo sviluppatore del carattere può proporre una serie di assi diversi. Puoi combinarli perché condividono tutti gli stessi stili predefiniti. Roboto ha tre stili in un asse larghezza: il carattere normale è al centro dell'asse e due stili, più stretto e più largo, sono alle estremità. Forniscono tutte le larghezze dello stile Normale e si combinano con l'asse Spessore per fornire tutte le larghezze per ogni spessore.

Ciò significa che esistono migliaia di stili. Potrebbe sembrare un enorme overkio, ma la qualità dell'esperienza di lettura può essere notevolmente migliorata da questa varietà di stili dei tipi. Inoltre, se non comporta una penalizzazione in termini di prestazioni, gli sviluppatori web possono utilizzare uno o più stili, a seconda delle esigenze del progetto.

Corsivo

Il modo in cui i caratteri in corsivo vengono gestiti nei caratteri variabili è interessante, in quanto esistono due approcci diversi. I caratteri come Helvetica o Roboto hanno contorni compatibili con l'interpolazione, quindi i loro stili Roman e Italic possono essere interpolati tra loro e l'asse Inclinazione può essere utilizzato per passare da Roman a Italic.

Altri caratteri tipografici (come Garamond, Baskerville o Bodoni) hanno contorni di glifo romano e corsivo che non sono compatibili con l'interpolazione. Ad esempio, i contorni che in genere definiscono una "n" minuscola romana non corrispondono ai contorni utilizzati per definire una "n" minuscola in corsivo. Anziché interpolare un contorno all'altro, l'asse Italico passa dai contorni romani a quelli italici.

Dopo il passaggio all'italico, gli assi disponibili per l'utente dovrebbero essere gli stessi di quelli per il carattere romano, così come lo stesso set di caratteri.

È possibile visualizzare una funzionalità di sostituzione dei glifi anche per i singoli glifi e utilizzarla in qualsiasi punto dello spazio di progettazione di un carattere variabile. Ad esempio, un design del segno di dollaro con due barre verticali è ideale per i caratteri di dimensioni maggiori, ma per quelli di dimensioni inferiori è preferibile un design con una sola barra. Quando abbiamo meno pixel per il rendering del glifo, un design a due barre può diventare illeggibile. Per combattere questo problema, proprio come per l'asse Corsivo, una sostituzione di un glifo con un altro può avvenire lungo l'asse Dimensione ottica in un punto deciso dal type designer.

In sintesi, se i contorni lo consentono, i designer di caratteri possono creare caratteri che interpolano tra vari stili in uno spazio di progettazione multidimensionale. In questo modo avrai un controllo granulare sulla tipografia e una grande potenza.

Definizioni degli assi

Esistono cinque assi registrati, che controllano le caratteristiche note e prevedibili del carattere: peso, larghezza, dimensione ottica, inclinazione e corsivo. Oltre a questi, un carattere può contenere assi personalizzati. Questi parametri possono controllare qualsiasi aspetto del design del carattere che il tipografo desidera: la dimensione dei trattini, la lunghezza delle svoligature, l'altezza dei tratti ascendenti o la dimensione del punto sulla i.

Anche se gli assi possono controllare la stessa funzionalità, potrebbero utilizzare valori diversi. Ad esempio, nei tipi di carattere variabili Oswald e Hepta Slab è disponibile un solo asse, Weight, ma gli intervalli sono diversi. Oswald ha lo stesso intervallo di prima dell'upgrade per essere variabile, da 200 a 700, ma Hepta Slab ha uno spessore estremo della linea dei peli a 1 che arriva fino a 900.

I cinque assi registrati hanno tag in minuscolo di 4 caratteri che vengono utilizzati per impostarne i valori in CSS:

Poiché lo sviluppatore del carattere definisce gli assi disponibili in un carattere variabile e i valori che possono avere, è essenziale scoprire cosa offre ogni carattere. Questo dovrebbe essere fornito nella documentazione del carattere oppure puoi controllarlo con uno strumento come Wakamai Fondue.

Casi d'uso e vantaggi

L'impostazione dei valori degli assi dipende dai gusti personali e dall'applicazione delle best practice di tipografia. Il pericolo di qualsiasi nuova tecnologia è il possibile uso improprio e le impostazioni eccessivamente artistiche o esplorative potrebbero anche ridurre la leggibilità del testo effettivo. Per i titoli, è interessante esplorare diversi assi per creare design artistici di grande impatto, ma per il corpo del testo si rischia di rendere il testo illeggibile.

Espressione entusiasta

Un ottimo esempio di espressione artistica è mostrato sopra, un'esplorazione del carattere Decovar di Mandy Michael.

Puoi visualizzare qui l'esempio funzionante e il codice sorgente per l'esempio precedente.

Animazione

Esiste anche la possibilità di animare i caratteri con i caratteri variabili. Sopra è riportato un esempio dei diversi assi utilizzati con il carattere tipografico Zycon. Guarda l'esempio di animazione dal vivo su Axis Praxis.

Anicons è il primo carattere icona colore animato basato sulle icone di Material Design. Anicon è un esperimento che combina due tecnologie all'avanguardia per i caratteri: caratteri variabili e caratteri a colori.

Finesse

Roboto Flex e Amstelvar offrono un insieme di "assi parametrici". In questi assi, le lettere vengono decostruite in 4 aspetti fondamentali della forma: forme nere o positive, forme bianche o negative e le dimensioni x e y. Allo stesso modo in cui i colori primari possono essere miscelati con qualsiasi altro colore per regolarlo, questi quattro aspetti possono essere utilizzati per perfezionare qualsiasi altro asse.

L'asse XTRA in Amstelvar consente di regolare il valore per mille "bianco", come mostrato sopra. Utilizzando piccoli tratti di XTRA in direzioni opposte, le larghezze delle parole vengono uniformate.

Caratteri variabili in CSS

Caricamento dei file dei caratteri variabili

I font variabili vengono caricati tramite lo stesso meccanismo @font-face dei font web statici tradizionali, ma con due nuovi miglioramenti:

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

1. Formati di origine: non vogliamo che il browser scarichi il carattere se non supporta i caratteri variabili, quindi aggiungiamo le descrizioni format e tech: una volta nella sintassi futura (format('woff2') tech('variations')) e una volta nella sintassi ritirata, ma supportata tra i browser (format('woff2-variations')). Se il browser supporta i caratteri variabili e la sintassi futura, utilizzerà la prima dichiarazione. Se supporta i caratteri variabili e la sintassi attuale, utilizzerà la seconda dichiarazione. Entrambi fanno riferimento allo stesso file del carattere.

2. Intervalli di stili: noterai che stiamo fornendo due valori per font-weight e font-stretch. Anziché indicare al browser quale spessore specifico offre questo carattere (ad esempio font-weight: 500;), ora forniamo l'intervallo di spessori supportati dal carattere. Per Roboto Flex, l'asse Spessore va da 100 a 1000 e il CSS mappa direttamente l'intervallo dell'asse alla proprietà stilefont-weight. Se specifichi l'intervallo in @font-face, qualsiasi valore al di fuori di questo intervallo verrà "limitato" al valore valido più vicino. L'intervallo dell'asse Larghezza è mappato nello stesso modo alla proprietà font-stretch.

Se utilizzi l'API Google Fonts, non dovrai preoccuparti di nulla. Non solo il CSS conterrà gli intervalli e i formati di origine corretti, ma Google Fonts invierà anche caratteri di riserva statici nel caso in cui i caratteri variabili non siano supportati.

Utilizzo di pesi e larghezze

Al momento, gli assi che puoi impostare in modo affidabile da CSS sono l'asse wght fino a font-weight e l'asse wdth fino a font-stretch.

Tradizionalmente, font-weight viene impostato come parola chiave (light, bold) o come valore numerico compreso tra 100 e 900, con incrementi di 100. Con i caratteri variabili, puoi impostare qualsiasi valore compreso nell'intervallo Larghezza del carattere:

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

Analogamente, possiamo impostare font-stretch con parole chiave (condensed, ultra-expanded) o con valori percentuali:

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

Utilizzo di corsivo e obliqui

L'asse ital è destinato ai caratteri che contengono sia uno stile normale sia uno stile corsivo. L'asse deve essere un interruttore on/off: il valore 0 è disattivato e mostra lo stile normale, il valore 1 mostrerà il corsivo. A differenza di altri assi, non c'è transizione. Un valore 0.5 non restituirà "metà corsivo".

L'asse slnt è diverso dai caratteri in corsivo in quanto non è un nuovo stile, ma inclina semplicemente lo stile normale. Per impostazione predefinita, il suo valore è 0, a indicare le forme predefinite con lettere verticali. Roboto Flex ha una inclinazione massima di -10 gradi, il che significa che le lettere si inclinano verso destra quando si passa da 0 a -10.

Sarebbe intuitivo impostare questi assi tramite la proprietà font-style, ma a partire da aprile 2020, la modalità esatta per farlo è ancora in fase di definizione. Per il momento, quindi, devi trattarli come assi personalizzati e impostarli tramite font-variation-settings:

i, em, .italic {
    /* Should be font-style: italic; */
    font-variation-settings: 'ital' 1;
}

.slanted {
    /* Should be font-style: oblique 10deg; */
    font-variation-settings: 'slnt' 10;
}

Utilizzo delle dimensioni ottiche

Un carattere tipografico può essere visualizzato in caratteri molto piccoli (una nota a piè di pagina di 12 px) o molto grandi (un titolo di 80 px). I caratteri possono rispondere a queste variazioni delle dimensioni modificando le forme delle lettere per adattarle meglio alle sue dimensioni. Una taglia piccola potrebbe essere più adatta senza dettagli sottili, mentre una taglia grande potrebbe avere maggiori dettagli e tratti più sottili.

È stata introdotta una nuova proprietà CSS per questo asse: font-optical-sizing. Per impostazione predefinita è impostato su auto, che consente al browser di impostare il valore dell'asse in base a font-size. Ciò significa che il browser sceglierà automaticamente la dimensione ottica migliore, ma se vuoi disattivare questa opzione puoi impostare font-optical-sizing su none.

Puoi anche impostare un valore personalizzato per l'asse opsz, se vuoi deliberatamente una dimensione ottica che non corrisponda alla dimensione del carattere. Il seguente CSS causerebbe la visualizzazione di testo di grandi dimensioni, ma a una dimensione ottica, come se fosse stampato in 8pt:

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

Utilizzo di assi personalizzati

A differenza degli assi registrati, gli assi personalizzati non verranno mappati a una proprietà CSS esistente, pertanto dovrai sempre impostarli tramite font-variation-settings. I tag degli assi personalizzati sono sempre in maiuscolo, per distinguerli dagli assi registrati.

Roboto Flex offre alcuni assi personalizzati, il più importante dei quali è il grado (GRAD). Un asse di grado è interessante perché modifica lo spessore del carattere senza modificare le larghezze, quindi le interruzioni di riga non cambiano. Se modifichi l'asse Gradazione, puoi evitare di dover modificare l'asse Spessore, che influisce sulla larghezza complessiva, e poi l'asse Larghezza, che influisce sul peso complessivo.

Poiché GRAD è un asse personalizzato, ha un intervallo compreso tra -200 e 150 in Roboto Flex. Dobbiamo risolvere il problema con font-variation-settings:

.grade-light {
    font-variation-settings: `GRAD` -200;
}

.grade-normal {
    font-variation-settings: `GRAD` 0;
}

.grade-heavy {
    font-variation-settings: `GRAD` 150;
}

Caratteri variabili su Google Fonts

Google Fonts ha ampliato il proprio catalogo con caratteri variabili e ne aggiunge di nuovi regolarmente. Al momento l'interfaccia è finalizzata alla scelta di singole istanze dal carattere: selezionate la variazione che vi interessa, fate clic su "Seleziona questo stile" e l'elemento verrà aggiunto all'elemento <link> che recupera il CSS e i caratteri da Google Fonts.

Per utilizzare tutti gli assi o gli intervalli di valori disponibili, dovrai comporre manualmente l'URL dell'API Google Fonts. La panoramica sui caratteri variabili elenca tutti gli assi e i valori.

Lo strumento Link a caratteri variabili di Google può anche fornirti gli URL più recenti per i caratteri variabili completi.

Eredità delle impostazioni di variazione dei caratteri

Anche se a breve tutti gli assi registrati saranno supportati tramite le proprietà CSS esistenti, per il momento potresti dover fare affidamento su font-variation-settings come opzione di riserva. E se il carattere ha assi personalizzati, dovrai usare anche font-variation-settings.

Comunque, ecco un piccolo trucco con font-variation-settings. Per ogni proprietà non impostata esplicitamente verrà ripristinato automaticamente il valore predefinito. I valori impostati in precedenza non vengono ereditati. Ciò significa che quanto segue non funzionerà come previsto:

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

Innanzitutto, il browser applicherà font-variation-settings: 'slnt' 10 della classe .slanted. Poi applicherà font-variation-settings: 'GRAD' -200 dalla classe .grade-light. Tuttavia, il valore predefinito di slnt verrà reimpostato su 0. Il risultato sarà testo in pendenza leggera, ma non inclinato.

Fortunatamente, possiamo aggirare il problema utilizzando le variabili CSS:

/* Set the default values */
:root {
    --slnt: 0;
    --GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
    --slnt: 10;
}

.grade-light {
    --grad: -200;
}

.grade-normal {
    --grad: 0;
}

.grade-heavy {
    --grad: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
    font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

Le variabili CSS verranno applicate a cascata, pertanto se un elemento (o uno dei relativi principali) ha impostato slnt su 10, manterrà quel valore, anche se imposti GRAD su qualcos'altro. Per una spiegazione approfondita di questa tecnica, consulta Correggere l'ereditarietà dei caratteri variabili.

Tieni presente che l'animazione delle variabili CSS non funziona (per progettazione), quindi un codice come questo non funziona:

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

Queste animazioni dovranno avvenire direttamente su font-variation-settings.

Ottimizzazione del rendimento

I caratteri OpenType variabili ci consentono di archiviare più varianti di una famiglia di caratteri in un unico file del carattere. Monotype ha condotto un esperimento combinando 12 caratteri di input per generare otto spessori, su tre larghezze, sia nello stile corsivo che in quello romano. La memorizzazione di 48 caratteri individuali in un unico file di caratteri variabili ha comportato una riduzione dell'88% delle dimensioni del file.

Tuttavia, se utilizzi un solo carattere, come Roboto Regular, e nient'altro, potresti non notare un aumento netto nelle dimensioni dei caratteri se passi a un carattere variabile con molti assi. Come sempre, dipende dal caso d'uso.

D'altra parte, l'animazione del carattere tra le impostazioni potrebbe causare problemi di rendimento. Anche se ciò migliorerà una volta che il supporto dei caratteri variabili nei browser diventerà più maturo, il problema può essere leggermente ridotto dall'animazione solo dei caratteri attualmente presenti sullo schermo. Questo pratico snippet di Dinamo mette in pausa le animazioni negli elementi con l'attributo class vf-animation, quando non sono sullo screen:

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

Se il carattere risponde all'interazione dell'utente, ti consigliamo di limitare o eliminare il ritardo degli eventi di input. In questo modo, il browser non eseguirà il rendering di istanze del carattere variabile che sono cambiate così poco rispetto all'istanza precedente che l'occhio umano non vedrebbe la differenza.

Se utilizzi Google Fonts, ti consigliamo di eseguire il preconnessione a https://fonts.gstatic.com, il dominio in cui sono ospitati i caratteri di Google. In questo modo, il browser saprà subito dove trovare i caratteri quando li incontra nel CSS:

<link rel="preconnect" href="https://fonts.gstatic.com" />

Questo suggerimento vale anche per altre CDN: prima consenti al browser di configurare una connessione di rete, prima potrà scaricare i caratteri.

Scopri altri suggerimenti sul rendimento per il caricamento di Google Fonts in I caratteri Google più rapidi.

Valori di riserva e supporto dei browser

Tutti i browser moderni supportano i caratteri variabili. Se devi supportare browser meno recenti, puoi scegliere di creare il tuo sito con caratteri statici e utilizzare i caratteri variabili come miglioramento progressivo:

/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: Roboto;
    src: url('Roboto-Regular.woff2');
    font-weight: normal;
  }

  @font-face {
    font-family: Roboto;
    src: url('Roboto-Bold.woff2');
    font-weight: bold;
  }

  body {
    font-family: Roboto;
  }

  .super-bold {
    font-weight: bold;
  }
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

  .super-bold {
    font-weight: 1000;
  }
}

Per i browser meno recenti, il testo con la classe .super-bold verrà visualizzato in grassetto normale, poiché è l'unico carattere in grassetto disponibile. Quando i caratteri variabili sono supportati, possiamo utilizzare lo spessore più elevato di 1000.

La regola @supports non è supportata da Internet Explorer, pertanto questo browser non mostrerebbe alcun stile. Se questo è un problema, puoi sempre utilizzare uno dei hack vecchia scuola per scegliere come target browser meno recenti pertinenti.

Se utilizzi l'API Google Fonts, si occuperà di caricare i caratteri corretti per i browser dei tuoi visitatori. Supponiamo che tu richieda il carattere Oswald con spessore tra 200 e 700, come segue:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

I browser moderni in grado di gestire i caratteri variabili riceveranno il carattere variabile e disporranno di tutti i pesi compresi tra 200 e 700. I browser meno recenti riceveranno singoli caratteri statici per ogni peso. In questo caso, verranno scaricati sei file di caratteri: uno per il peso 200, uno per il peso 300 e così via.

Grazie

Questo articolo è stato reso possibile solo con l'aiuto delle seguenti persone:

• Mustafa Kurtuldu, UX designer e design advocate di Google
• Roel Nieskens, designer/sviluppatore UX ed esperto di tipografia presso Kabisa
• Dave Crossland, Program Manager, Google Fonts
• David Berlow, type designer e tipografo presso Font Bureau
• Laurence Penney, sviluppatore di axis-praxis.org
• Mandy Michael, sviluppatore di variablefonts.dev

Immagine hero di Bruno Martins su Unsplash.