Migrazione ai caratteri variabili

1. Introduzione

Ultimo aggiornamento: 11/05/22

269e1597309e5d7a.png

Sfrutta la variabilità dinamica nella UI con caratteri variabili, che consentiranno una maggiore reattività nei layout, nei temi e nell'accessibilità, il tutto rendendo le tue app più veloci.

Obiettivi didattici

  • Cosa sono i caratteri variabili.
  • Come personalizzarne il tipo.
  • Come applicare caratteri variabili ai tuoi progetti.
  • Come implementare i caratteri variabili con l'API Google Fonts e in CSS.

Prerequisiti

Per questo lab useremo alcuni concetti di base di progettazione.

  • Conoscenza delle scale dei tipi.
  • Conoscenza di Figma.
  • Conoscenza di base di HTML e CSS.

Che cosa ti serve

2. Inizia

Configurazione

Per iniziare devi accedere al file Designlab Figma. Tutto ciò di cui hai bisogno per il lab è nel file Figma. Puoi scaricare e importare il file o duplicarlo dalla community di Figma.

Innanzitutto, accedi a Figma o crea un account.

Duplicato 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 file.

2cb1a5f77aab6012.png

Layout file

Mentre guardi il file, nota che si tratta di un file autonomo, che inizia con un'introduzione. Ogni sezione è divisa in una fila di tavole da disegno collegate tra loro, con alcuni concetti fondamentali per la sezione seguiti dagli esercizi. Le sezioni e gli esercizi sono collegati tra loro e devono essere completati in sequenza.

Questo codelab ti guiderà in modo più dettagliato attraverso questi concetti ed esercizi. Leggi 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.

289defd9d067d2f0.png

Verificare la presenza di caratteri variabili

Prima di iniziare, dobbiamo assicurarci di avere un font 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 di caratteri innovativo che consente agli utenti di avere il controllo sul tipo e sulle icone. Roboto Serif e Roboto Flex sono nuovi caratteri tipografici rinnovati per la tecnologia dei caratteri variabili, ciascuno con una vasta gamma di assi. 64c74a7d7844423.png

Espressione estetica e assi

I designer non si limitano più agli stili impostati meno recenti, come regolare, grassetto, corsivo e così via. Le variabili all'interno dei caratteri variabili sono controllate da assi o istanze. Se il progettista dei tipi sceglie, qualsiasi variabile nella progettazione del tipo può essere assegnata a un asse controllabile dall'utente. Gli assi comuni sono corsivo, dimensione ottica, inclinazione, peso e larghezza. Questi cinque sono gli assi registrati in CSS.

Vantaggi

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

77346d3812d79acc.png

4. Utilizzare caratteri variabili nel design

Cambiare gli assi

Analizziamo 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 e passare da un parametro all'altro.

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

5f18f2f50f6dc4da.gif

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

dddc87cccfcb47f9.gif

  1. Consente di regolare lo stile da verticale a inclinato, una caratteristica nota anche ai tipografi come "obliquo" stile. Sebbene sia raro, l'inclinazione può funzionare nella direzione opposta, una cosiddetta "inclinazione" o "obliquo invertito" stile.

1b7fbf03fcbf16dc.gif

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

35705cb05c8df559.gif

  1. Dimensione ottica. Adatta lo stile a dimensioni del testo specifiche, specificate in punti. Nelle dimensioni più piccole, le lettere vengono generalmente ottimizzate per una maggiore leggibilità, con spaziatura/crinatura più lenta e tratti più spessi con meno dettagli. Per i formati più grandi, le lettere sono in genere ottimizzate per i titoli con tratti più sottili, forme più dettagliate e spessori e pesi più estremi.

ed569d469ebd40d6.gif

Guarda la demo di Variabili variabili per sperimentare con gli assi di caratteri variabili al di fuori di Figma.

5. Sfrutta al massimo lo stile

Se lavori con una guida di stile per il brand, potresti avere una scala del tipo stabilita per definire i vincoli tipografici. L'uso di caratteri variabili non implica necessariamente rinunciare a questa coerenza. Offre un ulteriore perfezionamento all'interno della flessibilità della scala dei tipi (per casi d'uso come l'aumento del peso del voto su sfondi scuri) all'interno di un singolo file.

ecb7c0b0056fc315.png

Sebbene una scala del tipo possa essere composta da più di una famiglia di caratteri, in questo caso ne utilizzeremo una sola per personalizzare una versione ridotta della scala del tipo predefinita Materiale.

  1. Iniziamo a personalizzare la scala dei tipi con il corpo del testo. In questo modo possiamo impostare prima la dimensione del tipo di base del sito e poi effettuare la regolazione otticamente da lì. Il valore predefinito per Body Large è 18 pt, selezionato e impostato su Roboto Flex. Adattare per migliorare la leggibilità significava aggiornare le dimensioni e lo spessore del carattere, il che significava un altro file del carattere, ma ora possiamo perfezionare alcuni assi. Regola dimensioni ottiche, inclinazione e peso.
  2. Continua con Etichetta. Le etichette sono più pratiche e vengono usate in contesti più brevi, come i pulsanti. Regola otticamente il voto per consentire la corretta visualizzazione dell'etichetta nei contenitori di pulsanti e nei chip.
  3. Continua a perfezionare con Titolo, Titolo e Display. Tutti e tre vengono utilizzati per testi con enfasi da media a elevata enfasi più brevi, come titoli di pagina e sezioni. Titolo e Display possono essere più espressivi per via delle loro dimensioni e dell'elevata enfasi. Divertiti a giocare con tutti gli assi qui!
  4. Con il tipo selezionato, fai clic sui quattro puntini e aggiungi (+) per impostare uno stile di testo, in modo da garantire impostazioni coerenti per il tipo riutilizzabile.

Puoi generare la scala predefinita del tipo di materiale come stili Figma con il generatore di temi Materiali o duplicando il kit di progettazione M3.

6. Applicato all'interfaccia utente

Dopo aver configurato una scalabilità del tipo, applichiamola agli elementi UI da implementare nel codice. Valuta come usare caratteri variabili per aggiungere espressività e leggibilità. Se hai impostato gli stili di Figma nell'ultimo esercizio, puoi applicarli e poi aggiornare gli assi dello stile.

18efaa2c7bc6ecac.png

  1. Dai un'occhiata agli elementi UI 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 delle piante. Il tipo di pianta ha un ruolo molto importante, quindi usa il nostro "titolo" stile. Impostalo sul titolo che abbiamo configurato in precedenza. Anche le schede informative hanno un titolo, ma non hanno la stessa enfasi, quindi impostale come "titolo".
  2. I dettagli della pianta e il testo delle istruzioni possono essere assegnati a "corpo grande", mentre le etichette della categoria a "etichetta grande".
  3. Prova diversi ruoli e modifica gli elementi UI e la scala del tipo per trovare il giusto equilibrio.

f646755b99db0161.png

7. Implementa nel codice

789408aab925944f.png

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

Per l'implementazione utilizzeremo HTML e CSS di base, non MWC o altri framework.

Caratteri variabili su Google Fonts

Usa Google Fonts come servizio di invio dei caratteri per implementare facilmente una miriade di caratteri, compresi quelli variabili, sul tuo sito web.

Per scoprire quali caratteri variabili sono disponibili, visita la pagina fonts.google.com. Sotto la ricerca, seleziona Mostra solo caratteri variabili da filtrare. I caratteri variabili includono un'area giochi vicino alla parte inferiore della pagina in cui puoi impostare i cursori per ciascuno degli assi disponibili nella famiglia.

9ecb4721afd8faa2.png

Applicare uno stile con CSS

Non tutti i caratteri hanno la stessa quantità di assi disponibili per la personalizzazione. Attualmente, Peso, Larghezza, Inclina, Corsivo e Dimensione ottica sono i valori più comuni.

Questi elementi possono essere impostati con le proprietà CSS di base esistenti prima dei caratteri variabili. Sebbene non sia ancora ampiamente supportato (a partire da 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

*L'inclinazione (slnt) e il corsivo (italiano) nello stile del carattere non sono affidabili.

8. Importa con l'API Google Fonts

Abbiamo usato solo Roboto, ma diamo un'occhiata a tutti i caratteri che abbiamo ora a disposizione su font.google.com.

Continueremo a usare Roboto per il resto del codelab e personalizzeremo il tipo nelle seguenti schede in base all'esercizio precedente.

  1. Copia questo codice contenente l'UI 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>
  1. Prendi nota delle specifiche di stile che abbiamo impostato nell'ultimo esercizio per headline, title, body ed label. Tenendo conto di 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 di essi da aggiungere al riquadro a scomparsa laterale.
  2. Nel riquadro a scomparsa, sotto gli stili selezionati, cerca Usa sul Web. Esistono due modi per aggiungere il carattere al codice: tramite <link> o @import. Te ne serve solo uno. Seleziona @import.
  3. Copia da @import nel punto e virgola e incollalo nei tag di stile dopo il commento di importazione.
  4. Poiché Roboto Flex è l'unico font utilizzato, imposta il corpo in modo che chiami la famiglia di caratteri aggiungendo le "regole CSS per specificare le famiglie" incluso nel codice di importazione.
body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

Ciò consente di importare il carattere e gli stili selezionati, ma l'utilizzo di Intervalli asse ti consente di utilizzare l'intervallo continuo di stili anziché i singoli stili. Per creare un intervallo, unisci due valori con .. (ad esempio, 100...900). Assicurati di aggiungere solo intervalli presenti nei cursori del carattere, altrimenti il carattere non verrà caricato correttamente.

Questa opzione è ideale per transizioni di animazione ed esperimenti nel browser, in quanto questa operazione viene caricata nell'intervallo completo e aumenta la richiesta di download.

9. Proprietà del carattere delle variabili CSS

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

  1. Iniziando dai titoli h1 selezionata nel riquadro a destra, seleziona la scheda Ispeziona in alto. In questo modo viene attivata la modalità di ispezione del codice nel riquadro per il passaggio allo sviluppatore. Il codice è l'ultima sezione.
  2. Se non l'hai già fatto, modifica il menu a discesa del formato in CSS. Gli attributi standard, se utilizzati, sono elencati (font-weight, font-stretch, font-style, font-optical-sizing), seguiti dai font-variation-settings di basso livello che contengono assi personalizzati non registrati. Utilizza in primo luogo gli attributi standard prima di passare a font-variation-settings.

Figma utilizza le impostazioni font-variation-settings per la larghezza (wdth) anziché per l'estensione font.

62fbb715711beb75.png

  1. Copia questo codice CSS relativo al tipo per applicare uno stile al nostro selettore h1.
h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}
  1. Lo stile del titolo della scheda di assistenza può essere copiato in h2. Esegui la stessa operazione per il corpo del testo, copiandolo in p. Gli stili di etichetta possono essere copiati in .label

73252104c94e2053.png

10. Complimenti

62930ad88ed65971.png

Complimenti per aver scelto i caratteri variabili, aver imparato a utilizzarli nei tuoi progetti e averli implementati sul web.

Per eventuali domande, non esitare a contattarci in qualsiasi momento tramite @MaterialDesign su Twitter.

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