Design System

Monitor Web
Logo Regione Autonoma della Sardegna

Foundations

Typography

In questa sezione è presente la gamma di font utilizzabili e i relativi stili. Tutti i font possono essere scaricati da Google Font.

Sans Serif: Titillium Web

Il Titillium Web è il carattere istituzionale del portale Monitor Web, tiene conto delle indicazioni tipografiche fornite da design.italia.it, è il font che viene utilizzanto per quasi la totalità dei testi e dei componenti.

Di seguito è possibile visualizzare le 4 varianti (Light, Regular, Semibold, Bold) e la versione Italic.

Aa

A B C Č Ć D Đ E F G H I J K L M N O P Q R S Š T U V W X Y Z Ž a b c č ć d đ e f g h i j k l m n o p q r s š t u v w x y z ž 1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < - + ÷ ×=> ® © $ € £ ¥ ¢ : ; , . *

Pesi / Font-weight / Style

Light 200

A B C Č Ć D Đ E F G H I J a b c č ć d đ e f g h i j 1 2 3 4 5

Regular 400

A B C Č Ć D Đ E F G H I J a b c č ć d đ e f g h i j 1 2 3 4 5

Semibold 600

A B C Č Ć D Đ E F G H I J a b c č ć d đ e f g h i j 1 2 3 4 5

Bold 700

A B C Č Ć D Đ E F G H I J a b c č ć d đ e f g h i j 1 2 3 4 5

Italic

Aa

Serif: Lora

Lora è un carattere con le grazie che si abbina al Titillium, è utilizzato per i contenuti molto lunghi. Un esempio pratico è il testo di un contenuto redazionale.

Di seguito è possibile visualizzare le 3 varianti (Regular, Semibold, Bold) e la versione Italic. 

Aa

A B C Č Ć D Đ E F G H I J K L M N O P Q R S Š T U V W X Y Z Ž a b c č ć d đ e f g h i j k l m n o p q r s š t u v w x y z ž 1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < - + ÷ ×=> ® © $ € £ ¥ ¢ : ; , . *

Pesi / Font-weight / Style

Regular 400

A B C Č Ć D Đ E F G H I J a b c č ć d đ e f g h i j 1 2 3 4 5

Semibold 600

A B C Č Ć D Đ E F G H I J a b c č ć d đ e f g h i j 1 2 3 4 5

Bold 700

A B C Č Ć D Đ E F G H I J a b c č ć d đ e f g h i j 1 2 3 4 5

Italic

Aa

Monospace: Roboto

Roboto è un font monospace, viene utilizzato principalmente nella sua parte numerica per la rappresentazione di grafici, tabelle, calcoli matematici e codici.

Di seguito è possibile visualizzare le 4 varianti (Light, Regular, Semibold, Bold) e la versione Italic.

Aa

A B C Č Ć D Đ E F G H I J K L M N O P Q R S Š T U V W X Y Z Ž a b c č ć d đ e f g h i j k l m n o p q r s š t u v w x y z ž 1 2 3 4 5 6 7 8 9 0 ‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < - + ÷ ×=> ® © $ € £ ¥ ¢ : ; , . *

Pesi / Font-weight / Style

Light 200

A B C Č Ć D Đ E F G H I J a b c č ć d đ e f g h i j 1 2 3 4 5 6 7

Regular 400

A B C Č Ć D Đ E F G H I J a b c č ć d đ e f g h i j 1 2 3 4 5 6 7

Medium 600

A B C Č Ć D Đ E F G H I J a b c č ć d đ e f g h i j 1 2 3 4 5 6 7

Bold 700

A B C Č Ć D Đ E F G H I J a b c č ć d đ e f g h i j 1 2 3 4 5 6 7

Italic

Aa

Informazione
Questa pagina è attualmente visualizzata in modalità Mobile

Informazione
Questa pagina è attualmente visualizzata in modalità Desktop

Visualizzazione in modalità Mobile (Screen width < 576px)

H1: 40px Bold
Lorem ipsum dolor sit consectetur adipiscing

  • Titillium Web Bold
  • size: 40 px
  • line height: 48 px
  • letter spacing: -1

H2: 32px Bold
Lorem ipsum dolor sit consectetur adipiscing

  • Titillium Web Bold
  • size: 32 px
  • line height: 40 px
  • letter spacing: 0

H3: 28px Bold
Lorem ipsum dolor sit consectetur adipiscing

  • Titillium Web Bold
  • size: 28 px
  • line height: 32 px
  • letter spacing: 0

H4: 24px Semibold
Lorem ipsum dolor sit consectetur adipiscing

  • Titillium Web Semibold
  • size: 24 px
  • line height: 32 px
  • letter spacing: 0

H5: 20px Semibold
Lorem ipsum dolor sit consectetur adipiscing

  • Titillium Web Semibold
  • size: 20 px
  • line height: 24 px
  • letter spacing: 0

H6: 16px Semibold
Lorem ipsum dolor sit consectetur adipiscing

  • Titillium Web Semibold
  • size: 16 px
  • line height: 24 px
  • letter spacing: 0

Lead text regular 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sem maecenas nunc, felis tempor blandit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sem maecenas nunc, felis tempor blandit.

  • Titillium Web Regular
  • size: 20 px
  • line height: 32 px
  • letter spacing: 0
  • paragraf spacing: 24

Body text regular 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sem maecenas nunc, felis tempor blandit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sem maecenas nunc, felis tempor blandit.

  • Titillium Web Regular
  • size: 16 px
  • line height: 24 px
  • letter spacing: 0
  • paragraf spacing: 16

Body text Lora 16px regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sem maecenas nunc, felis tempor blandit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sem maecenas nunc, felis tempor blandit.

  • Lora Regular
  • size: 16 px
  • line height: 24 px
  • letter spacing: 0
  • paragraf spacing: 16

Visualizzazione in modalità Desktop (Screen width ≥ 576px)

H1: 48px Bold
Lorem ipsum dolor sit consectetur adipiscing

  • Titillium Web Bold
  • size: 48 px
  • line height: 56 px
  • letter spacing: -1

H2: 40px Bold
Lorem ipsum dolor sit consectetur adipiscing

  • Titillium Web Bold
  • size: 40 px
  • line height: 48 px
  • letter spacing: 0

H3: 32px Bold
Lorem ipsum dolor sit consectetur adipiscing

  • Titillium Web Bold
  • size: 32 px
  • line height: 40 px
  • letter spacing: 0

H4: 28px Semibold
Lorem ipsum dolor sit consectetur adipiscing

  • Titillium Web Semibold
  • size: 28 px
  • line height: 32 px
  • letter spacing: 0

H5: 24px Semibold
Lorem ipsum dolor sit consectetur adipiscing

  • Titillium Web Semibold
  • size: 24 px
  • line height: 32 px
  • letter spacing: 0

H6: 18x Semibold
Lorem ipsum dolor sit consectetur adipiscing

  • Titillium Web Semibold
  • size: 18 px
  • line height: 24 px
  • letter spacing: 0

Lead text regular 24px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sem maecenas nunc, felis tempor blandit. Erat commodo, mi, sit feugiat quisque. Vehicula egestas pulvinar mauris morbi facilisi quis turpis.

  • Titillium Web Regular
  • size: 24 px
  • line height: 32 px
  • letter spacing: 0
  • paragraf spacing: 24

Body text regular 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sem maecenas nunc, felis tempor blandit. Erat commodo, mi, sit feugiat quisque. Vehicula egestas pulvinar mauris morbi facilisi quis turpis.

  • Titillium Web Regular
  • size: 18 px
  • line height: 28 px
  • letter spacing: 0
  • paragraf spacing: 16 px

Body text Lora 18px regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sem maecenas nunc, felis tempor blandit. Erat commodo, mi, sit feugiat quisque. Vehicula egestas pulvinar mauris morbi facilisi quis turpis.

  • Titillium Web Regular
  • size: 18 px
  • line height: 28 px
  • letter spacing: 0
  • paragraf spacing: 16 px