I font variabili sono una tecnologia di font altamente personalizzabili. Il pannello dei font variabili di Adobe Fonts consente di regolare l'aspetto dei font variabili e di scegliere lo stile migliore per i tuoi progetti. Le app Creative Cloud che al momento supportano i font variabili sono Photoshop, InDesign e Illustrator.
Cosa sono i font variabili?
I font variabili utilizzano un file per memorizzare numerosi stili di font, al contrario dei font statici che usano file separati per ogni stile disponibile. Consentono di specificare un valore per ciascun asse di progettazione di un font, offrendo il controllo sull'aspetto del font, caratteristica non fornita dai font statici.
I font statici tradizionali richiedono di aggiungere o installare ogni singolo stile che desideri utilizzare nel tuo progetto. Ad esempio, con Acumin Pro, puoi aggiungere Acumin Pro Regular, Acumin Pro Italic e qualsiasi altro stile a cui desideri accedere. La variabile Acumin contiene tutti gli stili di Acumin, quindi dovrai aggiungere solo un font.
Ogni configurazione di un font variabile è denominata istanza. Le istanze sono stili predefiniti creati per un accesso rapido. Il pannello dei font variabili nell'immagine in alto mostra la variabile Acumin impostata su un'istanza predefinita, un'impostazione predeterminata utilizzata per tutti i font variabili prima della personalizzazione.
Più in basso nel pannello sono presenti i controlli degli assi. Gli assi rappresentano una gamma continua di variazioni di stile. Un font variabile può contenere più assi. Puoi personalizzare un asse in base a qualsiasi numero compreso nell'intervallo minimo o massimo. Nell'esempio della variabile Acumin, gli assi sono Inclinazione, Spessore e Larghezza.
Come utilizzare i font variabili sul sito Web di Adobe Fonts
La pagina dei dettagli di ogni famiglia di font variabili sul sito Web di Adobe Fonts include uno strumento di testo interattivo e un pannello che consente di personalizzare il font in base allo stile desiderato. Puoi scegliere un'istanza predefinita per utilizzarla rapidamente o crearne una personalizzata.


Aggiungere un font variabile a un progetto Web
Per salvare un font variabile nel tuo progetto Web, seleziona Aggiungi al progetto Web sopra il pannello del font variabile nella pagina della famiglia. Verifica che sia selezionato il font corretto; alcuni font variabili includono font aggiuntivi all'interno della famiglia.
Seleziona Copia CSS nella parte inferiore del pannello per selezionare il codice corrispondente all'istanza personalizzata creata. Se non sono disponibili impostazioni personalizzate, il codice rifletterà un'istanza predefinita.
Dopo aver personalizzato un font variabile, puoi aggiungere l'URL ai segnalibri del browser per rivedere le ultime impostazioni personalizzate in un secondo momento oppure puoi selezionare Copia URL per condividere o salvare la tua configurazione.
Font variabili utilizzati
La natura personalizzabile dei font variabili li rende perfetti per una serie di applicazioni, dalla grafica digitale alla confezione dei prodotti o anche al rivestimento di veicoli. Regolando la larghezza, è possibile disporre un font in modo che sia leggibile anche su superfici irregolari.
Le impostazioni dei font variabili creativi possono far emergere la personalità di un marchio o gestire titoli lunghi, che spesso non sono adatti alla grafica delle didascalie.
Gli assi di inclinazione, spessore e larghezza vengono utilizzati per regolare la variabile Obviously per adattarsi ai pannelli degli sportelli dell'automobile. La variabile Acumin viene utilizzata per i titoli lunghi delle didascalie.
È possibile utilizzare i font variabili per creare una gerarchia visiva su cartelloni pubblicitari e poster o per adattare il font variabile a piccoli spazi e forme insolite nel design di una confezione.
I font variabili sono ideali per creare un'interruzione di riga migliore nella giustificazione del paragrafo. L'asse della larghezza, in particolare, consente una spaziatura delle parole più efficiente e visivamente gradevole.
Le caratteristiche dei font variabili li rendono ideali per la progettazione Web dinamica. È possibile utilizzare un font variabile per regolare le dimensioni dello schermo da piccole a grandi, contribuendo a mantenere una dimensione minima dei file e a ridurre i tempi di caricamento.
I frammenti di codice possono essere aggiunti al file CSS, in modo che i font variabili si animino, rispondano al suono, alla luce ambientale o al tema del computer. Gli assi dei font variabili semplificano inoltre l'animazione dei font variabili.


I progettisti di caratteri cercano sempre nuovi modi per interagire e innovare, utilizzando questa tecnologia di font.