Usare i font variabili da Adobe Fonts

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.

 

Sfoglia i font variabili in Adobe Fonts

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. 

Interfaccia utente grafica, applicationDescription generata automaticamente
Acumin Pro, un font statico con oltre 18 stili individuali, che devono essere aggiunti per essere utilizzati. In alternativa, la variabile Acumin include gli assi Inclinazione, Spessore e Larghezza per la personalizzazione con l'aggiunta di 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.  

Interfaccia utente grafica, applicationDescription generata automaticamente

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.

Interfaccia utente grafica, applicationDescription generata automaticamente

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.

Interfaccia utente grafica, applicationDescription generata automaticamente

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.  

Una persona che sorride alla fotocamera

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. 

Un cartellone pubblicitario con una città sullo sfondo
La variabile Acumin utilizzata per creare una gerarchia visiva

Un'immagine contenente testo, articoli da bagno, lozioni
Gli assi Spessore e Dimensione ottica della variabile Minion vengono utilizzati per creare una gerarchia visiva

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.  

TextDescription
L'asse della larghezza della variabile Kepler viene utilizzato per ridurre gli spazi visibili nella giustificazione del paragrafo. I rettangoli rossi mostrano la quantità di spazio ridotta all'interno di ogni frase.

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. 

Un'immagine contenente testo, jack, schermata
I font variabili sono contenuti in un file di font che li rende più veloci da caricare sul Web

Diagramma, textDescription generato automaticamente
I font variabili possono essere utilizzati sui siti Web per regolare il tipo a seconda delle dimensioni dello schermo

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. 

Un'immagine contenente una forma
Il movimento dei font variabili attraverso l'intervallo di valori di un asse consente l'animazione

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


Risorse correlate 

Ottieni supporto in modo più facile e veloce

Nuovo utente?