Migrazione ai caratteri variabili

1. Introduzione

Ultimo aggiornamento: 05/11/22

269e1597309e5d7a.png

Adotta la variabilità dinamica nella UI con i caratteri variabili, che consentono una maggiore reattività in layout, temi e accessibilità, il tutto velocizzando le tue app.

Obiettivi didattici

  • Che cosa sono i caratteri variabili.
  • Come puoi personalizzare il tipo con questi elementi.
  • 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, esamineremo alcuni concetti di progettazione di base.

  • Conoscenza delle scale di tipo.
  • Conoscenza di Figma.
  • Conoscenza di base di HTML e CSS.

Che cosa ti serve

2. Inizia

Configurazione

Per iniziare, devi accedere al file Figma di Designlab. Tutto ciò che ti serve per il lab è 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 Eseguire la migrazione ai caratteri variabili o cerca Eseguire la migrazione ai caratteri variabili nella community di Figma. Fai clic su Duplica nell'angolo in alto a destra per copiare il file nei tuoi file.

2cb1a5f77aab6012.png

Layout del file

Mentre esamini il file, noterai che è autonomo e inizia con un'introduzione. Ogni sezione è suddivisa in una riga di artboard collegate tra loro, con alcuni concetti chiave della 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 Intro, sono disponibili pulsanti che collegano le varie tavole in ordine. Per accedere al link, fai clic sul pulsante.

289defd9d067d2f0.png

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 di carattere innovativo che consente agli utenti di ottenere il controllo sui caratteri 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 ed assi estetici

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

Vantaggi

I caratteri variabili ti 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.

77346d3812d79acc.png

4. Utilizzare i caratteri variabili nel design

Modificare gli assi

Vediamo 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.

  1. Lo spessore definisce lo spessore di una lettera. Offre una gamma completa e continua di spessori di tratto.

5f18f2f50f6dc4da.gif

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

dddc87cccfcb47f9.gif

  1. Regola lo stile da verticale a inclinato, noto anche ai tipografi come stile "obliquo". Anche se è raro, Inclinazione può funzionare nell'altra direzione, che è chiamata stile "obliquo all'indietro" o "obliquo inverso".

1b7fbf03fcbf16dc.gif

  1. Gradazione è un modificatore secondario del tratto ottico di un carattere ed è indipendente dall'asse Spessore. Sia lo spessore che la qualità influiscono sullo spessore di una lettera, ma le modifiche con la qualità sono molto più granulari.

35705cb05c8df559.gif

  1. Dimensione ottica. Adatta lo stile a dimensioni di testo specifiche, specificate in punti. A dimensioni ridotte, le lettere vengono in genere ottimizzate per una maggiore leggibilità, con spaziatura/kerning ampia e tratti più spessi con meno dettagli. A dimensioni maggiori, le lettere sono in genere ottimizzate per i titoli con tratti più sottili e forme più dettagliate, nonché per spessori e larghezze più estremi.

ed569d469ebd40d6.gif

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

5. Migliorare lo stile

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

ecb7c0b0056fc315.png

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

  1. Iniziamo a personalizzare la scala dei caratteri con il testo principale. In questo modo possiamo impostare prima la dimensione del tipo di base del sito e poi regolare l'aspetto in base a questa. Il valore predefinito per Testo grande è 18 pt, selezionato e impostato su Roboto Flex. In passato, per migliorare la leggibilità era necessario aggiornare le dimensioni e lo spessore dei caratteri, il che significava un altro file di caratteri, ma ora possiamo perfezionare alcuni assi. Regola le dimensioni, la qualità e la grammatura ottiche.
  2. Continua con Etichetta. Le etichette sono più utilitaristiche e vengono utilizzate in contesti più brevi e più piccoli, come i pulsanti. Regola la gradazione in modo che l'etichetta venga visualizzata correttamente sui contenitori dei pulsanti e sui chip.
  3. Continua a perfezionare i contenuti con Titolo, Titolo e Visualizza. Tutti e tre vengono utilizzati per testi brevi con enfasi media o elevata, come titoli e sezioni di pagina. Titolo e Display possono essere più espressivi grazie alle loro dimensioni e all'elevata enfasi. Non esitare a provare tutti gli assi.
  4. Con il tipo selezionato, fai clic sui quattro puntini e aggiungi (+) per impostare uno stile di testo, che garantisce impostazioni di tipo riutilizzabili e coerenti.

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

6. Applicato all'interfaccia utente

Dopo aver configurato una scala di tipi, applichiamola agli elementi dell'interfaccia utente da implementare nel codice. Valuta come i caratteri variabili possono essere utilizzati per aggiungere più espressività e leggibilità. Se hai configurato gli stili di Figma nell'ultimo esercizio, puoi applicarli e poi aggiornare gli assi dello stile.

18efaa2c7bc6ecac.png

  1. Dai un'occhiata agli elementi dell'interfaccia utente a sinistra. La prima scheda contiene il tipo di pianta, la descrizione e alcuni tag di categoria, mentre le altre schede descrivono le istruzioni per la cura della pianta. Il tipo di pianta è adatto a un ruolo di alta enfasi, quindi utilizza il nostro stile "titolo". Impostalo su quello che abbiamo configurato in precedenza come titolo. Anche le schede di assistenza hanno un titolo, ma non hanno la stessa enfasi, quindi impostale come "title".
  2. I dettagli della pianta e la copia delle istruzioni possono essere assegnati a "corpo grande", mentre le etichette delle categorie a "etichetta grande".
  3. Sperimenta con ruoli diversi e modifica gli elementi dell'interfaccia utente e la scala tipografica per trovare il giusto equilibrio.

f646755b99db0161.png

7. Implementare nel codice

789408aab925944f.png

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

Per l'implementazione utilizzeremo HTML e CSS di base, non MWC o qualsiasi 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 alla pagina fonts.google.com. Nella ricerca, seleziona Mostra solo caratteri variabili per filtrare. I caratteri variabili includono un parco giochi nella parte inferiore della pagina in cui puoi impostare i cursori per ciascuno degli assi disponibili nella famiglia.

9ecb4721afd8faa2.png

Stili con CSS

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

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 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

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

8. Importazione con l'API Google Fonts

Abbiamo utilizzato solo Roboto, ma ora puoi dare un'occhiata a tutti i caratteri a nostra disposizione su fonts.google.com.

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

  1. 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>
  1. Prendi nota delle specifiche di stile che abbiamo impostato nell'ultimo esercizio per headline, title, body e label. Tenendo presente queste considerazioni, vai alla pagina di Roboto Flex. Imposta i cursori in modo che corrispondano alle specifiche impostate in Figma, quindi Seleziona questo stile per ciascuno da aggiungere al riquadro laterale.
  2. Nel riquadro laterale, cerca Utilizza sul web sotto gli stili selezionati. Esistono due modi per aggiungere il carattere al codice: tramite <link> o @import. Ne serve solo uno, selezioniamo @import.
  3. Copia da @import al punto e virgola e incollalo all'interno dei tag di stile dopo il commento di importazione.
  4. Poiché Roboto Flex è l'unico carattere utilizzato, 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);
}

Vengono importati i caratteri e gli stili selezionati, ma l'utilizzo degli intervalli dell'asse ti 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 gli intervalli esistenti nei cursori del carattere, altrimenti non verrà caricato correttamente.

Questo valore è ideale per transizioni di animazione fluide ed esperimenti nel browser, in quanto viene caricato nell'intera gamma e aumenta la richiesta di download.

9. Proprietà dei caratteri variabili CSS

Dopo aver importato il carattere, torna a Figma per inserire alcune proprietà CSS per lo stile e dare un'occhiata alla proprietà CSS font-variation-settings.

  1. A partire dal h1 dei titoli selezionato nel riquadro a destra, seleziona la scheda Ispeziona in alto. Il riquadro passa a una modalità di ispezione del codice per il trasferimento 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 da font-variation-settings di basso livello che contengono assi personalizzati non registrati. Utilizza prima gli attributi standard, prima di passare a font-variation-settings.

Figma utilizza le impostazioni di variazione dei caratteri per la larghezza (wdth) anziché per l'allungamento dei caratteri.

62fbb715711beb75.png

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

73252104c94e2053.png

10. Complimenti

62930ad88ed65971.png

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

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

Continua a seguirci per non perderti altri contenuti e tutorial sul design su youtube.com/MaterialDesign