Prerequisiti: Dimensione, peso e stile dei caratteri.
Interlinea e spaziatura
Interlinea e spaziatura: fondamenti.
line-height determina l’altezza usata per le righe. Un numero senza unità, come 1.6, è un fattore rispetto alla dimensione del font dell’elemento. Questo fattore viene ereditato come numero, così un figlio con font diverso può calcolare la propria altezza di riga. Una lunghezza fissa ereditata può invece essere poco adatta a un figlio con caratteri molto grandi.
Come funziona: interlinea e spaziatura
Interlinea e spaziatura: comportamento nel browser.
letter-spacing regola lo spazio fra i caratteri; word-spacing quello fra le parole. Non servono a inserire nuovi caratteri nel testo. Valori eccessivi possono ostacolare la lettura e aumentare gli a capo. Una spaziatura utile per una breve etichetta non è automaticamente adatta a un paragrafo lungo.
Scelte di utilizzo e limiti
Interlinea e spaziatura: progetto e verifica.
La misura delle righe e l’interlinea lavorano insieme: righe molto lunghe o troppo vicine rendono più difficile seguire il testo. max-width espresso in ch può limitare la larghezza secondo una misura del font; ch non conta esattamente i caratteri presenti. Verifica con font diversi e zoom senza forzare altezze fisse.
Esempio commentato
Interlinea e spaziatura: HTML e CSS.
Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.
Documento HTML completo
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interlinea e spaziatura del testo</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<article class="lettura"><h1>Spazio fra le righe</h1><p>Un paragrafo abbastanza lungo permette di confrontare l’interlinea e seguire il passaggio da una riga alla successiva. Aggiungi altre frasi per una prova realistica.</p></article>
</body>
</html>
File stile.css
.lettura { max-width: 55ch; font-size: 1rem; line-height: 1.6; }
h1 { letter-spacing: 0.02em; line-height: 1.2; }
Risultato nel browser
Il corpo usa un fattore 1.6; il titolo uno più compatto. letter-spacing cambia la distanza tra lettere del titolo.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
max-width | 55ch | Limite superiore alla larghezza. |
font-size | 1rem | Dimensione del carattere. |
line-height | 1.6 | Altezza della riga; un numero senza unità è un fattore. |
letter-spacing | 0.02em | Spazio fra caratteri. |
LABORATORIO
Sperimentare: Interlinea e spaziatura
Il corpo usa un fattore 1.6; il titolo uno più compatto. letter-spacing cambia la distanza tra lettere del titolo.
Obiettivo: Comprendere e applicare interlinea e spaziatura attraverso esempi e verifica nel browser.
Software: editor di testo e browser con DevTools; Tempo: 15 minuti.
Preparazione: scarica l’esempio completo e estrai lo ZIP. Apri index.html nel browser. Puoi anche aprire l’esempio online.
Apri il file stile.css nell’editor. Le lezioni iniziali usano un documento già preparato per concentrarsi sulle regole; il collegamento esterno e lo stile interno vengono spiegati nelle lezioni dedicate. Le modifiche nei DevTools sono normalmente temporanee.
Procedura passo passo
- Osserva il punto di partenza: apri l’esempio, confronta markup e regole e individua il selettore o il contesto di layout rilevante.
- Esegui la modifica: Cambia line-height del corpo da 1.6 a 1 e confronta la leggibilità.
- Salva e ricarica la pagina dopo ogni modifica. Confronta gli elementi che devono cambiare con quelli che devono restare invariati.
- Ispeziona il risultato: usa il menu Ispeziona e controlla Styles/Regole e Computed/Calcolato. Per layout Flex o Grid attiva l’overlay, se disponibile.
- Annota causa ed effetto: scrivi il valore o la struttura iniziale, il cambiamento e il risultato. Ripristina il punto di partenza prima dell’esercizio autonomo.
Le righe diventano più vicine; il contenuto HTML rimane identico. Ripristina una spaziatura leggibile.
Il font e alcuni dettagli dell’interfaccia dipendono dal browser. Valuta la proprietà e il comportamento descritti, non una corrispondenza perfetta con uno screenshot.
Verifica del risultato
| Controllo | Criterio |
|---|---|
| Effetto specifico | Le righe diventano più vicine; il contenuto HTML rimane identico. Ripristina una spaziatura leggibile. |
| Corrispondenza del codice | Individua la dichiarazione o la relazione HTML responsabile della differenza. |
| Persistenza | Riporta la modifica nel file e verifica dopo un ricaricamento. |
| Spiegazione | Motiva la differenza senza affidarti soltanto a uno screenshot. |
Esercizio autonomo
Aggiungi una moderata spaziatura fra parole del solo paragrafo.
Consegna: file modificati e una breve spiegazione di selettore, proprietà e risultato. Criterio di riuscita: il cambiamento richiesto funziona dopo il ricaricamento e non taglia informazioni indispensabili.
.lettura p { word-spacing: 0.1em; }Integra la soluzione nel punto pertinente: modifica o sostituisci le regole coinvolte invece di accumulare dichiarazioni contraddittorie. Le altre parti dell’esempio restano necessarie.
Verifica dei concetti
Interlinea e spaziatura: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Che cosa significa line-height: 1.6? ▾
2. Come si interpreta il codice dell’esempio? ▾
3. Quale risultato permette di verificare la modifica del laboratorio? ▾
4. Quale attenzione evita un’interpretazione sbagliata? ▾
Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.