Programmazione Web » Css » Rendere pił leggibili i paragrafi utilizzando l'interlinea
Rendere pił leggibili i paragrafi utilizzando l'interlinea
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1108 volte
Le potenzialità dei Css ci permettono una corretta formattazione del testo di una pagina web, senza dover ricorrere a nessun tag Html. In particolar modo oggi affronteremo il problema dell'interlinea, vedendo in dettaglio tutti i valori che questa può assumere.
Innanzitutto dobbiamo associare la proprietà line-height ad un selettore Css; nel nostro esempio utilizzeremo un comune paragrafo (tag p) per mostrarvi le possibili varianti di interlinee. Ecco il codice Css:
<style>
p {
line-height: normal;
}
</style>
normal
Nell'esempio abbiamo utilizzato il valore normal, che separa le righe del paragrafo con uno spazio ritenuto ragionevole; generalmente questo valore varia tra 1 e 1.2.
percentuale
E' possibile associare all'interlinea un valore calcolato in percentuale rispetto alla dimensione del font. Supponendo quindi di avere un font di grandezza pari a 20px e di avere un'interlinea pari al 200%, il valore in px dell'interlinea sarà pari a px (20x200%) ovvero 40px. Valori inferiori al 100% comportano una sovrapposizione delle righe di testo, causandone la non-leggibilità delle stesse!
valore numerico
E' possibile anche associare all'interlinea un valore numerico. L'altezza dell'interlinea sarà pari al valore del font moltiplicato per il valore numerico associato all'interlinea stessa. Ad esempio, avendo un'interlinea pari a 2.0 e un font di grandezza pari a 20px, avremo un'interlinea pari a 40px.
unità di misura
Il modo più semplice per stabilire l'altezza di un'interlinea è quello di associarle un valore stabilito con una unità di misura, come ad esempio 12px.
N.B.: E' inutile dire che line-height: 2.0 e line-height: 200% portano allo stesso risultato!
Aggiungi questo tutorial ai preferiti
