back to top

CSS: spaziatura, spazi bianchi e interlinea nel testo

Oltre a quelle citate nella lezione precedente della nostra Guida CSS esistono diverse altre proprietร  per la stilizzazione del testo attraverso le quali รจ possibile definirne, in modo estremamente preciso, la disposizione di lettere e parole. Queste proprietร  di CSS sono:

  • letter-spacing
  • word-spacing
  • white-space
  • line-height

Anche queste proprietร , come tutte le altre relative alla stilizzazione dei blocchi di testo, sono ereditate. Vediamole nel dettaglio.

letter-spacing e word-spacing

Queste due proprietร  consentono di gestire la spaziatura (o, come spesso si dice, il "respiro") allโ€™interno di un testo. In pratica รจ possibile definire lo spazio, rispettivamente, tra le singole lettere di una parola e tra le diverse parole di un testo. Entrambe possono avere come valore "normal" oppure un numero accompagnato da unโ€™unitร  di misura (normalmente "px"). Vediamo un esempio:

h1
{
  letter-spacing: 3px;
  word-spacing: 9px;  
}

white-space

Questa proprietร  consente di definire il comportamento del testo in presenza di spazi bianchi. Come sappiamo, in HTML, una molteplicitร  di spazi bianchi nel codice vengono rappresentati a video come un solo spazio bianco. Ciรฒ accade sempre salvo che tali spazi non siano rappresentati allโ€™interno dei tag <pre> e <code> dove, viceversa, ogni spazio mantiene la sua consistenza. Attraverso la proprietร  white-space possiamo, appunto, simulare questi due tag coi CSS.

I valori possibili sono:

  • none โ€“ (default) multipli spazi bianchi sono ridotti ad uno;
  • pre โ€“ si comporta come il tag <pre>;
  • nowrap โ€“ multipli spazi bianchi sono ridotti e il ritorno a capo รจ disabilitato.

line-height

Si tratta di una proprietร  molto importante in quanto grazie ad essa รจ possibile definire una sorta di interlinea (un poโ€™ come facciamo quando scriviamo un documento su MS Word). In realtร , attraverso line-height, viene definito non lo spazio tra le linee ma lโ€™altezza delle linee stesse: il risultato, di fatto, รจ il medesimo.

Questa proprietร  ammette i seguenti valori:

  • normal โ€“ (default) il browser calcola in automatico lโ€™altezza della linea;
  • valore numerico con unitร  di misura โ€“ la linea sarร  alta esattamente quanto specificato dal designer;
  • valore numerico senza unitร  di misura โ€“ si tratta di un moltiplicatore rispetto allโ€™altezza del font (se, ad esempio, si indica solo il valore numerico 2 la linea sarร  alta il doppio del font);
  • percentuale โ€“ lโ€™altezza della linea sarร  calcolata in percentuale rispetto allโ€™altezza del font (se, ad esepio, si indica come valore 150% la linea sarร  alta una volta e mezzo lโ€™altezza del font).

Vediamo un esempio:

body
{
  line-height: 150%;
}
Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).