In breve
- Un sistema tipografico è un piccolo insieme di ruoli con nome, come display, titolo, testo ed etichetta, ciascuno con carattere, peso, corpo, interlinea e maiuscole fissi.
- I corpi di un sistema tipografico vengono da un’unica scala, una misura di base moltiplicata per un rapporto costante, così ogni passo si lega agli altri.
- La maggior parte dei brand ha bisogno di uno o due caratteri; il sistema crea varietà con ruoli, pesi e corpi.
- I design token salvano ogni ruolo come valore con nome, così siti, app e file di design usano le stesse decisioni tipografiche.
- Post social, slide e siti richiedono corpi diversi per gli stessi ruoli, quindi un buon sistema elenca ogni ruolo per canale.
In questa pagina
Un sistema tipografico è l’insieme di regole che decide come si comporta il testo in un brand: pochi ruoli con nome (display, titolo, testo, etichetta), ciascuno con un carattere, un peso, un corpo, un’interlinea e un uso delle maiuscole, tutti dimensionati da un’unica scala e salvati come token, così ogni designer e sviluppatore usa gli stessi valori. I caratteri danno una voce al brand. Il sistema rende coerente quella voce, così un titolo su un manifesto, un sito e una storia sembrano venire dallo stesso posto. Ecco come costruirne uno.
I ruoli in un sistema tipografico
Parti dai compiti, non dai caratteri. Ogni testo che un brand pubblica svolge uno tra pochi compiti, e ogni compito diventa un ruolo. La maggior parte dei brand ne ha bisogno da cinque a sette.
Impostazione tipica
Impostazione tipica
Compito
Impostazione tipica
Impostazione tipica
Compito
Impostazione tipica
Compito
Impostazione tipica
Impostazione tipica
Tre ruoli su un post: un sopratitolo, un titolo e una riga di testo. Ognuno è subito distinto, così l’occhio sa da dove iniziare.
Quanti caratteri serve a un sistema tipografico di brand
Di solito uno o due. Una famiglia in tre pesi può reggere un intero sistema. Due caratteri, uno per i titoli e uno per il testo, aggiungono carattere. Un terzo è giustificato solo per un compito specifico come codice o dati. La varietà viene da ruoli, corpi e pesi, non da più caratteri. Gli abbinamenti di Google Fonts e i caratteri del brand ti aiutano a scegliere.
Evita
- Un nuovo carattere per ogni campagna
- Corpi scelti a occhio su ogni design
- Nove pesi caricati, tre usati
- Regole diverse sulle maiuscole in team diversi
- Una guida di stile che elenca caratteri ma non ruoli
Fai
- Una o due famiglie per tutto
- Ogni corpo da un’unica scala
- Solo i pesi che servono ai ruoli
- Una regola scritta sulle maiuscole per titoli e pulsanti
- Ruoli con carattere, peso, corpo, interlinea e maiuscole
Costruisci una scala tipografica
Una scala tipografica sceglie un corpo di base e lo moltiplica per lo stesso rapporto a ogni passo verso l’alto. I passi sono legati tra loro, quindi due corpi qualsiasi del sistema sembrano voluti insieme. Un rapporto di 1,25 va bene per interfacce e pagine dense; 1,333 o 1,5 dà più effetto per il lavoro editoriale e di marketing. La scala tipografica spiega i rapporti più a fondo.
Ruolo
Ruolo
Ruolo
Ruolo
Ruolo
Ruolo
Ruolo
Misura a 1,25 da 16 px
Ruolo
Salva il sistema come token
Un sistema che vive solo in un PDF si sfalda. I token sono valori con nome che leggono sia il codice sia i file di design, quindi cambiando un valore si aggiorna tutto. Dai ai token nomi di ruolo, mai di misura: --type-heading sopravvive a un restyling, --type-31 no. I design token trattano l’idea più ampia.
:root {
--font-heading: "Fraunces", Georgia, serif;
--font-body: "Inter", system-ui, sans-serif;
--type-display: 600 clamp(3.0625rem, 6vw, 3.8125rem) / 1.05 var(--font-heading);
--type-heading: 600 1.9375rem / 1.15 var(--font-heading);
--type-subheading: 500 1.25rem / 1.4 var(--font-body);
--type-body: 400 1rem / 1.5 var(--font-body);
--type-label: 600 0.8125rem / 1.2 var(--font-body);
}
h1 { font: var(--type-display); }
h2 { font: var(--type-heading); }
p { font: var(--type-body); }
.eyebrow { font: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; }
.price { font-variant-numeric: tabular-nums; }Un ruolo, corpi diversi per canale
Un titolo su un sito e un titolo su un post Instagram svolgono lo stesso compito a corpi molto diversi, perché uno si legge a distanza di braccio su un grande schermo e l’altro si rimpicciolisce nel feed di un telefono. Tieni identici i ruoli e dai a ogni canale i propri corpi.
Post social 1080×1350
Slide 1920×1080
Post social 1080×1350
Slide 1920×1080
Post social 1080×1350
Slide 1920×1080
Sito
Post social 1080×1350
Slide 1920×1080
Come costruire il tuo sistema tipografico
- 1
Raccogli ciò che già pubblichi
Fai screenshot di sito, post, email e slide. Cerchia ogni stile di testo distinto. La maggior parte dei brand ne trova molti più di quanti pensava.
- 2
Raggruppa gli stili in ruoli
Unisci i quasi duplicati. Punta a cinque o sette ruoli che coprano tutto ciò che hai cerchiato.
- 3
Scegli i caratteri per i ruoli
Di solito un carattere per i titoli e uno per il testo. Verifica che la licenza copra web, app ed eventuale uso nel logo.
- 4
Imposta la scala e i dettagli
Scegli una base e un rapporto, poi fissa peso, interlinea, maiuscole e spaziatura di ogni ruolo. Decidi una volta sola le maiuscole dei titoli; iniziale maiuscola solo all’inizio o ogni parola aiuta.
- 5
Pubblicalo come token e come scheda di una pagina
Token per codice e file di design, una singola scheda visiva nella tua guida di stile del brand per tutti gli altri.
Per i post social e le presentazioni di ogni giorno, un brand kit di Gradiently (con Pro) contiene i caratteri per titoli e testo del tuo sistema, compresi i file di font caricati, insieme a loghi, colori e voce. I nuovi design partono da quei due caratteri, e il Designer applica il kit quando imposta un design, così la divisione tra titolo e testo regge senza che nessuno debba ricordarla.
Le domande più frequenti
Che cos’è un sistema tipografico?
Un insieme di ruoli tipografici con nome, come display, titolo, testo ed etichetta, ciascuno con carattere, peso, corpo, interlinea e maiuscole fissi, di solito salvati come design token.
Quanti caratteri dovrebbe usare un brand?
Uno o due per la maggior parte dei brand: uno per i titoli e uno per il testo. Un terzo vale la pena solo per un compito specifico come codice o dati.
Che cos’è una scala tipografica?
Una sequenza di corpi ottenuta moltiplicando una misura di base per un rapporto costante, come 1,25, così ogni corpo del sistema si lega agli altri.
Come vanno chiamati i token tipografici?
Per ruolo, come type-heading o type-body, non per misura. I nomi di ruolo restano significativi quando i corpi cambiano.
I post social devono usare gli stessi corpi di un sito?
No. Tieni gli stessi ruoli e caratteri, ma usa corpi molto più grandi sui post, perché si vedono piccoli nel feed di un telefono.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo