Una delle proprietà più semplici e allo stesso tempo potenti dei CSS è la proprietà line-height: il Web è soprattutto testo, e il line-height giusto può fare la differenza in quanto a leggibilità. In questo breve articolo vedremo come specificare questa proprietà, dimensionarla e usarla al meglio.
Il line-height specifica l'altezza di linea del testo, definendo così implicitamente l'interlinea: la spaziatura tra due linee di testo successivo:
La proprietà line-height accetta valori specificati in tutte le unità di misura, ma i modi più diffusi per specificarlo sono sostanzialmente px, %, em e numeri puri. Nel corso dell'articolo vedremo una possibile strategia per poterla dimensionare al meglio.
Procediamo ora con vedere un semplice esempio. La seguente regola specifica un line-height di 18 pixel per tutti i paragrafi:
p { line-height: 18px }Line-height nella forma contratta
Utilissimo il fatto che la proprietà line-height può essere inclusa nello shorthand font. Dopo il font-size, basterà riportare una slash (/) e il line-height. Vediamo un esempio:
p { font:12px/150% Arial, sans-serif }In questo caso quindi viene definito un font-size di 12 pixel e un line-height del 150% del font-size, che risulterà quindi 18 pixel. Per rendere meglio l'idea, ho pensato di preparare un piccolo esempio che usa proprio questa regola e una piccola linea di sfondo così da mostrare visivamente l'altezza delle linee di testo. C'è anche un secondo esempio in cui il font-size è di 18 pixel e l'altezza di linea è di 30 pixel.
I fattori da valutare nella scelta del line-height
C'è da premettere che non c'è una misura standard per il line-height, e che il più delle volte la misura di default dei browser (tipicamente 1.2 volte il font-size) non è sufficiente per garantire una buona leggibilità. Ecco i fattori che, a parer mio, influenzano la scelta:
- La dimensione del font
- La lunghezza di linea
- La lunghezza (densità) dei singoli paragrafi
- Il contrasto tra testo e sfondo
- Il tipo di font
- L'allineamento del testo
Il valore del line-height dipenderà dai casi, e su layout a più colonne o pagine con sezioni di testo di differente grandezza, è consigliabile utilizzare differenti line-height, tenendo presente che sezioni di testo più lunghe, testo più grande, giustificato e con contrasto minore con lo sfondo richiedono line-height maggiore.
Personalmente ritengo che valori accettabili del line-height spaziano tra 1.3 e 1.7 volte il font-size, e che valori tra 1.4 e 1.5 siano indicati per la sezione di testo centrale di una pagina con testo di dimensioni medie. Una raccomandazione: è preferibile utilizzare il dimensionamento del line-height relativo, anche con il font dimensionato in pixel; in ogni caso un line-height in pixel è accettabile solo quando il testo è dimensionato in pixel.
Prima di procedere, c'è ancora una cosa importantissima da evidenziare: il line-height viene ereditato. Questo significa che è possibile assegnarlo ad esempio al body e tale valore verrà propagato a tutti gli elementi di pagina. Tale approccio si rivela efficace, basterà avere cura poi di interrompere la sua propagazione qualora neccessario: ad esempio, specificando un line-height diverso per le colonne laterali o le sezioni di testo più piccolo.
Specificare un line-height senza unità di misura
Come abbiamo detto, ci sono diversi modi per specificare il line-height. All'apparenza questi modi possono sembrare equivalenti. Ad esempio, salvo ridefinizioni o cambiamento del font-size solo su alcuni paragrafi, le seguenti regole sono equivalenti e genereranno un line-height di 21 pixel:
p { font:14px/21px Arial, sans-serif }
p { font:14px/150% Arial, sans-serif }
p { font:14px/1.5em Arial, sans-serif }
p { font:14px/1.5 Arial, sans-serif }Se si considera invece il dimensionamento del font relativo, le seguenti tre regole restano equivalenti e generano un'altezza di linea pari a una 1.5 volte la dimensione del font:
body { font: 76%/150% Arial, sans-serif }
body { font: 76%/1.5em Arial, sans-serif }
body { font: 76%/1.5 Arial, sans-serif }Ora è importante fissare un concetto essenziale. Nel caso delle tre regole appena viste, se il font-size è impostato a dimensione media sul browser, tipicamente il testo sarà 12 pixel. Il computed value del line-height sarà quindi 1.5 volte 12 pixel, risultando quindi 18 pixel per i tutti gli elementi di pagina in tutti e tre i casi, fatta eccezione di elementi con un diverso font-size. In quest'ultimo caso emergono infatti differenze sostanziali.
Quale strategia adottare quindi? Eric Meyer nel suo articolo
Unitless line-height spiega benissimo il funzionamento del line-height specificato relativamente, ovvero mediante percentuali, em o numeri puri, ovvero senza unità di misura. L'articolo è stato segnalato sul blog nel post Il dimensionamento del line-height.
Il punto fondamentale da tener presente è che nel caso di line-height specificati in percentuali o em il computed value del line-height verrà propagato ai discendenti dell'elemento, indipendentemente dal loro font-size.
Nel caso di numeri puri a propagarsi è solo un fattore moltiplicativo, mantenendo quindi un'altezza di linea effettivamente calcolata in base font-size dell'elemento in questione e non del suo antenato.
Per rendere l'idea, ho preparato questo esempio in cui la differenza è evidente. È per questo che Meyer sostiene che nel 99% dei casi la soluzione migliore è specificare il line-height senza unità di misura.
Conclusioni e alcuni spunti di sviluppo
Abbiamo visto brevemente alcune caratteristiche della proprietà line-height, insieme ad alcune pratiche di sviluppo. In conclusione, ecco alcuni esempi che potrebbero essere una buona base di partenza per definire il font e il line-height delle nostre pagine. Sono tutti consultabili a partire da questo primo esempio, per comodità riporto qui le sei regole usate:
body { font:76%/1.55 Arial,sans-serif } /* larghezza del testo: 500px */
body { font:85%/1.6 Arial,sans-serif } /* larghezza del testo: 500px */
body { font:85%/1.7 Verdana,Arial,sans-serif } /* giustificato, larghezza del testo: 700px */
body { font:100.01%/1.5 Arial,sans-serif } /* larghezza del testo: 700px */
body { font:62.5%/1.4 Verdana,Arial,sans-serif } /* larghezza del testo: 180px */
body { font:76%/1.5 Verdana,Arial,sans-serif } /* larghezza del testo: 220px */Gli esempi menzionati nel testo sono tutti disponibili per il download. Alla prossima.
