Tipografia: gerarchie e stili per i titoli

Titoli (heading)

  1. Scegli una famiglia di caratteri tipografici per il testo.
  2. Scegli se:
    1. utilizzare la stessa famiglia di caratteri tipografici per i titoli;
    2. utilizzare una seconda famiglia di caratteri tipografici per i titoli.

Utilizzando differenti famiglie di caratteri, dimensioni del corpo, pesi, stili e trasformazioni, è possibile definire un numero elevato di combinazioni e definire una gerarchia.

Html ha 6 tag predefiniti per titoli e sottotitoli (heading): h1, h2, h3, h4, h5, h6.

Ecco la nostra gerarchia, utilizzata in questo sito web e la conseguente selezione dei 6 stili per i titoli standard in html.

Tutti gli stili per i titoli

Normal text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="text-normal">Normal text</h6>

Italic text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="text-italic">Italic text</h6>

Uppercase text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="text-normal">Normal text</h6>

Bold text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="text-bold">Bold text</h6>

Uppercase bold text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="text-uppercase-bold">Uppercase bold text</h6>

Normal text with heading color

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="text-heading-color">Normal text with heading color</h6>

Italic text with heading color

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="text-heading-color-italic">Italic text with heading color</h6>

Uppercase text with heading color

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="text-heading-color-uppercase">Uppercase text with heading color</h6>

Bold text with heading color

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="text-heading-color-bold">Bold text with heading color</h6>

Uppercase bold text with heading color

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="text-heading-color-uppercase-bold">Uppercase bold text with heading color</h6>

Small heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="heading-small">Small heading</h6>

Small uppercase heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="heading-small-uppercase">Small uppercase heading</h6>

Small bold heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="heading-small-bold">Small bold heading</h6>

Small uppercase bold heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="heading-small-uppercase-bold">Small uppercase bold heading</h6>

Medium heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="heading-medium">Medium heading</h6>

Medium uppercase heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="heading-medium-uppercase">Medium uppercase heading</h6>

Medium bold heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="heading-medium-bold">Medium bold heading</h6>

Medium uppercase bold heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="heading-medium-uppercase-bold">Medium uppercase bold heading</h6>

Large heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="heading-large">Large heading</h6>

Large uppercase heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="heading-large-uppercase">Large uppercase heading</h6>

Large bold heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="heading-large-bold">Large bold heading</h6>

Large uppercase bold heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<h6 class="heading-large-uppercase-bold">Large uppercase bold heading</h6>

Stili per html5

Titolo 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<h1>Titolo 1</h1>

Titolo 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<h2>Titolo 2</h2>

Titolo 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<h3>Titolo 3</h3>

Titolo 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<h4>Titolo 4</h4>

Titolo 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<h5>Titolo 5</h5>

Titolo 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<h6>Titolo 6</h6>

Corso di architettura dell’informazione

Strutturazione semantica monocromatica

L’ordine di svolgimento delle esercitazioni 1a e 1b è a discrezione dello studente.
I singoli lavori verranno confrontati e discussi in gruppo.

Esercitazione 1 – Pasta con le sarde

Scarica l’archivio pasta_sarde-ricetta_01.zip e aprilo.

All’interno troverai la Ricetta della pasta con le sarde, in formato rtf e pdf.

a. Strutturazione semantica monocromatica

Puoi:

  • stampare il testo in formato pdf e utilizzare tre penne colorate: nera, rossa e blu;
  • aprire in un editor il testo in formato rtf e utilizzare il grassetto per il nero e applicando i colori rosso e blu. Puoi anche usare i simboli della tastiera.

Identifica e distingui le parti di testo con differente valore semantico con i tre colori.

b. Strutturazione semantica tricromatica

Puoi:

  • stampare il testo in formato pdf e utilizzare una penna nera;
  • aprire in un editor il testo in formato rtf e utilizzare il grassetto per il nero. Puoi anche usare i simboli della tastiera.

Identifica e distingui le parti di testo con differente valore semantico con il solo di colore nero.

 

mydevice.io

mydevice.io è un utile strumento per sviluppatori web, per verificare le dimensioni dello schermo del proprio dispositivo e le funzionalità supportate dal browser, oltre che per ottenere informazioni sulle risoluzioni dei dispositivi più diffusi.

Eccellenze del design nel Lazio

Il Presidente della Regione Lazio, On. Nicola Zingaretti, ha conferito il premio “Eccellenze del design nel Lazio” a tre membri di ISOTYPE.ORG: Antonella Abbatiello, Stefano Baldassarre e Lorenzo De Tomasi.