La gerarchia viene comunicata attraverso differenze di spessore, dimensione, altezza della riga e spaziatura tra le lettere del carattere. La scala tipografica aggiornata organizza gli stili in sei ruoli denominati per descrivere i loro scopi: display, titolo, etichetta, corpo, numero e arco. I nuovi ruoli sono indipendenti dalle dimensioni dello schermo, il che consente un'applicazione più semplice in una varietà di casi d'uso.
Stili di visualizzazione
Il display viene utilizzato per stringhe di testo brevi e di grandi dimensioni per visualizzare informazioni principali altamente visibili, metriche significative, confidenza o momenti espressivi del brand.
- DisplayLarge è il titolo più grande. I display sono il testo più grande sullo schermo, riservato a informazioni hero brevi e facilmente visibili, metriche significative, momenti di confidenza o espressivi del brand che traggono vantaggio da una scala e uno stile prominenti.
- DisplayMedium è il secondo titolo più grande. I display sono il testo più grande sullo schermo, riservato a informazioni hero brevi e facilmente consultabili, metriche significative, momenti di confidenza o espressivi del brand che traggono vantaggio da una scala e uno stile prominenti.
- DisplaySmall è il titolo più piccolo. I display sono il testo più grande sullo schermo, riservato a informazioni hero brevi e facilmente visibili, metriche significative, momenti di confidenza o espressivi del brand che traggono vantaggio da una scala e uno stile prominenti.
Titolo
Il titolo è un testo gerarchico utilizzato come meccanismo di orientamento, ad esempio una pagina, il titolo di una sezione o di una sottosezione (nel caso di TitleSmall).
- TitleLarge è il titolo più grande. I titoli sono più piccoli dei display. In genere sono riservati a testi con enfasi media, di lunghezza inferiore e non sono consigliati per i componenti interattivi, ma piuttosto per i titoli o i sottotitoli delle pagine.
- TitleMedium è il titolo del mezzo. I titoli sono più piccoli dei display. In genere sono riservati a testi con enfasi media, di lunghezza inferiore e non sono consigliati per i componenti interattivi, ma piuttosto per i titoli o i sottotitoli delle pagine.
- TitleSmall è il titolo più piccolo. I titoli sono più piccoli dei display. In genere sono riservati a testi con enfasi media, di lunghezza inferiore e non sono consigliati per i componenti interattivi, ma piuttosto per i titoli o i sottotitoli delle pagine.
Etichetta
L'etichetta viene utilizzata per il testo a livello di componente che descrive un'azione che si verificherebbe se interagisci con il componente. L'applicazione più comune e ampiamente utilizzata per l'etichetta è per il testo nidificato all'interno di un pulsante.
- LabelLarge è l'etichetta più grande. Le etichette vengono utilizzate per visualizzare testi in evidenza come le etichette sui pulsanti del titolo, applicate ai componenti interattivi.
- LabelMedium è l'etichetta media e la più utilizzata. Le etichette vengono utilizzate per visualizzare testi come l'etichetta principale sui pulsanti, applicate ai componenti interattivi.
- LabelSmall è l'etichetta piccola. Le etichette vengono utilizzate per visualizzare testi come l'etichetta secondaria sui pulsanti, le etichette sui pulsanti compatti, applicate ai componenti interattivi.
Corpo
Il corpo è riservato al testo dei contenuti, come i paragrafi del corpo del testo, il testo utilizzato nella visualizzazione di dati complessi, i timestamp e i metadati.
- BodyLarge è il corpo più grande. I corpi del testo vengono in genere utilizzati per testi lunghi, in quanto si adattano bene a dimensioni del testo ridotte. Per sezioni di testo più lunghe, è consigliato un carattere serif o sans serif.
- BodyMedium è il secondo corpo più grande. I corpi del testo vengono in genere utilizzati per testi lunghi, in quanto si adattano bene a dimensioni del testo ridotte. Per sezioni di testo più lunghe, è consigliato un carattere serif o sans serif.
- BodySmall è il terzo corpo più grande. I corpi del testo vengono in genere utilizzati per testi lunghi, in quanto si adattano bene a dimensioni del testo ridotte. Per sezioni di testo più lunghe, è consigliato un carattere serif o sans serif.
- BodyExtraSmall è il corpo più piccolo. I corpi del testo vengono in genere utilizzati per testi lunghi, in quanto si adattano bene a dimensioni del testo ridotte. Per sezioni di testo più lunghe, è consigliato un carattere serif o sans serif.
Numerale
Gli stili di testo numerici vengono utilizzati per le cifre numeriche, in genere limitate a pochi caratteri. Possono assumere proprietà più espressive nelle dimensioni di visualizzazione più grandi. Offre la flessibilità di espandere l'asse della larghezza con problemi minimi di localizzazione e scalabilità dei caratteri.
- NumeralsExtraLarge è il ruolo più grande per le cifre. Per impostazione predefinita, i numeri utilizzano la spaziatura tabellare. Evidenziano ed esprimono numeri visibili limitati a due o tre caratteri, per i quali non è richiesta la localizzazione, come la schermata di ricarica o il selettore dell'ora.
- NumeralsLarge è il secondo ruolo più grande per le cifre. Per impostazione predefinita, i numeri utilizzano la spaziatura tabellare. Sono stringhe numeriche di grandi dimensioni limitate a grandi visualizzazioni di tempo, in cui non è richiesta la localizzazione, come un conto alla rovescia o un selettore di ora.
- NumeralsMedium è il terzo ruolo più grande per le cifre. Per impostazione predefinita, i numeri utilizzano la spaziatura tabellare. Sono numeri di medie dimensioni limitati a brevi stringhe di cifre, in cui non è richiesta la localizzazione, come un conteggio dei passi o un selettore dell'ora.
- NumeralsSmall è il quarto ruolo più grande per le cifre. Per impostazione predefinita, i numeri utilizzano la spaziatura tabellare. Sono destinati ai numeri che devono essere enfatizzati su una scala più piccola, in cui non è richiesta alcuna localizzazione, come i selettori di data e ora.
- NumeralsExtraSmall è il ruolo più piccolo per le cifre. Per impostazione predefinita, i numeri utilizzano la spaziatura tabellare. Sono destinati ai numeri che devono contenere stringhe di cifre più lunghe, per cui non è richiesta alcuna localizzazione, come le metriche durante l'allenamento.
Arco
Il testo dell'intestazione dell'arco viene utilizzato per il testo curvo che compone la segnaletica dell'interfaccia utente, ad esempio il testo dell'ora e le etichette curve. Asse del carattere personalizzato che ottimizza in modo specifico il tipo lungo una curva e per adattarsi alla diversa spaziatura che appare tra i caratteri quando sono posizionati nella parte superiore, rispetto alla parte inferiore, di uno schermo curvo.
In alto
- ArcLarge è per le intestazioni e i titoli degli archi. Arco è per il testo lungo un percorso curvo sullo schermo, riservato a brevi stringhe di testo dell'intestazione nella parte superiore o inferiore dello schermo, come gli overlay di conferma.
- ArcMedium è per le intestazioni e i titoli degli archi. Arco è per il testo lungo un percorso curvo sullo schermo, riservato a brevi stringhe di testo dell'intestazione nella parte superiore o inferiore dello schermo, come i titoli delle pagine.
- ArcSmall è per stringhe di testo ad arco limitate. Arco è per il testo lungo un percorso curvo sullo schermo, riservato a stringhe di testo curve brevi nella parte superiore dello schermo, come il testo dell'ora.
In basso
- ArcLarge è per le intestazioni e i titoli degli archi. Arco è per il testo lungo un percorso curvo sullo schermo, riservato a brevi stringhe di testo dell'intestazione nella parte superiore o inferiore dello schermo, come gli overlay di conferma.
- ArcMedium è per le intestazioni e i titoli degli archi. Arco è per il testo lungo un percorso curvo sullo schermo, riservato a brevi stringhe di testo dell'intestazione nella parte superiore o inferiore dello schermo, come i titoli delle pagine.
- ArcSmall è per stringhe di testo ad arco limitate. Arco è per il testo lungo un percorso curvo sullo schermo, riservato a brevi stringhe di testo curve nella parte inferiore dello schermo, come un invito all'azione.
Composizione tipografica
La composizione verticale si basa su spaziatura interna, riquadri di delimitazione e linee di base per garantire la leggibilità del testo a qualsiasi dimensione. Tieni conto delle considerazioni ingegneristiche e delle convenzioni della tua piattaforma quando prendi decisioni su composizione, ridimensionamento del testo, densità e utilizzo del testo nei layout adattabili.
Utilizzare la linea di base
La linea di base è la linea invisibile su cui poggia una riga di testo. Nel Material Design, la linea di base è una specifica importante per misurare la distanza verticale tra il testo e un elemento.
Controllare la leggibilità
Per migliorare la leggibilità dei caratteri visualizzati nella tua app, completa questi controlli di leggibilità.
Numeri tabellari e monospazio
Utilizza cifre tabellari (note anche come numeri a spaziatura fissa) anziché cifre proporzionali nei punti in cui i valori potrebbero cambiare spesso, animarsi o variare rapidamente, come i timer per il conto alla rovescia, i selettori o le metriche di fitness in corso.
Utilizza numeri tabellari a spaziatura fissa per mantenere i valori allineati otticamente per una migliore scansione e allineamento ed evitare che i numeri o il testo adiacente saltino in giro.
Altezza riga
L'altezza della linea è lo spazio tra ogni riga di testo ed è direttamente collegata alla dimensione del carattere. Su Watch, lo spazio verticale è limitato, quindi l'altezza della riga è ottimizzata per garantire la leggibilità, massimizzando al contempo le righe di testo visibili all'interno dell'area visibile.
Altezza riga aggiuntiva
In Jetpack Compose e su Android, la tipografia acquisisce automaticamente un'altezza di riga aggiuntiva sull'ultima riga per evitare la sovrapposizione di caratteri più lunghi. Per questo motivo, alcuni test degli screenshot non sono perfettamente allineati.
Suggerimenti aggiuntivi sull'altezza della riga
| Stile predefinito (dimensioni del testo / altezza della riga) | Altezza della linea predefinita su ogni riga | Altezza riga aggiuntiva solo nell'ultima riga | Calcolo |
|---|---|---|---|
| 60 / 60 | 0 (100%) | + 15 (125%) | 60 / 75 (15/125%) (60+15) |
| 50 / 50 | 0 (100%) | + 13 (126%) | 50 / 63 (13/126%) (50+13) |
| 40 / 44 | 4 (110%) | + 7 (127,5%) | 40 / 51 (11/127,5%) (44+7) |
| 30 / 34 | 4 (113%) | + 3 (123,3%) | 30 / 37 (7/123,3%) (34+3) |
| 24 / 26 | 2 (108%) | + 4 (125%) | 24 / 30 (6/125%) (26+4) |
| 20 / 22 | 2 (110%) | + 3 (125%) | 20 / 25 (5/125%) (22+3) |
| 18 / 20 | 2 (111%) | + 3 (125%) | 18 / 23 (5/125%) (20+3) |
| 16 / 18 | 2 (112,5%) | + 2 (125%) | 16 / 20 (4/125%) (18+2) |
| 15 / 18 | 3 (120%) | + 1 (126,6%) | 15 / 19 (4/126,6%) (18+1) |
| 14 / 16 | 2 (114%) | + 2 (128,5%) | 14 / 18 (4/128,5%) (16+2) |
| 13 / 16 | 3 (123%) | + 0 (123%) | 13 / 16 (3/123%) (16+0) |
| 12 / 14 | 2 (116,6%) | + 1 (125%) | 12 / 15 (3/125%) (14+1) |
| 10 / 12 | 2 (120%) | + 0 (120%) | 10 / 12 (2/120%) (12+0) |