Accentsconagua
Share
I caratteri variabili sono, in poche parole, i file di font con impostazioni che è possibile modificare in modo subdolo o che modificano notevolmente l'aspetto del font. Sono destinati a fare una grande differenza per digitare sul web: diamo un'occhiata più da vicino!
Attraverso le impostazioni dei caratteri variabili (che sono chiamati assi) puoi prendere un singolo file di font e creare il tipo di variazioni che in precedenza potevi ottenere solo utilizzando più file di font.
Ad esempio, con una famiglia di font regolari, se si desidera una versione leggera, normale e grassetto, è necessario caricare tre file di font diversi.
Tuttavia, con un carattere variabile che come asse del peso puoi regolare il peso tramite CSS per ottenere gli sguardi chiari, normali e audaci da un singolo file:
.light font-variation-settings: "wght" 66; .regular font-variation-settings: "wght" 84; .bold font-variation-settings: "wght" 154;
Con questo approccio si ottiene lo stesso aspetto tipografico, ma con tempi di caricamento notevolmente migliorati. Dove avresti dovuto in precedenza ridurre al minimo il numero di varianti che carichi in una pagina web, con caratteri variabili che non sono più un problema, hai a portata di mano un vasto numero di varianti:
Protipo variabile su Axis-PraxisPer quanto riguarda la variabilità dello stile, non finisce qui. Non sei limitato al solo tipo di variazioni a cui saresti abituato, come il peso normale o il corsivo.
In primo luogo, qualsiasi asse può avere il suo valore impostato ovunque lungo un intervallo di scorrimento, non solo ai valori impostati. Quindi, se stavi cercando un peso tra il normale e il grassetto, è perfettamente possibile. Oppure se vuoi che il tuo corsivo sia leggermente più piccolo o se desideri che le larghezze dei caratteri siano leggermente superiori allo standard, il potere è nelle tue mani. Metti a punto le tue impostazioni esattamente di ciò che ti serve.
In secondo luogo, i caratteri possono utilizzare qualsiasi asse a cui il designer si preoccupa di pensare! Dai un'occhiata alle impostazioni disponibili per Bitcount:
Impostazioni di Bitcount su Axis-PraxisA seconda del font, troverai assi che ti consentono di controllare ombre esterne, spazi vuoti o terminali di caratteri, le opzioni sono illimitate.
I caratteri variabili sembrano avere un grande impatto sul modo in cui lavoriamo come web designer. Ci permetteranno di ottenere una maggiore diversità e controllo, riducendo allo stesso tempo le nostre velocità di carico. Ci permetteranno anche di espanderci nella nostra creatività tipografica in modi che prima erano tecnicamente impossibili.
Per iniziare con i caratteri variabili abbiamo messo insieme un corso che ti guida attraverso tutti gli aspetti più importanti del loro funzionamento, ti mette a punto con gli strumenti di cui avrai bisogno, ti guida attraverso la codifica del CSS che controlla i caratteri variabili e mostra come creare fallback per i browser che non dispongono ancora di supporto.
