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.

Aa

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.