Share
I caratteri variabili sono stati sviluppati come lo sforzo congiunto delle quattro più grandi aziende tecnologiche coinvolte nel type design: Apple, Google, Microsoft e Adobe. Come suggerisce il nome, i caratteri variabili consentono ai progettisti di derivare un numero illimitato di varianti di carattere dallo stesso file di font. In questo modo diventa possibile regolare il tipo di carattere su diversi dispositivi, finestre, orientamenti e altri vincoli di progettazione.
I caratteri variabili riducono significativamente i limiti dei formati di carattere correnti. I caratteri web di oggi sono inflessibili e non si adattano molto bene; ci forniscono solo alcuni stili fissi con nomi come "Light", "Bold" o "Extra Bold". Esistono anche caratteri tipografici con una sola variante di peso o inclinazione. Con i caratteri variabili, tuttavia, abbiamo accesso a una flessibilità infinita di peso, inclinazione, altezza x, lastre, arrotondamenti e altri attributi tipografici.
Meglio ancora, i caratteri variabili migliorano le prestazioni. I font Web come li conosciamo richiedono che ogni variante di carattere sia memorizzata in un file separato. Ad esempio, questo è il modo in cui appare la cartella del carattere Web di Roboto:
Contenuto della cartella dei caratteri Web di RobotoI caratteri variabili utilizzano un singolo file di font che il browser deve solo caricare una volta. Dopo essere stato caricato, può servire tutte le varianti da quel solo binario.
Quindi, ecco un breve confronto:
Come puoi già immaginare, le nostre opzioni tipografiche crescono incredibilmente con caratteri variabili.
Quindi quale formato di file usano i caratteri variabili? Secondo i documenti ufficiali:
"I font OpenType possono avere l'estensione .OTF o .TTF, a seconda del tipo di profili nel font e del desiderio del creatore di compatibilità su sistemi senza supporto OpenType nativo."
Per essere completamente precisi, sono stati introdotti caratteri variabili nella versione 1.8 delle specifiche del file di font OpenType. OpenType è un'estensione del formato font TrueType, quindi i font variabili sono disponibili come entrambi .otf o .ttf File.
Le nuove specifiche del file dei font OpenType sono dotate di una nuova tecnologia chiamata OpenType Font Variations che ci consente di interpolare il font lungo numerosi assi di design, fino a 64.000 secondo il Blog di Adobe Typekit.
Le specifiche OpenType 1.8 definiscono cinque tag asse registrati:
Accentsconagua
Inoltre, i progettisti di tipi possono anche definire assi personalizzati insieme ai propri tag di quattro caratteri nella tabella "nome" del file di font.
Di seguito, puoi vedere una grande illustrazione di come funzionano gli assi del design (dall'articolo di John Hudson su Medium.com, definito da Typekit come l'annuncio non ufficiale dei caratteri variabili). Dimostra un carattere variabile a tre assi con assi di peso, larghezza e dimensione ottica:
John HudsonIl glifo rosso nel mezzo rappresenta l'insieme di profili memorizzati nel carattere, i glifi verdi rappresentano gli estremi dei tre assi e i glifi arancioni rappresentano le posizioni d'angolo.
L'intero cubo rappresenta lo spazio di progettazione a cui abbiamo accesso se utilizziamo questo carattere variabile a tre assi. È un cubo solo perché il font ha tre dimensioni (peso, larghezza, dimensione ottica). Con meno assi, avremmo spostato verso il basso verso un rettangolo (2 assi) o una linea (1 asse) e con più assi, avremmo spostato verso l'alto in un iperspazio multidimensionale.
E, naturalmente, un carattere variabile a 3 assi della vita reale non sarebbe necessariamente un cubo ma più probabilmente un parallelepipedo rettangolare, poiché i diversi assi nella maggior parte dei casi non hanno la stessa lunghezza.
I caratteri variabili consentono ancora ai progettisti di tipi di definire varianti di font specifiche di istanze denominate tra il numero illimitato di opzioni. Ad esempio, il Prototipo di font variabile di Adobe contiene due assi (peso e contrasto) e otto istanze nominate (Extra Light, Light, Regular, Semibold, Bold, Black, Black Medium Contrast, Black High Contrast).
Le istanze con nome sono più importanti se si desidera utilizzare un carattere variabile con programmi di progettazione come Adobe Illustrator. Sul Web, possiamo facilmente generare qualsiasi istanza (denominata o non denominata) con CSS (ad esempio nel font Adobe Variable, l'istanza Extra Light prende il valore minimo di entrambi gli assi di peso e contrasto).
Possiamo aggiungere caratteri variabili a un sito Web utilizzando la regola @ font-face nella parte superiore del file CSS.
Ad esempio, possiamo aggiungere il carattere variabile Avenir Next con la seguente regola CSS:
@ font-face font-family: "Avenir Next Variable"; src: url ("AvenirNext_Variable.ttf") format ("truetype"); È possibile trovare più caratteri variabili sul sito Web di Axis Praxis (ha anche un parco giochi per caratteri variabili), sulle pagine GitHub di diverse società di progettazione di tipi (ad esempio MonoType, Type Network) e Typekit ha anche iniziato a pubblicare le versioni di carattere variabile delle loro famiglie Adobe Originals più popolari.
Nota: non tutti i font OpenType che troverai sul web sono font variabili (sono stati introdotti solo con la versione 1.8).
Per definire le variazioni dei caratteri, possiamo usare il font-variazione-settings Proprietà CSS introdotta con il Modulo Font CSS Livello 4. Questa è una proprietà di basso livello che ci consente di controllare i caratteri variabili specificando un valore per ciascun asse.
Il carattere variabile di Avenir Next contiene due assi di design: peso e larghezza: entrambi sono assi registrati. Avenir Next ha anche otto istanze nominate (Regular, Medium, Bold, Heavy, Condensed, Medium Condensed, Bold Condensed, Heavy Condensed).
Avenir Next Bold CondensedIl file CSS completo (appartenente a una variazione di font senza nome casuale) ha il seguente aspetto:
body font-family: "Avenir Next Variable"; color: rgb (0, 0, 0); font-size: 148px; impostazioni di variazione dei font: 'wght' 631.164, 'wdth' 88.6799;
Possiamo usare qualsiasi valore (anche numeri mobili) per gli assi tra i valori minimo e massimo. Nel caso di Avenir Next, possiamo usare l'intervallo [400, 900] per il peso e l'intervallo [75, 100] per l'asse della larghezza.
Dove trovare le gamme? I file dei font contengono le tabelle di variazione dei font (fvar) che contengono i dati necessari. Tuttavia, per accedere a tali informazioni, è necessario visualizzare il contenuto del file di font con uno strumento come FontView. A volte la documentazione del font contiene gli intervalli, ma sfortunatamente non è sempre così. La buona notizia è che il sito Web Axis Praxis contiene i valori min-max per tutti i caratteri variabili che presenta.
Decovar è uno dei tipi di carattere variabili più versatili attualmente esistenti. Lo puoi trovare su Axis Praxis, su GitHub, e ha anche una pagina demo sul sito web di TypeNetwork. Decovar contiene uno registrato (peso) e quattordici assi personalizzati e ha anche diciassette istanze denominate.
Dai documenti GitHub di Decovar, ecco alcune varianti che possiamo ottenere con questo carattere variabile a 15 assi:
Il CSS che dobbiamo usare è simile all'esempio precedente. Qui, dobbiamo definire tutti i quindici assi (in linea, tranciato, lastra arrotondata, strisce, terminale senza fine, scheletro in linea, terminale in linea aperto, terminale in linea, vite senza fine, peso, svasato, arrotondato, scheletro del verme, lastra, biforcata).
div font-family: Decovar; colore bianco; background-color: rgb (0, 162, 215); font-size: 157.12px; allineamento del testo: a sinistra; padding-top: 20px; impostazioni di modifica dei font: "INLN" 285.094, "TSHR" 346.594, "TRSB" 786.377, "SSTR" 84.268, "TWRM" 200, "SINL" 84.268, "TOIL" 0, "TINL" 91.983, "WORM" 0 , 'wght' 400, 'TFLR' 0, 'TRND' 0, 'SWRM' 0, 'TSLB' 277.155, 'TBIF' 0;
Nota: dobbiamo specificare un valore per tutti gli assi nel font-variazione-settings proprietà, anche quelli che non vogliamo usare.
In caso di Decovar, possiamo usare 0 come valore per gli assi a cui non siamo interessati; questi saranno resi con il valore predefinito. Tuttavia, questo non è sempre il caso, poiché dipende dagli intervalli che il carattere utilizza per i diversi assi. Decovar è facile, poiché utilizza un intervallo 0-1000 per tutti gli assi e 0 è il valore predefinito per tutti.
Puoi generare simili font-variazione-settings dichiarazioni con Axis Praxis, non è necessario calcolare i valori da soli. Il CSS sopra genera la seguente variante di carattere:
Variante del carattere personalizzato DecovarIl font-variazione-settings la proprietà è una proprietà di basso livello e, secondo le raccomandazioni del W3C, dovrebbe essere utilizzata solo se non sono disponibili altri metodi. Cosa significa esattamente??
In base alle specifiche CSS 4, in futuro potremo controllare gli assi registrati con proprietà CSS di livello superiore, ovvero:
font-weight (controllerà il WGHT asse)font-stretch (controllerà il sgombero asse)stile del font (controllerà il slnt e ital assi)font-ottico-dimensionamento (controllerà il opsz asse)Le prime tre proprietà esistono sin dai CSS2, tuttavia le specifiche CSS4 ne ampliano l'utilizzo. Saremo in grado di utilizzarli non solo con parole chiave predefinite (ad es. normale o grassetto per font-weight) o numeri rotondi (ad es. 400, 600, 800, ecc.), ma anche con tutti i numeri su una scala predefinita (ad esempio, font-weight sarà compreso tra 1 e 1000 e font-stretch sarà compreso tra il 50% e il 200%).
Queste caratteristiche sono ancora in fase sperimentale, però. Quindi per ora, la cosa ragionevole è continuare a usare font-variazione-settings, come al momento questa è la proprietà più stabile per accedere agli assi dei caratteri variabili.
Poiché i caratteri variabili sono ancora molto nuovi, il supporto del browser non è ancora perfetto. Le ultime versioni di Chrome e Safari le supportano già, ma Edge e Firefox sono ancora in ritardo (tuttavia i font variabili sono già disponibili in Firefox Nightly e Firefox Developer Edition). Dalla versione di ottobre 2017, Photoshop e Illustrator supportano anche caratteri variabili.
Possiamo aspettarci che i caratteri variabili portino cambiamenti incredibili nel mondo della tipografia web. Dato che sta ottenendo sempre più supporto, è ora di fare un tuffo nell'apprendimento e nella sperimentazione. Controlla le seguenti risorse:
