CSS, la spaziatura dei caratteri con letter-spacing

di Michele Costanzo Commenta

CSS letter-spacing spaziatura
Da qualche tempo stiamo analizzando l’uso dei fogli di stile CSS per la formattazione del testo nei documenti HTML. In questa guida analizzeremo l’uso della proprietà letter-spacing per gestire la spaziatura dei caratteri, vale a dire la distanza tra due lettere successive non separate da spazi.

L’uso di letter-spacing nel CSS

La modifica della spaziatura predefinita tra le lettere risponde spesso ad esigenze di impaginazione o di impatto grafico. In altre circostanze può essere utile definire una spaziatura specifica per migliorare il riempimento degli spazi nella pagina HTML. Come detto questo aspetto del testo è gestito tramite la proprietà letter-spacing; consideriamo il seguente elemento di codice CSS:

h1 {letter-spacing: 15px;}

In questa forma la proprietà letter-spacing indica al browser che i titoli H1 andranno rappresentato con uno spazio tra i caratteri pari a 15 pixel. Oltre ai pixel (px) letter-spacing accetta le principali altre unità di misura usate nei fogli di stile inclusi cm, mm, in, em ed ex. Al solito px, em ed ex sono preferibili per i documenti da visualizzare a video mentre cm, mm, e in (pollici) sono preferibili nei documenti destinati alla stampa. In questo senso se volessimo fissare una spaziatura in stampa di 12 mm tra i caratteri utilizzeremmo una istruzione di questo tipo:

p {letter-spacing: 12mm;}

E’ interessante osservare che letter-spacing accetta anche valori negativi anche se l’effetto grafico di queste impostazioni può compromettere la leggibilità del testo

Il valore predefinito di letter-spacing

Quando non si è interessati a definire una spaziatura fissa tra i caratteri la proprietà letter-spacing può essere omessa. In alcuni casi si può forzare l’uso della spaziatura predefinita assegnando il valore ‘normal’ come nel seguente esempio:

h2 {letter-spacing: normal;}

Lascia un commento

Il tuo indirizzo email non verrà pubblicato.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>