Migrazione ai caratteri variabili

1. Introduzione

Ultimo aggiornamento: 05/11/22

Sfrutta la variabilità dinamica nella tua UI con i caratteri variabili, che consentiranno una maggiore reattività in layout, temi e accessibilità, rendendo al contempo le tue app più veloci.

Obiettivi didattici

Cosa sono i caratteri variabili.
Come puoi personalizzare il carattere.
Come applicare i caratteri variabili ai tuoi progetti.
Come implementare i caratteri variabili con l'API Google Fonts e in CSS.

Prerequisiti

Per questo lab ci baseremo su alcuni concetti di progettazione fondamentali.

Conoscenza delle scale tipografiche.
Conoscenza di Figma.
Conoscenza di base di HTML e CSS.

Che cosa ti serve

Account Figma
File Figma designlab
Editor di codice preferito per il web

2. Inizia

Configurazione

Per iniziare, devi accedere al file Figma di Designlab. Tutto ciò che ti serve per il lab è contenuto nel file Figma. Puoi scaricare e importare il file o duplicarlo dalla community di Figma.

Per prima cosa, accedi a Figma o crea un account.

Duplicare dalla community di Figma

Vai al file Migrazione ai caratteri variabili o cerca Migrazione ai caratteri variabili all'interno della community di Figma. Fai clic su Duplica nell'angolo in alto a destra per copiare il file nei tuoi file.

Layout del file

Mentre esamini il file, noterai che è autonomo e inizia con un'introduzione. Ogni sezione è suddivisa in una riga di tavole da disegno collegate tra loro, con alcuni concetti di base per la sezione seguiti da esercizi. Le sezioni e gli esercizi si basano l'uno sull'altro e devono essere completati in sequenza.

Questo codelab ti guida attraverso questi concetti ed esercizi in modo più dettagliato. Segui il codelab per scoprire di più sulle nuove funzionalità di Material You.

A partire dalla tavola da disegno Intro, sono presenti pulsanti che collegano le tavole da disegno in ordine. Per accedere al link, fai clic sul pulsante.

Controllare la presenza di caratteri variabili

Prima di iniziare, dobbiamo assicurarci di avere un carattere variabile. Questo file utilizza Roboto Flex, già disponibile in Figma, oppure puoi scaricarlo da fonts.google.com.

3. Che cosa sono i caratteri variabili?

I caratteri variabili sono un nuovo formato innovativo che consente agli utenti di controllare il tipo e le icone. Roboto Serif e Roboto Flex sono nuovi caratteri tipografici creati appositamente per la tecnologia dei caratteri variabili, ognuno con un'ampia gamma di assi.

Espressione estetica e assi

I designer non sono più limitati a stili predefiniti meno recenti, come normale, grassetto, corsivo e così via. Le variabili all'interno dei caratteri variabili sono controllate da assi o istanze. Se il progettista del tipo di carattere lo desidera, qualsiasi variabile nel progetto del tipo di carattere può essere assegnata a un asse controllabile dall'utente. Gli assi più comuni includono corsivo, dimensione ottica, inclinazione, spessore e larghezza. Questi cinque sono gli assi registrati in CSS.

Vantaggi

I caratteri variabili consentono di fornire più stili in un unico file di caratteri, rendendo i siti web più sostenibili, più piccoli e più veloci e offrendo al designer un maggiore controllo espressivo.

4. Utilizzare i caratteri variabili nel design

Modificare gli assi

Esaminiamo tutti i parametri (o assi) disponibili e il loro effetto. Seleziona il tipo a destra e apri la finestra modale Dettagli tipo (icona Altro) per aprire i cursori degli assi ed esaminare ogni parametro.

Peso definisce lo spessore di una lettera. Offre una gamma completa e continua di spessori del tratto.

La larghezza è il risultato della quantità di spazio orizzontale occupato dai caratteri di un tipo di carattere.

Regola lo stile da verticale a inclinato, noto anche ai tipografi come stile "obliquo". Sebbene rari, gli stili Slant possono funzionare anche nella direzione opposta, ovvero in uno stile "inclinato all'indietro" o "obliquo inverso".

Grado è un modificatore secondario del peso ottico di un carattere tipografico ed è indipendente dall'asse Peso. Sia il peso che il grado influiscono sullo spessore di una lettera, ma le modifiche con il grado sono molto più granulari.

Dimensione ottica. Adatta lo stile a dimensioni del testo specifiche, indicate in punti. Con dimensioni più piccole, le lettere vengono in genere ottimizzate per una maggiore leggibilità, con spaziatura/kerning più ampi e tratti più spessi con meno dettagli. Nelle dimensioni più grandi, le lettere vengono in genere ottimizzate per i titoli con tratti più sottili e forme più dettagliate, nonché pesi e larghezze più estremi.

Dai un'occhiata alla demo dei caratteri variabili per provare gli assi dei caratteri variabili al di fuori di Figma.

5. Migliora il tuo stile

Se lavori con una guida di stile del brand, potresti avere una scala tipografica stabilita per definire i vincoli tipografici. L'utilizzo di caratteri variabili non significa abbandonare questa coerenza. Consente un ulteriore perfezionamento della flessibilità della scala tipografica (per casi d'uso come l'aumento del peso del grado su sfondi scuri) all'interno di un singolo file.

Sebbene una scala tipografica possa essere composta da più di una famiglia di caratteri, qui ne utilizzeremo solo una per personalizzare una versione condensata della scala tipografica predefinita di Material.

Iniziamo a personalizzare la scala tipografica con il corpo del testo. In questo modo possiamo impostare prima la dimensione del carattere di base del sito e poi regolarla otticamente. Il valore predefinito per Body Large (Corpo grande) è 18 pt, selezionato e impostato su Roboto Flex. In passato, per migliorare la leggibilità era necessario aggiornare le dimensioni e lo spessore del carattere, il che significava un altro file di caratteri, ma ora possiamo perfezionare alcuni degli assi. Regola le dimensioni ottiche, il grado e il peso.
Continua con Etichetta. Le etichette sono più utilitaristiche e vengono utilizzate in contesti più brevi e piccoli, come i pulsanti. Regola otticamente il grado per consentire all'etichetta di essere visualizzata correttamente nei contenitori dei pulsanti e nei chip.
Continua a perfezionare la ricerca con Titolo, Titolo e Display. Tutte e tre vengono utilizzate per testi di media e alta enfasi più brevi, come titoli e sezioni delle pagine. Titolo e Visualizzazione possono essere più espressivi grazie alle loro dimensioni e all'enfasi elevata. Sentiti libero di sperimentare con tutti gli assi.
Con il tipo selezionato, fai clic sui 4 puntini e aggiungi (+) per impostare uno stile di testo, in modo da garantire impostazioni di tipo riutilizzabili e coerenti.

Puoi generare la scala del tipo di materiale predefinito come stili Figma con Material Theme Builder o duplicando il kit di progettazione M3.

6. Applicato all'interfaccia utente

Una volta configurata una scala tipografica, applichiamola agli elementi della UI da implementare nel codice. Valuta come utilizzare i caratteri variabili per aggiungere più espressività e leggibilità. Se hai configurato gli stili Figma nell'ultimo esercizio, puoi applicarli e poi aggiornare gli assi dello stile.

Dai un'occhiata agli elementi dell'interfaccia utente a sinistra. La prima scheda contiene un tipo di pianta, una descrizione e alcuni tag di categoria, mentre le altre schede descrivono le istruzioni per la cura della pianta. Il tipo di impianto ha senso come ruolo di grande importanza, quindi utilizza il nostro stile "titolo". Imposta il valore che abbiamo configurato in precedenza come titolo. Anche le schede di assistenza hanno un titolo, ma non hanno la stessa enfasi, quindi impostale come "titolo".
Il testo dei dettagli e delle istruzioni della pianta può essere assegnato a "corpo grande", mentre le etichette delle categorie a "etichetta grande".
Sperimenta diversi ruoli e regola gli elementi dell'interfaccia utente e la scala tipografica per trovare il giusto equilibrio.

7. Implementare nel codice

L'implementazione di caratteri variabili nel codice con CSS è un metodo simile a quello di qualsiasi carattere web che utilizza un servizio di distribuzione dei caratteri per caricare il carattere e personalizzarlo con le proprietà CSS.

Utilizzeremo HTML e CSS di base per l'implementazione, non MWC o altri framework.

Caratteri variabili su Google Fonts

Utilizza Google Fonts come servizio di distribuzione dei caratteri per implementare facilmente una miriade di caratteri, inclusi i caratteri variabili, sul tuo sito web.

Per scoprire quali caratteri variabili sono disponibili, vai su fonts.google.com. Nella ricerca, seleziona Mostra solo caratteri variabili per filtrare. I caratteri variabili includono un'area di prova nella parte inferiore della pagina in cui puoi impostare i cursori per ciascuno degli assi disponibili nella famiglia.

Stilizzare con CSS

Non tutti i caratteri hanno lo stesso numero di assi disponibili per la personalizzazione. Al momento, Peso, Larghezza, Inclinazione, Corsivo e Dimensione ottica sono i più comuni.

Questi possono essere impostati con le proprietà dei caratteri CSS di base esistenti prima dei caratteri variabili. Sebbene tutto non sia ancora ampiamente supportato (a maggio 2022), tutti gli assi possono essere impostati in modo affidabile utilizzando la nuova proprietà font-variation-settings.

`Axes`	`Abbreviation`	`CSS property`
`Weight`	`wght`	`font-weight`
`Width`	`wdth`	`font-stretch`
`Slant`	`slnt`	`font-style*`
`Italic`	`ital`	`font-style*`
`Optical Size`	`opsz`	`font-optical-sizing`

*Inclinazione (slnt) e corsivo (ital) in font-style non sono affidabili.

8. Importare con l'API Google Fonts

Abbiamo utilizzato solo Roboto, ma guarda tutti i caratteri ora disponibili su fonts.google.com.

Per il resto del codelab, utilizzeremo Roboto e personalizzeremo il tipo nelle schede seguenti in base all'esercizio precedente.

Copia questo codice contenente l'interfaccia utente di esempio della scheda nell'IDE web che preferisci.

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

Prendi nota delle specifiche di stile che abbiamo impostato nell'ultimo esercizio per titolo, titolo, corpo ed etichetta. Tenendo presente questi aspetti, vai alla pagina di Roboto Flex. Imposta i cursori in modo che corrispondano alle specifiche impostate in Figma, quindi Seleziona questo stile per ciascuno per aggiungerli al riquadro laterale.
Nel riquadro, sotto gli stili selezionati, cerca Utilizza sul web. Esistono due modi per aggiungere il carattere al codice: tramite <link> o @import. Ne basta uno, selezioniamo @import.
Copia da @import al punto e virgola e incollalo all'interno dei tag di stile dopo il commento di importazione.
Poiché viene utilizzato un solo carattere, Roboto Flex, imposta il corpo in modo che chiami la famiglia di caratteri aggiungendo le "regole CSS per specificare le famiglie" incluse nel codice di importazione.

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

In questo modo vengono importati il carattere e gli stili selezionati, ma l'utilizzo degli intervalli degli assi consente di utilizzare l'intervallo continuo di stili anziché i singoli stili. Per creare un intervallo, unisci due valori con .. (ad es. 100..900). Assicurati di aggiungere solo intervalli esistenti nei cursori del carattere, altrimenti non verrà caricato correttamente.

Questo formato è ideale per transizioni di animazione fluide e per sperimentare nel browser, in quanto carica l'intera gamma e aumenta le dimensioni della richiesta di download.

9. Proprietà dei caratteri variabili CSS

Una volta importato il carattere, torniamo a Figma per estrarre alcune proprietà CSS da stilizzare e diamo un'occhiata alla proprietà CSS font-variation-settings.

A partire dai titoli h1 selezionati nel riquadro a destra, seleziona la scheda Ispeziona in alto. Il riquadro passa a una modalità di ispezione del codice per il trasferimento agli sviluppatori. Il codice è l'ultima sezione.
Se non l'hai già fatto, imposta il menu a discesa Formato su CSS. Gli attributi standard, se utilizzati, sono elencati (font-weight, font-stretch, font-style, font-optical-sizing), seguiti dall'font-variation-settings di basso livello che contiene assi personalizzati non registrati. Utilizza prima gli attributi standard, prima di passare a font-variation-settings.

Figma utilizza font-variation-settings per la larghezza (wdth) anziché font-stretch.

Copia questo codice CSS relativo al tipo per applicare lo stile al selettore h1.

h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

Lo stile del titolo della scheda di assistenza può essere copiato in h2. Fai lo stesso per il body copy, copiandolo in p. Gli stili delle etichette possono essere copiati in .label

10. Complimenti

Ottimo lavoro per aver adottato i caratteri variabili, aver imparato a utilizzarli nei tuoi progetti e averli implementati per il web.

Se hai domande, non esitare a contattarci in qualsiasi momento utilizzando @MaterialDesign su Twitter.

Continua a seguirci per altri contenuti e tutorial di design su youtube.com/MaterialDesign.