Tipografia e spaziature

1. Il concetto, spiegato da zero

La tipografia rende i manuali lunghi più leggibili e aiuta a distinguere informazioni.

font-family sceglie il carattere, line-height regola l’interlinea e max-width limita la larghezza delle righe. Usa rem quando le dimensioni devono seguire il font base.

2. Un esempio ragionato

Osserva l’esempio e leggi ogni istruzione nell’ordine. Prima di provarlo, fermati a prevedere cosa succederà; capire il motivo del risultato è più importante che memorizzare la sintassi.

article {
  font-family: system-ui, sans-serif;
  line-height: 1.65;
  max-width: 65ch;
}

Come leggere questo esempio

1. Prima di eseguire, immagina come apparirà il risultato nel browser.
2. Spiega con parole tue in che modo “tipografia e spaziature” risolve un problema concreto.
3. Rileggi ogni riga del programma e individua i valori che vengono creati o modificati.
4. Modifica un valore; confronta il comportamento e annota che cosa è cambiato.

3. Adesso tocca a te

Obiettivo dell’esercizio: Rendi leggibile un articolo con interlinea e larghezza massima.

Puoi partire dall’esempio, riprodurlo e poi modificarlo. La soluzione di riferimento è disponibile sotto, ma conviene aprirla soltanto dopo un primo tentativo.

Il risultato comparirà qui.

article {
  font-family: system-ui, sans-serif;
  line-height: 1.65;
  max-width: 65ch;
}

4. Verifica e ripasso

5. Come proseguire

Prima del capitolo successivo, prova a spiegare il concetto a un amico senza leggere il codice. Se non riesci, torna all’esempio e fai una nuova variante: imparare significa anche sperimentare.