Introduzione ai caratteri variabili sul Web

Una nuova specifica del carattere che può ridurre significativamente le dimensioni dei file dei caratteri

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

In questo articolo scoprirai cosa sono i caratteri variabili, i vantaggi che offrono e come utilizzarli nel tuo lavoro. Innanzitutto, esamina il funzionamento della tipografia sul web e le innovazioni introdotte dai 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 Fallback.

Introduzione

Gli sviluppatori spesso usano i termini carattere e tipo di carattere in modo intercambiabile. Tuttavia, esiste una differenza: un carattere tipografico è il design visivo sottostante che può esistere in molte tecnologie di composizione diverse, mentre un font è una di queste implementazioni, in un formato di file digitale. In altre parole, il tipo di carattere è ciò che vedi, mentre il font è 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 grafico crea un progetto di stampa, deve rispettare alcuni vincoli, ad esempio le dimensioni fisiche del layout di pagina, il numero di colori che può utilizzare (che è determinato dal tipo di macchina da stampa che verrà utilizzata) e così via. ma possono utilizzare tutti gli stili di caratteri che vogliono. Ciò significa che la tipografia dei supporti stampati è spesso ricca e sofisticata, in modo che l'esperienza di lettura sia davvero piacevole. Pensa all'ultima volta che hai sfogliato una rivista eccellente.

I web designer e gli sviluppatori hanno vincoli diversi rispetto ai grafici di stampa e uno dei più importanti è il costo della larghezza di banda associato ai nostri progetti. Questo è stato un punto critico per esperienze tipografiche più ricche, in quanto hanno un costo. Con i caratteri web tradizionali, ogni stile utilizzato nei nostri design richiede agli utenti di scaricare un file di caratteri separato, il che aumenta la latenza e il tempo di rendering della pagina. La sola inclusione degli stili Normale e Grassetto, più le relative versioni in corsivo, può comportare 500 KB o più di dati del carattere. Questo prima ancora di aver gestito il rendering dei caratteri, i pattern di fallback che dobbiamo utilizzare o gli effetti collaterali indesiderati come FOIT e FOUT.

Molte famiglie di caratteri offrono una gamma molto più ampia di stili, dai pesi Thin a Black, larghezze strette e ampie, una varietà di dettagli stilistici e persino design specifici per le dimensioni (ottimizzati per dimensioni del testo grandi o piccole). Poiché dovresti caricare un nuovo file di carattere per ogni stile (o combinazioni di stili), molti sviluppatori web scelgono di non utilizzare queste funzionalità, riducendo l'esperienza di lettura dei loro utenti.

Anatomia di un carattere variabile

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

Si inizia con uno stile centrale o "predefinito", di solito il "Normale", un design romano verticale con il peso e la larghezza più tipici e più adatto al testo normale. che 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 ed è chiamato "istanza" del carattere variabile. Alcune istanze vengono denominate dallo sviluppatore del carattere, ad esempio la posizione 600 dell'asse Peso si chiama SemiBold.

Il carattere variabile Roboto Flex ha tre stili per l'asse Peso. Lo stile Regular si trova al centro, mentre alle estremità opposte dell'asse si trovano due stili, uno più leggero e l'altro più pesante. Tra queste, puoi scegliere tra 900 istanze:

Lo sviluppatore del carattere può offrire un insieme di assi diversi. Puoi combinarli perché condividono tutti gli stessi stili predefiniti. Roboto ha tre stili in un asse di larghezza: Regular si trova al centro dell'asse, mentre due stili, più stretto e più largo, si trovano a ogni estremità. Questi forniscono tutte le larghezze dello stile Regular e si combinano con l'asse Weight per fornire tutte le larghezze per ogni peso.

Ciò significa che esistono migliaia di stili. Potrebbe sembrare un'esagerazione, ma la qualità dell'esperienza di lettura può essere notevolmente migliorata da questa diversità di stili di carattere. Inoltre, se non comporta una penalizzazione delle prestazioni, gli sviluppatori web possono utilizzare pochi o tutti gli stili che desiderano, a seconda del design.

Corsivo

Il modo in cui il corsivo viene gestito 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 normale e corsivo possono essere interpolati tra loro e l'asse Inclinazione può essere utilizzato per passare dallo stile normale a quello corsivo.

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

Dopo il passaggio al corsivo, gli assi disponibili per l'utente devono essere gli stessi di quelli per il romano, così come il set di caratteri.

È possibile visualizzare anche una funzionalità di sostituzione dei glifi per i singoli glifi e utilizzarla in qualsiasi punto dello spazio di progettazione di un carattere variabile. Ad esempio, un simbolo del dollaro con due barre verticali è più efficace con dimensioni carattere maggiori, mentre con dimensioni carattere più piccole è meglio un design con una sola barra. Quando abbiamo meno pixel per il rendering del glifo, un design a due barre può diventare illeggibile. Per contrastare questo problema, in modo simile all'asse Italico, può verificarsi una sostituzione di un glifo con un altro lungo l'asse Dimensione ottica in un punto deciso dal progettista del tipo di carattere.

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

Definizioni degli assi

Esistono cinque assi registrati, che controllano le funzionalità note e prevedibili del carattere: spessore, larghezza, dimensione ottica, inclinazione e corsivo. Oltre a questi, un carattere può contenere assi personalizzati. Questi possono controllare qualsiasi aspetto del design del carattere che il progettista di caratteri desidera: la dimensione delle grazie, la lunghezza delle svolazzi, l'altezza delle aste ascendenti o la dimensione del punto sulla i.

Anche se gli assi possono controllare la stessa funzionalità, potrebbero utilizzare valori diversi. Ad esempio, nei caratteri variabili Oswald e Hepta Slab è disponibile un solo asse, il peso, ma gli intervalli sono diversi: Oswald ha lo stesso intervallo di prima dell'upgrade a variabile, da 200 a 700, mentre Hepta Slab ha un peso estremo di 1 che arriva fino a 900.

I cinque assi registrati hanno tag di quattro caratteri minuscoli che vengono utilizzati per impostare i relativi valori in CSS:

Poiché lo sviluppatore del carattere definisce quali assi sono disponibili in un carattere variabile e quali valori possono avere, è essenziale scoprire cosa offre ogni carattere. La documentazione del carattere dovrebbe fornire queste informazioni oppure puoi esaminare il carattere utilizzando uno strumento come Wakamai Fondue.

Casi d'uso e vantaggi

L'impostazione dei valori degli assi dipende dal gusto personale e dall'applicazione delle best practice tipografiche. 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, esplorare assi diversi per creare progetti artistici interessanti è entusiasmante, ma per il corpo del testo si rischia di renderlo illeggibile.

Espressione entusiasmante

Questo ottimo esempio di espressione artistica è un'esplorazione del carattere Decovar di Mandy Michael.

Animazione

Esiste anche la possibilità di esplorare l'animazione dei caratteri con i caratteri variabili. Il video precedente è un esempio di utilizzo di assi diversi con il carattere Zycon. Guarda l'esempio di animazione dal vivo su Axis Praxis.

Anicons è il primo carattere iconografico animato a colori al mondo, basato sulle icone Material Design. Anicons è un esperimento che combina due tecnologie di caratteri all'avanguardia: caratteri variabili e caratteri a colori.

Finesse

Roboto Flex e Amstelvar offrono un insieme di "assi parametrici". In questi assi, le lettere vengono scomposte in quattro aspetti fondamentali della forma: forme nere o positive, forme bianche o negative e le dimensioni x e y. Proprio come i colori primari possono essere miscelati con qualsiasi altro colore per regolarlo, questi quattro aspetti possono essere utilizzati per mettere a punto qualsiasi altro asse.

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

Caratteri variabili in CSS

Caricamento dei file di caratteri variabili

I caratteri variabili vengono caricati tramite lo stesso meccanismo @font-face dei caratteri 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 nella sintassi future (format('woff2') tech('variations')) e una nella sintassi deprecata ma supportata dai 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 puntano allo stesso file di caratteri.

2. Intervalli di stile: noterai che forniamo due valori per font-weight e font-stretch. Anziché indicare al browser il peso specifico fornito da questo font (ad esempio font-weight: 500;), ora gli forniamo l'intervallo di pesi supportati dal font. Per Roboto Flex, l'asse del peso varia da 100 a 1000 e il CSS mappa direttamente l'intervallo dell'asse alla proprietà di stile font-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 viene mappato allo stesso modo alla proprietà font-stretch.

Se utilizzi l'API Google Fonts, non dovrai preoccuparti di nulla. Il CSS non solo conterrà i formati e gli intervalli 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 tramite font-weight e l'asse wdth tramite 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 all'interno dell'intervallo di larghezza del carattere:

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

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

Allo stesso modo, 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 obliquo

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 è off e mostrerà lo stile normale, il valore 1 mostrerà il corsivo. A differenza degli altri assi, non c'è transizione. Un valore di 0.5 non ti darà "mezzo corsivo".

L'asse slnt è diverso dal corsivo in quanto non è un nuovo stile, ma inclina semplicemente lo stile normale. Per impostazione predefinita, il valore è 0, il che significa che le forme delle lettere sono verticali. Roboto Flex ha una pendenza 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 ad aprile 2020, il modo esatto per farlo è ancora in fase di definizione. Per il momento, 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 molto piccolo (una nota a piè di pagina di 12 px) o molto grande (un titolo di 80 px). I caratteri possono rispondere a queste modifiche delle dimensioni modificando le forme delle lettere per adattarsi meglio alle dimensioni. Una dimensione piccola potrebbe essere meglio senza dettagli precisi, mentre una dimensione grande potrebbe trarre vantaggio da più dettagli e tratti più sottili.

Per questo asse è stata introdotta una nuova proprietà CSS: font-optical-sizing. Per impostazione predefinita è impostato su auto, il che fa sì che il browser imposti 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 intenzionalmente una dimensione ottica che non corrisponda alla dimensione del carattere. Il seguente CSS farebbe in modo che il testo venga visualizzato con una dimensione grande, ma con 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 vengono mappati a una proprietà CSS esistente, quindi dovrai sempre impostarli tramite font-variation-settings. I tag per gli assi personalizzati sono sempre in maiuscolo per distinguerli dagli assi registrati.

Roboto Flex offre alcuni assi personalizzati e il più importante è Grade (GRAD). Un asse Grade è interessante perché modifica lo spessore del carattere senza modificare le larghezze, quindi le interruzioni di riga non cambiano. Se giochi con un asse del grado, puoi evitare di dover armeggiare con le modifiche all'asse del peso che influisce sulla larghezza complessiva e poi con le modifiche all'asse della larghezza che influisce sul peso complessivo.

GRAD è un asse personalizzato, con un intervallo da -200 a 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 regolarmente di nuovi. L'interfaccia è attualmente pensata per selezionare singole istanze dal carattere: seleziona la variante che preferisci, fai clic su "Seleziona questo stile" e verrà aggiunta all'elemento <link> che recupera CSS e caratteri da Google Fonts.

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

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

Ereditarietà di font-variation-settings

Sebbene tutte le assi registrate saranno presto supportate tramite le proprietà CSS esistenti, per il momento potresti dover fare affidamento a font-variation-settings come fallback. Se il carattere ha assi personalizzati, avrai bisogno anche di font-variation-settings.

Tuttavia, ecco un piccolo inconveniente con font-variation-settings. Ogni proprietà che non imposti esplicitamente verrà automaticamente reimpostata sul valore predefinito. I valori impostati in precedenza non vengono ereditati. Ciò significa che le seguenti azioni non funzioneranno come previsto:

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

Per prima cosa, il browser applicherà font-variation-settings: 'slnt' 10 dalla classe .slanted. Poi, applicherà font-variation-settings: 'GRAD' -200 della classe .grade-light. Tuttavia, in questo modo slnt verrà reimpostato sul valore predefinito di 0. Il risultato sarà un testo con un colore chiaro, ma non inclinato.

Fortunatamente, possiamo aggirare questo 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 vengono applicate in cascata, quindi se un elemento (o uno dei suoi elementi principali) ha impostato slnt su 10, manterrà questo valore, anche se imposti GRAD su un altro valore. Consulta la sezione Correzione dell'ereditarietà dei caratteri variabili per una spiegazione dettagliata di questa tecnica.

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 essere eseguite direttamente su font-variation-settings.

Ottimizzazione del rendimento

I caratteri variabili OpenType ci consentono di archiviare più varianti di una famiglia di caratteri in un unico file di caratteri. Monotype ha condotto un esperimento combinando 12 caratteri di input per generare otto pesi, in tre larghezze, sia per lo stile corsivo che per quello romano. L'archiviazione di 48 singoli caratteri 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 delle dimensioni del carattere se passassi a un carattere variabile con molti assi. Come sempre, dipende dal caso d'uso.

Al contrario, l'animazione del carattere tra le impostazioni può causare problemi di rendimento. Sebbene questo problema migliorerà una volta che il supporto dei caratteri variabili nei browser sarà più maturo, può essere ridotto animando solo i caratteri attualmente sullo schermo. Questo pratico snippet di Dinamo mette in pausa le animazioni negli elementi con la classe vf-animation quando non sono sullo schermo:

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 tuo carattere risponde all'interazione dell'utente, ti consigliamo di limitare o eliminare i rimbalzi degli eventi di input. In questo modo, il browser non eseguirà il rendering delle istanze del carattere variabile che è cambiato così poco rispetto all'istanza precedente che l'occhio umano non vedrebbe la differenza.

Se utilizzi Google Fonts, è consigliabile preconnettersi a https://fonts.gstatic.com, il dominio in cui sono ospitati i caratteri di Google. In questo modo, il browser saprà in anticipo dove recuperare i caratteri quando li incontra nel CSS:

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

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

Scopri altri suggerimenti sul rendimento per il caricamento di Google Fonts in The Fastest Google Fonts.

Fallback e supporto del 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 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, in quanto è l'unico carattere in grassetto disponibile. Quando i caratteri variabili sono supportati, possiamo utilizzare lo spessore più pesante di 1000.

La regola @supports non è supportata da Internet Explorer, pertanto questo browser non mostrerà alcuno stile. Se questo è un problema, puoi sempre utilizzare uno degli hack della vecchia scuola per scegliere come target i browser meno recenti pertinenti.

Se utilizzi l'API Google Fonts, si occuperà di caricare i caratteri appropriati per i browser dei tuoi visitatori. Supponiamo che tu richieda il carattere Oswald con un intervallo di spessore compreso 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 avranno a disposizione ogni peso compreso tra 200 e 700. I browser meno recenti riceveranno singoli caratteri statici per ogni peso. In questo caso, verranno scaricati 6 file di caratteri: uno per il peso 200, uno per il peso 300 e così via.

Grazie

Questo articolo è stato possibile solo grazie all'aiuto delle seguenti persone:

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