Tipografia e font

La tipografia di un sito è fatta di due cose: i caratteri che il sito può usare e gli stili di testo (testo, titoli, sottotitolo, didascalia, pulsante e così via), che stabiliscono famiglia, dimensione, peso e spaziatura di ogni ruolo. Ogni titolo e ogni paragrafo del sito prende lo stile da qui: la tipografia la imposti una volta per tutto il sito.

Prima di iniziare #

• Ti serve il ruolo Amministratore, oppure quello di Editor di contenuti con Modifica su Famiglie di caratteri e Stili tipografici. Di base un Editor di contenuti li vede soltanto. Il Cliente del brand vede la scala tipografica ma non i caratteri.
• Tieni pronto il font: il nome della famiglia su Google Fonts, oppure un file WOFF2 per ogni peso e stile, con una licenza che ti permetta di usarlo su questo sito.

Aggiungere un font #

1. Nella barra laterale del sito apri Design System, poi Tipografia.
2. Scorri fino a Caratteri. Le schede sono Caratteri del tema (inclusi nel tema, solo da consultare), Carica e Google Fonts.

Da Google Fonts:

1. Apri la scheda Google Fonts.
2. In Famiglia su Google Fonts scrivi il nome della famiglia come lo scrive Google Fonts, per esempio DM Sans.
3. Scegli i Pesi che ti servono e spunta Includi i corsivi se li vuoi.
4. Scegli Importa. Il server copia sul sito i file latin e latin-ext e registra con ogni carattere la pagina della licenza della famiglia (Licenza di {family}).

Da un file WOFF2:

1. Apri la scheda Carica.
2. Scrivi il Nome della famiglia, per esempio Helvetica Neue Brand. Usa lo stesso nome per tutti i file della famiglia.
3. Scegli il Peso e lo Stile (Tondo o Corsivo).
4. Scegli il Caricamento. Mostra il ripiego, poi sostituisci (swap) va bene quasi sempre; Attendi il carattere (block) solo per una riga breve di titolo che non deve mai comparire col font di ripiego.
5. In File WOFF2 scegli il file, poi Carica carattere.
6. Ripeti per ogni peso e stile: un file ciascuno.

Ora la famiglia compare in I caratteri di questo sito e in tutti i selettori di font.

Sostituire un carattere #

Caricare o importare un carattere che il sito ha già (stessa famiglia, peso e stile) viene rifiutato: "{family} {face} è già tra i caratteri di questo sito. Puoi sostituirne il file: Annulla ripristina quello attuale."

1. Sotto il messaggio scegli Sostituisci il file (un caricamento) o Sostituisci i file (un'importazione da Google Fonts).
2. Nell'admin il nuovo file prende subito il posto del vecchio. Il sito online continua a usare il vecchio file finché non pubblichi.
3. Per tornare indietro scegli Annulla l’ultimo salvataggio sotto la scala tipografica, oppure Annulla modifica nella barra in alto. Il vecchio carattere torna.

Scegliere le famiglie #

1. In Tipografia trova Famiglie di caratteri. Ogni riga è una famiglia del design system (per esempio titoli e testo).
2. In Usa scegli Font propri per comporre una sequenza di font, oppure Come {family} per seguire un'altra riga.
3. Con Font propri scegli la Famiglia tra Font di questo sito, Font del tema e Font di sistema, poi una Riserva (Font di sistema senza grazie, Font di sistema con grazie, Font di sistema monospaziati o Nessuna riserva).
4. La riga di esempio sotto mostra il risultato.

Impostare gli stili di testo #

La Scala tipografica elenca tutti gli stili di testo, dal più grande, alla larghezza scelta nella barra in alto. Ogni riga dice per cosa è Usato come (per esempio Titolo 1, Testo, Didascalia).

1. Su una riga imposta la Famiglia (una famiglia del design system, oppure Font propri), il Peso (da Pesi del design system, oppure Peso proprio), Interl. (interlinea), Spaziatura (la spaziatura delle lettere, con la sua unità) e Maiuscole (Come scritto, Maiuscolo, Minuscolo, Iniziali maiuscole).
2. Imposta la Dimensione:
   • Fisso: scegli una dimensione Dalla scala, oppure Propria (px) e scrivila.
   • Fluido: la dimensione cresce con lo schermo. Scegli la Più piccola e la Più grande, e l'intervallo (Da viewport (px), A viewport (px)) in cui cresce.
   • Se la dimensione cambia per breakpoint, ogni breakpoint ha la sua Dimensione da {breakpoint}.
3. Le righe cambiate riportano Non salvato; in basso la barra Modifiche tipografiche non salvate le raccoglie.
4. Scegli Salva {count} modifiche. Prima le modifiche vengono controllate (Controllo delle modifiche, poi salvo…). Pronto da salvare, con {count} note. vuol dire che il salvataggio ha qualche avviso; Mostra le note li elenca.
5. Annulla le modifiche butta quello che non hai salvato; Annulla l'ultimo salvataggio torna indietro di un salvataggio.

Se un componente o una sezione ha bisogno di uno stile nuovo, scegli Aggiungi stile di testo o Aggiungi ruolo.

Sotto la scala, Dimensioni dei caratteri e Pesi dei caratteri elencano i token di dimensione e di peso da cui gli stili attingono. Si cambiano dal pannello come ogni altro token (Colori, spazi e temi).

Cosa vedi #

• I caratteri occupano spazio sul sito: {used} usati su {quota} sotto I caratteri di questo sito.
• L'origine di un carattere è Google Fonts, Caricato o Fornito con il sito.
• Una famiglia che il sito online usa riporta Sul sito online.

Errori comuni #

• Della licenza di un font caricato rispondi tu. Le famiglie di Google Fonts sono open source, quasi tutte con licenza SIL Open Font License. La licenza di un font commerciale spesso copre un solo cliente o un solo sito: caricalo solo sul sito che copre, e mai su un sito che poi duplicherai per un altro cliente.
• Si caricano solo file WOFF2, uno per peso e stile, fino a 2 MB a file e 20 MB di font per sito, salvo limiti diversi della tua installazione. L'admin mostra il limite per file sotto il selettore (Un file per peso e stile. Fino a 2.00 MB.) e il totale del sito in {used} usati su {quota}.
• Elimina famiglia viene rifiutato finché un ruolo di famiglia usa la famiglia: "{family} è ancora usata da {roles}. Scegli un'altra famiglia per questi ruoli in Famiglie di caratteri, poi elimina {family}." Una famiglia Sul sito online si può eliminare: il sito online la mantiene finché non pubblichi, e Annulla la ripristina.
• In uso, nessun font su questo sito: uno stile di testo nomina una famiglia di cui il sito non ha file, quindi i visitatori vedono il font di riserva.
• L'importazione da Google Fonts richiede che il server raggiunga fonts.googleapis.com e fonts.gstatic.com. Se non funziona, carica i file WOFF2.
• Le modifiche alla tipografia arrivano sul sito pubblico quando pubblichi.

Vedi anche #

• Colori, spazi e temi
• Componenti e varianti
• Il tuo primo sito (l'impostazione del brand sceglie i font di titoli e testo)
• Pubblicazione e versioni