Introduzione ai caratteri variabili sul Web

Una nuova specifica dei caratteri che può ridurre notevolmente le dimensioni dei file dei caratteri

In questo articolo, vedremo quali sono i caratteri variabili, i vantaggi che offrono e come possiamo utilizzarli nel nostro lavoro. Prima vediamo come funziona la tipografia sul web e quali sono le innovazioni dei caratteri variabili.

Compatibilità del browser

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

Introduzione

I termini "fonte" e "tipo di carattere" vengono spesso utilizzati in modo intercambiabile dagli sviluppatori. Tuttavia, c'è una differenza: un carattere è il design visivo di base che può esistere in molte tecnologie di composizione tipografica diverse, mentre il carattere è una di queste implementazioni, in un formato file digitale. In altre parole, un carattere è ciò che vedi e il carattere è ciò che utilizzi.

Un altro concetto che viene spesso trascurato è la distinzione tra stile e famiglia. Uno stile è un carattere unico e specifico, ad esempio il corsivo grassetto, mentre una famiglia rappresenta 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.

Una composizione campione e un elenco di diversi stili della famiglia Roboto
A sinistra: un esemplare della famiglia di caratteri Roboto. A destra: stili con nome all'interno della famiglia.

Le sfide per designer e sviluppatore

Quando un designer crea un progetto di stampa, deve rispettare alcuni limiti, come le dimensioni fisiche del layout di pagina, il numero di colori utilizzabili (determinato dal tipo di macchina da stampa che verrà utilizzata) e così via. Ma possono usare tutti gli stili di carattere che vogliono. Ciò significa che la tipografia della stampa cartacea è spesso ricca e sofisticata, e l'esperienza di lettura è davvero piacevole. Pensa all'ultima volta che ti è piaciuto sfogliare un'ottima rivista.

Web designer e sviluppatori hanno vincoli diversi rispetto ai progettisti di stampa, uno dei quali è importante per i costi della larghezza di banda associati ai nostri progetti. Questo è stato un punto di svolta per esperienze tipografiche più complete, dal momento che avere un costo. Con i caratteri web tradizionali, ogni stile utilizzato nei nostri progetti richiede agli utenti di scaricare un file dei caratteri separato, che aumenta la latenza e i tempi di rendering della pagina. Solo l'inclusione degli stili Normale e Grassetto e delle relative controparti in corsivo può includere almeno 500 kB di dati dei caratteri. Questo è ancor prima che abbiamo esaminato il modo in cui vengono visualizzati i 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, da Spessori sottili a Nero, larghezze strette e ampie, una varietà di dettagli stilistici e persino design specifici per dimensioni (ottimizzati per testo di grandi o piccole dimensioni). Poiché dovresti caricare un nuovo file di caratteri per ogni stile (o combinazioni di stili), molti sviluppatori web scelgono di non utilizzare queste funzionalità, riducendo l'esperienza di lettura dei loro utenti.

Struttura di un carattere variabile

I caratteri variabili rispondono a queste sfide, pacchettizzando gli stili in un unico file.

Questo sistema inizia con uno stile centrale o "predefinito", di solito il "Normale", ovvero un design romano in posizione verticale con peso e larghezza tipici più adatti per il testo normale. Questo viene poi collegato ad altri stili in un intervallo continuo, chiamato "asse". L'asse più comune è Ponderazione, che consente di collegare lo stile predefinito tramite uno stile 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 del peso è SemiBold.

Il carattere variabile Roboto Flex ha tre stili per l'asse Peso. Lo stile regolare è al centro e alle estremità opposte dell'asse ci sono due stili, uno più leggero e l'altro più pesante. Tra questi, puoi scegliere tra 900 istanze:

La lettera "A" mostrata con pesi diversi
Sopra: anatomia illustrata dell'asse del peso per il tipo di carattere Roboto.

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

Roboto Flex in combinazioni casuali di larghezza e peso

Ciò significa che ci sono migliaia di stili. Può sembrare un eccessivo, ma la qualità dell'esperienza di lettura può essere notevolmente migliorata da questa diversità di stili di tipo. Se non hanno un impatto negativo sulle prestazioni, gli sviluppatori web possono usare pochi o tutti gli stili che vogliono. A seconda del loro design.

Corsivo

Il modo in cui il corsivo viene gestito in caratteri variabili è interessante, poiché esistono due approcci diversi. I caratteri tipografici come H esaminare o Roboto hanno contorni compatibili con l'interpolazione, pertanto i loro stili romani e corsivi possono essere interpolati tra e l'asse Slant può essere utilizzato per passare da romano a corsivo.

Altri caratteri tipografici (come Garamond, Baskerville o Bodoni) presentano contorni glifi romani e in corsivo non compatibili con l'interpolazione. Ad esempio, i contorni che in genere definiscono una "n" minuscola in caratteri latinoamericani non corrispondono ai contorni utilizzati per definire una "n" in corsivo minuscolo. Invece di interpolare un contorno all'altro, l'asse Corsivo passa dai contorni romani a quelli in corsivo.

Esempio di assi di peso per il tipo di carattere Amstelvar
Contorni "n" di Amstelvar in corsivo (12 punti, peso regolare, larghezza normale) e in romano. Immagine fornita da David Berlow, type designer e tipografo presso Font Bureau.

Dopo il passaggio al Corsivo, gli assi a disposizione dell'utente dovrebbero essere gli stessi di quelli della versione romana, così come il set di caratteri dovrebbe essere lo stesso.

Inoltre, è possibile visualizzare una funzionalità di sostituzione dei glifi per singoli glifi e utilizzarla ovunque nello spazio di progettazione di un carattere variabile. Ad esempio, il design di un simbolo del dollaro con due barre verticali funziona meglio in punti di dimensioni maggiori, mentre per punti più piccoli è 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, come l'asse Corsivo, una sostituzione del glifo di un glifo con un altro può avvenire lungo l'asse Dimensioni ottiche in un punto deciso dal progettista dei tipi.

In sintesi, laddove i contorni lo consentono, i designer dei tipi possono creare caratteri che interpolano tra vari stili in uno spazio di progettazione multidimensionale. Questo ti offre un controllo granulare sulla tipografia e un grande potere.

Definizioni degli assi

Esistono cinque assi registrati, che controllano caratteristiche note e prevedibili del carattere: spessore, larghezza, dimensione ottica, inclinazione e corsivo. Oltre a questi, un carattere può contenere assi personalizzati. Queste colonne consentono di controllare qualsiasi aspetto del design del carattere desiderato dal designer del tipo: le dimensioni dei Serif, la lunghezza degli swash, l'altezza degli ascensori o la dimensione del punto sulla i.

Anche se gli assi possono controllare la stessa funzionalità, potrebbero utilizzare valori diversi. Ad esempio, per i caratteri delle 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 un peso estremo dei capelli pari a 1 che arriva fino a 900.

I cinque assi registrati hanno tag minuscoli di 4 caratteri utilizzati per impostare i propri valori in CSS:

Nomi degli assi e valori CSS
Ponderazione wght
Larghezza wdth
Bocca inclinata slnt
Dimensione ottica opsz
Corsivo ital

Poiché lo sviluppatore di caratteri definisce quali assi sono disponibili in un carattere variabile e quali valori possono avere, è essenziale capire cosa offre ogni carattere. Questa informazione dovrebbe essere fornita dalla documentazione del carattere. In alternativa, puoi controllare il carattere utilizzando uno strumento come Wakamai Fondue.

Casi d'uso e vantaggi

La definizione dei valori degli assi dipende dal gusto personale e dall'applicazione delle best practice tipografiche. Ogni nuova tecnologia comporta un possibile uso improprio e le impostazioni eccessivamente artistiche o esplorative potrebbero ridurre la leggibilità del testo effettivo. Per quanto riguarda i titoli, esplorare assi diversi per creare ottimi design artistici è entusiasmante, ma per il corpo del testo questo rischia di rendere il testo illeggibile.

Espressione emozionante

Esempio di erba di Mandy Michael

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

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

Animazione

Typeface Zycon, progettato per le animazioni di David Berlow, type designer e tipografo presso Font Bureau.

C'è anche la possibilità di esplorare i personaggi animati con caratteri variabili. Qui sopra trovi un esempio di assi diversi utilizzati con il carattere Zycon. Guarda l'esempio di animazione dal vivo su Axis Praxis.

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

Alcuni esempi di animazioni al passaggio del mouse dal carattere icona colore di Anicon

Finezza

Amstelvar utilizza piccoli frammenti di XTRA in direzioni opposte in modo che le larghezze delle parole vengano uniformate

Roboto Flex e Amstelvar offrono un set di "assi parametrici". In questi assi, le lettere sono scomposte in quattro aspetti fondamentali della forma: forme nere o positive, bianche o negative e le dimensioni x e y. Allo stesso modo in cui i colori primari possono essere combinati con altri colori per regolarli, questi quattro aspetti possono essere utilizzati per ottimizzare qualsiasi altro asse.

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

Caratteri variabili in CSS

Caricamento dei file di caratteri variabili in corso...

I caratteri variabili vengono caricati mediante 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 caratteri variabili, quindi aggiungiamo le descrizioni format e tech: una volta nella sintassi futura (format('woff2') tech('variations')), una volta nella sintassi deprecata ma supportata tra i browser (format('woff2-variations')). Se il browser supporta caratteri variabili e supporta la sintassi successiva, verrà utilizzata la prima dichiarazione. Se supporta i caratteri variabili e la sintassi corrente, utilizzerà la seconda dichiarazione. Entrambi puntano allo stesso file dei caratteri.

2. Intervalli di stile: stiamo fornendo due valori per font-weight e font-stretch. Invece di indicare al browser lo spessore specifico fornito da questo carattere (ad esempio font-weight: 500;), ora gli offriamo l'intervallo di ponderazioni supportato dal carattere. Per Roboto Flex, l'asse del peso va da 100 a 1000 e 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 della larghezza è mappato allo stesso modo alla proprietà font-stretch.

Se utilizzi l'API Google Fonts, questo non sarà più un problema. Non solo il CSS conterrà gli intervalli e i formati di origine appropriati, ma Google Fonts invia anche caratteri di riserva statici nel caso in cui i caratteri variabili non siano supportati.

Utilizzare ponderazioni e larghezze

Attualmente, 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, dovresti impostare font-weight 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;
}
Modifica dell'asse dei pesi di Roboto Flex dal minimo al massimo.

Allo stesso modo, possiamo impostare font-stretch con le parole chiave (condensed, ultra-expanded) o con valori percentuali:

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

.super-wide {
  font-stretch: 151%;
}
Modifica dell'asse della larghezza di Roboto Flex dal minimo al massimo.

Uso di corsivo e obliqui

L'asse ital è destinato ai caratteri che contengono sia uno stile regolare sia uno stile corsivo. L'asse è pensato come opzione on/off: il valore 0 è disattivato e mostra lo stile regolare, il valore 1 mostra il corsivo. A differenza degli altri assi, non c'è transizione. Un valore pari a 0.5 non restituirà il "corsivo mezzo".

L'asse slnt è diverso dal corsivo in quanto non è un nuovo stile, ma inclina solo lo stile normale. Per impostazione predefinita, il valore è 0, che indica le forme predefinite con le lettere verticali. Roboto Flex ha un'inclinazione massima di -10 gradi, il che significa che le lettere si piegheranno verso destra quando vanno da 0 a -10.

Sarebbe intuitivo impostare questo asse tramite la proprietà font-style, ma ad aprile 2020, come farlo esattamente è in fase di elaborazione. Per il momento, dovresti 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;
}
Modifica dell'asse inclinato di Roboto Flex dal minimo al massimo.

Utilizzo di dimensioni ottiche

Un carattere può essere reso molto piccolo (una nota a piè di pagina da 12 px) o molto grande (un titolo da 80 px). I caratteri possono rispondere a queste variazioni di dimensioni modificando le forme delle lettere per adattarle meglio alle dimensioni. Una dimensione piccola potrebbe essere preferibile senza dettagli più esigenti, mentre una taglia grande potrebbe trarre vantaggio da maggiori dettagli e tratti più sottili.

La lettera "a" mostrata con diverse dimensioni ottiche
La lettera "a" in Roboto Flex con dimensioni in pixel diverse e poi scalata per ottenere le stesse dimensioni, mostra le differenze nel design. Fai una prova su Codepen

È stata introdotta una nuova proprietà CSS per questo asse: font-optical-sizing. Il valore predefinito è auto, perciò il browser imposta il valore dell'asse in base a font-size. Ciò significa che il browser sceglierà automaticamente la dimensione ottica migliore, ma se vuoi disattivarla, 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 corrisponde a quella del carattere. Il codice CSS seguente fa sì che il testo venga visualizzato in grandi dimensioni, ma con dimensioni ottiche 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, quelli 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 è il voto (GRAD). Un asse dei voti è interessante, in quanto modifica lo spessore del carattere senza modificare la larghezza, in modo che le interruzioni di riga non cambino. Utilizzando un asse dei voti, puoi evitare di dover modificare l'asse del peso che influiscono sulla larghezza complessiva per poi modificare l'asse della larghezza che incide sul peso complessivo.

Modifica dell'asse del livello di Roboto Flex dal minimo al massimo.

Poiché 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 ha aggiunti di nuovi regolarmente. L'interfaccia attualmente punta a scegliere singole istanze del carattere: se selezioni la variante desiderata, fai clic su "Seleziona questo stile" e questa 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 nell'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 fornire gli URL più recenti per tutti i caratteri delle variabili.

Eredità delle impostazioni di variante dei caratteri

Sebbene tutti gli assi registrati siano presto supportati tramite le proprietà CSS esistenti, per il momento potresti dover utilizzare font-variation-settings come metodo di riserva. Se il carattere ha assi personalizzati, ti servirà anche font-variation-settings.

Tuttavia, ecco un piccolo trucco con font-variation-settings. Ogni proprietà non impostata esplicitamente verrà reimpostata automaticamente sui valori predefiniti. 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à il criterio font-variation-settings: 'slnt' 10 dal corso .slanted. Verrà quindi applicato font-variation-settings: 'GRAD' -200 dal corso .grade-light. Tuttavia, verrà ripristinato il valore predefinito di slnt, ovvero 0. Il risultato sarà il testo in stato chiaro, ma non inclinato.

Fortunatamente, possiamo risolvere 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 sono a cascata; pertanto, se un elemento (o uno dei suoi elementi 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), pertanto qualcosa di simile 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 della variabile OpenType consentono di memorizzare più varianti di una famiglia di caratteri in un unico file di caratteri. Monotype ha eseguito un esperimento combinando 12 caratteri di input per generare otto ponderazioni, in tre larghezze, per lo stile corsivo e romano. L'archiviazione di 48 caratteri singoli in un singolo file di caratteri variabili ha comportato una riduzione dell'88% delle dimensioni dei file.

Tuttavia, se utilizzi un solo carattere come Roboto Regular e nient'altro, potresti non notare un guadagno 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 può causare problemi di rendimento. Anche se questo miglioramento migliorerà una volta che il supporto dei caratteri variabili nei browser sarà più sviluppato, il problema può essere leggermente 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 carattere risponde all'interazione dell'utente, è consigliabile limitare o rimuovere il rimbalzo degli eventi di input. Ciò impedirà al browser di eseguire il rendering delle 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 precollegarti a https://fonts.gstatic.com, il dominio in cui sono ospitati i caratteri Google. In questo modo il browser saprà subito dove trovare i caratteri nel CSS:

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

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

Puoi trovare altri suggerimenti sulle prestazioni per il caricamento di Google Fonts nella pagina The Fastest Google Fonts.

Funzioni di riserva 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 miglioramenti progressivi:

/* 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. Se sono supportati i caratteri variabili, possiamo utilizzare il limite massimo di caratteri, ovvero 1000.

La regola @supports non è supportata da Internet Explorer, pertanto questo browser non mostrerà alcun stile. Se questo è un problema, puoi sempre utilizzare uno dei programmi di pirateria informatica per scegliere come target i browser meno recenti pertinenti.

Se usi l'API di Google Fonts, questa si occuperà di caricare i caratteri appropriati per i browser dei tuoi visitatori. Supponiamo che tu richieda il carattere Oswald in un intervallo di peso compreso tra 200 e 700, ad esempio:

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

I browser moderni in grado di gestire caratteri variabili avranno il carattere variabile e avranno spessore comprese tra 200 e 700 disponibili. Nei browser meno recenti verranno pubblicati singoli caratteri statici per ogni peso. In questo caso, scaricheranno 6 file dei caratteri: uno per il peso 200, uno per il peso 300 e così via.

Grazie per aver deciso

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

Immagine hero di Bruno Martins su Unsplash.