Tipografia
Un corretto utilizzo della tipografia serve a creare gerarchie e a organizzare le
informazioni all’interno di una pagina, guidando gli utenti nella navigazione.
È uno
degli elementi fondamentali perchè deve lavorare in armonia con gli altri componenti
e con le icone del design system.
Qui potrai trovare gli stili, i colori e le dimensioni dei testi da utilizzare
nell’Ecosistema digitale Turismo Cultura.
Componenti di testo
-
Heading: si intendono i titoli utilizzati all'interno delle pagine. Una gerarchia che definisce l'importanza delle informazioni, da h1 fino ad h6, in ordine di importanza descrescente.
-
Testo: è usato di default il tag <p>
-
Link: è usato di default il tag <a>. Per approfondire consulta la pagina bottoni.
-
Grassetto: è usato di default il tag <strong>
-
Sottolineato: è usato di default il tag <u>
-
Corsivo: è usato di default il tag <em>
-
Maiuscolo è usata di default la classe text-uppercase
-
Minuscolo è usata di default la classe text-lowercase
-
Testo piccole dimensioni: è usato di default il tag <small>
-
Lista ordinata: è usato di default il tag <ul> e <li>
-
Lista non ordinata: è usato di default il tag <ol> e <li>
Famiglie di font
Barlow: usato per i titoli.
Un font accessibile e disponibile in assets/fonts e su
Google Fonts.
ABCDEFGHILMNOPQRSTUWVYZ
abcdefghilmnopqrstuwvyz’?”!(%)
[#]<>/\+=-_@£€:.;
0123456789
Titillium web: usato per i testi.
Un font accessibile e
disponibile in assets/fonts e su
Google Fonts.
Aa
ABCDEFGHILMNOPQRSTUWVYZ
abcdefghilmnopqrstuwvyz’?”!(%)
[#]<>/\+=-_@£€:.;
0123456789
Heading - titoli di pagina
Heading h1
The quick brown fox jumps over the lazy dog
Desktop
Font-family: Barlow
Font-weight: Bold 700
Font-size: 24px
Line-height: 30px
Color: #003a54
Margin-bottom: 48px
Mobile
Font-family: Barlow
Font-weight: Bold 700
Font-size: 20px
Line-height: 28px
Color: #003a54
Margin-bottom: 32px
HEADING H2
The quick brown fox jumps over the lazy dog
Desktop
Font-family: Barlow
Font-weight: Semibold 600
Font-size: 21px
Line-height: 27px
Color: #003a54
Margin-bottom: 24px
Mobile
Font-family: Barlow
Font-weight: Semibold 600
Font-size: 18px
Line-height: 24px
Color: #003a54
Margin-bottom: 24px
HEADING H3
The quick brown fox jumps over the lazy dog
Desktop
Font-family: Barlow
Font-weight: Semibold 600
Font-size: 18px
Line-height: 24px
Color: #003a54
Margin-bottom: 24px
Mobile
Font-family: Barlow
Font-weight: Semibold 600
Font-size: 16px
Line-height: 24px
Color: #003a54
Margin-bottom: 16px
HEADING H4
The quick brown fox jumps over the lazy dog
Desktop
Font-family: Barlow
Font-weight: Semibold 600
Font-size: 16px
Line-height: 22px
Color: #003a54
Margin-bottom: 16px
Mobile
Font-family: Barlow
Font-weight: Semibold 600
Font-size: 14px
Line-height: 22px
Color: #003a54
Margin-bottom: 16px
Heading h5
The quick brown fox jumps over the lazy dog
Desktop
Font-family: Barlow
Font-weight: Semibold 600
Font-size: 14px
Line-height: 18px
Color: #003a54
Margin-bottom: 16px
Mobile
Font-family: Barlow
Font-weight: Semibold 600
Font-size: 12px
Line-height: 18px
Color: #003a54
Margin-bottom: 16px
Heading h6
h6: The quick brown fox jumps over the lazy dog
Desktop
Font-family: Barlow
Font-weight: Regular 400
Font-size: 14px
Line-height: 18px
Color: #003a54
Margin-bottom: 16px
Mobile
Font-family: Barlow
Font-weight: Semibold 600
Font-size: 12px
Line-height: 18px
Color: #003a54
Margin-bottom: 16px
Testo
Paragrafo
Paragraph 400. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Desktop
Font-family: Titillium web
Font-weight: Regular 400
Font-size: 16px
Line-height: 24px
Color: #000000
Margin-bottom: 10px
Mobile
Font-family: Titillium web
Font-weight: Regular 400
Font-size: 16px
Line-height: 21px
Color: #000000
Margin-bottom: 10px
Data (uso icona opzionale)
15/06/2020
Desktop
Font-family: Titillium web
Font-weight: Light 300
Font-size: 14px
Line-height: 21px
Color: #000000
Margin-bottom: 16px
Mobile
Font-family: Titillium web
Font-weight: Light 300
Font-size: 14px
Line-height: 21px
Color: #000000
Margin-bottom: 16px
Luogo (uso icona opzionale)
Piazzale Aldo Moro, 5 - Bari
Desktop
Font-family: Titillium web
Font-weight: Light 300
Font-size: 14px
Line-height: 21px
Color: #000000
Margin-bottom: 16px
Mobile
Font-family: Titillium web
Font-weight: Light 300
Font-size: 14px
Line-height: 21px
Color: #000000
Margin-bottom: 16px
Utilizzo
La tipografia può aiutare a creare chiare gerarchie, organizzare le informazioni e
guidare gli utenti attraverso un prodotto o un'esperienza.
La gerarchia visiva
individuata per desktop e mobile, intesa come uso della scala tipografica,
garantisce agganci visivi nella pagina stimolando
l'attenzione, facilitando la lettura e di conseguenza l'accesso alle informazioni.
Per l'allineamento del testo, AgID, Agenzia per l'Italia digitale,
sostiene che il paragarafo di testo debba essere composto con allineamento a
sinistra e che non superi mai i 75 caratteri (spazi inclusi) per rigo.
L'allineamento giustificato e senza sillabazione è sempre da evitare per
l'incongrua spaziatura delle parole e la minore
leggibilità che ne comporta.
Si consiglia anche di consultare la pagina colori per l'utilizzo di apposite classi per applicare colori al testo.