Tipografia
La scala è una decisione di densità e i caratteri sono una decisione di font: questa pagina mostra come appare una forma, non quanto valga oggi. Cambia l'asse dei font nel pannello di debug e tutto ciò che segue è impostato in un altro carattere senza che cambi una regola.
Famiglie
--font-family-base
--font-family-heading
--font-family-mono
Pesi
--font-weight-normal — Il veloce volpe marrone salta sopra il cane pigro — 0123456789
--font-weight-medium — Il veloce volpe marrone salta sopra il cane pigro — 0123456789
--font-weight-strong — Il veloce volpe marrone salta sopra il cane pigro — 0123456789
--font-weight-bold — Il veloce volpe marrone salta sopra il cane pigro — 0123456789
Scala dei caratteri
Design System — Blocchi fondamentali per ottime interfacce
Usato una sola volta per pagina. Imposta il contesto principale. Abbinato a un breve paragrafo introduttivo.
La tipografia stabilisce gerarchia e ritmo
Intestazione di livello sezione. Raggruppa contenuti correlati. Di solito seguito da testo principale o sotto-sezioni.
Spaziatura e proporzione plasmano la leggibilità
Intestazione di sotto-sezione. Introduce un argomento focalizzato all'interno di una sezione.
Colore e contrasto guidano l'occhio
Usato per titoli di schede, sezioni laterali o raggruppamenti minori.
Stati interattivi devono essere evidenti
Etichette, intestazioni dei metadati, piccoli raggruppamenti. Sottili ma distinti dal testo principale.
L'accessibilità è una funzionalità, non un ripensamento
Il livello di intestazione più piccolo. Usare con parsimonia — per note a piè di pagina, blocchi legali o etichette ausiliarie.